<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>shopify &#8211; ClassFit</title>
	<atom:link href="https://classfit.com/knowledge-base/tag/shopify/feed/" rel="self" type="application/rss+xml" />
	<link>https://classfit.com</link>
	<description>Simple and Affordable Class Scheduling Software</description>
	<lastBuildDate>Mon, 07 Sep 2026 11:09:43 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.8</generator>

<image>
	<url>https://classfit.com/wp-content/uploads/2024/02/Classfit-Logo-1.svg</url>
	<title>shopify &#8211; ClassFit</title>
	<link>https://classfit.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Adding your calendar to your Shopify account</title>
		<link>https://classfit.com/knowledge-base/adding-your-calendar-to-your-shopify-account/</link>
		
		<dc:creator><![CDATA[Dan]]></dc:creator>
		<pubDate>Mon, 15 Apr 2024 11:13:50 +0000</pubDate>
				<guid isPermaLink="false">https://classfit.com/?post_type=epkb_post_type_1&#038;p=24669</guid>

					<description><![CDATA[If you have a Shopify account, your can add a custom branded calendar to it.]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">If you have a Shopify account, your can add a custom branded calendar to it. The ClassFit calendar will allow your clients to book and pay for all classes within Shopify. And you can custom brand it so it’s colors will perfectly match your business branding. This tutorial will show you how to integrate your calendar through Shopify. If you have a different type of website, please choose from our other tutorials below.</p>



<ul class="wp-block-list">
<li><a href="https://classfit.com/knowledge-base/adding-your-calendar-to-your-wordpress-org-or-html-website/">WordPress</a></li>



<li><a href="https://classfit.com/knowledge-base/adding-your-calendar-to-your-wix-website/">Wix</a></li>



<li><a href="https://classfit.com/knowledge-base/adding-your-calendar-to-your-squarespace-website/">Squarespace</a></li>



<li><a href="https://classfit.com/knowledge-base/adding-your-calendar-to-your-weebly-website/">Weebly</a></li>



<li><a href="https://classfit.com/knowledge-base/adding-your-calendar-to-your-godaddy-website/">GoDaddy</a></li>



<li><a href="https://classfit.com/knowledge-base/adding-your-calendar-to-other-website-builders/">Other website builders</a></li>
</ul>



<p class="wp-block-paragraph">Once you’re logged in to our website, click on Tools on the left side menu, then click Calendar Widget.</p>



<figure class="wp-block-image size-large"><img alt="ClassFit calendar widget page showing brand color pickers and a live calendar preview" fetchpriority="high" decoding="async" width="1024" height="500" src="https://classfit.com/wp-content/uploads/2024/04/image-129-1024x500.png" alt="" class="wp-image-53555" srcset="https://classfit.com/wp-content/uploads/2024/04/image-129-1024x500.png 1024w, https://classfit.com/wp-content/uploads/2024/04/image-129-300x146.png 300w, https://classfit.com/wp-content/uploads/2024/04/image-129-768x375.png 768w, https://classfit.com/wp-content/uploads/2024/04/image-129-1536x750.png 1536w, https://classfit.com/wp-content/uploads/2024/04/image-129-2048x1000.png 2048w, https://classfit.com/wp-content/uploads/2024/04/image-129-710x347.png 710w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">On this page you can select your light and dark brand colors. Start by selecting your brand colors, you can do this by clicking on the color and using the color picker, or by inserting the hex codes if you know them. Once we have all of this we will use your branding on all customer facing emails that relate to your business, and create your custom branded calendar.</p>



<p class="wp-block-paragraph">After you’ve added your brand identity, we’ll show you a preview of what your calendar will look like in your website. If it’s not perfect the first time, don’t worry, you can go back and keep tinkering with the colours until it is just right.</p>



<p class="wp-block-paragraph">Once you’re happy with your calendar branding, you can add it to your website. Click on Save and reload. Then scroll down, where you will see two lines of code. You will need to copy these lines of code onto the web page you want the calendar to appear. Where these lines go is slightly different depending on which type of website you have, so we will guide you through each website type below.</p>



<h2 class="wp-block-heading"><strong>Adding your calendar through Shopify to your website</strong></h2>



<p class="wp-block-paragraph">1. From your Online Store, go to Pages<b>.</b></p>



<figure class="wp-block-image size-full is-resized"><img alt="" decoding="async" width="308" height="782" src="https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-57-09.jpg" alt="" class="wp-image-35550" style="width:345px;height:auto" srcset="https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-57-09.jpg 308w, https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-57-09-118x300.jpg 118w" sizes="(max-width: 308px) 100vw, 308px" /></figure>



<p class="wp-block-paragraph">2. Click on the name of the page that you would like to embed the widget on. Or, create a new page by clicking the Add page button.</p>



<figure class="wp-block-image size-large"><img alt="" decoding="async" src="https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-58-31-1024x352.jpg" alt="" class="wp-image-35551"></figure>



<p class="wp-block-paragraph">3. In the Rich Text Editor, click on the&nbsp;<strong>HTML</strong>&nbsp;button.</p>



<figure class="wp-block-image size-full"><img alt="" decoding="async" width="806" height="662" src="https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-59-12.jpg" alt="" class="wp-image-35552" srcset="https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-59-12.jpg 806w, https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-59-12-300x246.jpg 300w, https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-59-12-768x631.jpg 768w, https://classfit.com/wp-content/uploads/2024/04/2019-03-30_11-59-12-710x583.jpg 710w" sizes="(max-width: 806px) 100vw, 806px" /></figure>



<p class="wp-block-paragraph">4. Now copy the two lines of codes from ClassFit.</p>



<figure class="wp-block-image size-full"><img alt="" decoding="async" src="https://wp.classfit.com/wp-content/uploads/2024/04/image-148.png" alt="" class="wp-image-53008"></figure>



<p class="wp-block-paragraph">5. Then paste the code into the HTML box.</p>



<figure class="wp-block-image size-large"><img alt="" decoding="async" src="https://classfit.com/wp-content/uploads/2024/04/image-2-1-1024x617.webp" alt="" class="wp-image-35557"></figure>



<p class="wp-block-paragraph">6. Save your changes.</p>



<p class="wp-block-paragraph">Now your new customized ClassFit calendar should be appearing perfectly on your Shopify account.</p>



<p class="wp-block-paragraph">If you need any further help with this, please email&nbsp;<a href="mailto:hello@classfit.com">hello@classfit.com</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
