Clean Size Charts App

Don’t have our size chart app? You can use it for free by clicking here 🙂

With our app you can:

  • Create, update and delete size charts
  • Duplicate an existing size chart
  • Choose which products or collections to assign a size chart to
  • See how many impressions and clicks each size charts get

Video guide to setting up your first size chart

Summary of steps outlined in the video above
  1. Once you have installed the app, head here – Admin > Apps > Clean Size Charts. Then click “add size chart”
  2. You will see a list of pre-made templates (which you can use as a base for further charts if you wish). Click the “style” tab and change the settings here to customise the look of your chart. Your changes will be shown on the right hand side preview window, in real-time.
  3. Select the “Content” tab. You will see three content entry boxes. “Top text”, “Size chart table” and “Bottom text”. “Top text” will appear above your size chart table and “bottom” text will display below your size chart. Enter your desired content in to the top and bottom areas. Click the three little dots at the top of the each entry box and choose the “fullscreen” icon to expand the window to make things easier to work with.
  4. In the “size chart table” content area, use the provided icons, such as “insert row after”,”insert row below”, “delete column” and “delete row” to adjust your table to your requirements. Click the far left icon to expand additional table options, such as “table properties” where you can change border and cell colours, plus change the “class” option to “even stripes” to give a dotted line effect to your table borders. See our guide relating to this here.
  5. At the very bottom of your “content” tab’s page, underneath “bottom text”, you will see an area called “Image” and “Image URL”. Upload an image to the Shopify “files” area and insert the direct URL to this image to display your picture on your Size chart page. Toggle your “image position” to a place that you’re happy with.
  6. Move to the “Link” tab. Choose “fixed” to have the chart link display as a side ‘tab’ that sticks to the edge of the browser window on the product page. “Inline” allows you to place your link inside the product page’s content area. “Content > Link text” is what customers will see as the link which takes them to your chart. Choose an icon for your link if you wish and alter the other settings below such as “colours” and “position” to suit your needs.
  7. Move to the “Products” tab. By default, your size chart will display on all products unless you choose from the options listed in this tab. To have your chart/s display on certain products and collections only, use the “pick products” and “pick collections” buttons.
  8. Click “save as draft” or “save as published” to make the changes live (these may take a few minutes to show on your storefront).
TIP – Only one size chart can be displayed per product. If there’s more than one size chart assigned to the same collection or product, the most recently updated size chart will be shown. A size chart assigned to a specific product will take priority over size charts assigned to a collection.
TIP – The Clean Size Charts premium subscription option allows you to remove the ‘powered by Shopify’ message, insert a link to your size chart in your product page content and create unlimited size charts! 🙂

FAQs

What does Draft and Published mean?

If the status of a size chart is Draft, this means it won’t appear anywhere on your store, even if it’s assigned to a product or collection. If a size chart is Published, it will appear on your storefront.

What do impressions and clicks mean in my size chart list?

Impressions means the number of times the link to open your size chart has been viewed, and clicks is the number of people who have clicked on it. Note, if you’re logged as an administrator and are previewing your store, your impressions and clicks won’t be counted.

How do I remove the ‘powered by clean size charts’ text in my size chart?

You need to upgrade to the premium version of the app, which will remove this.

Why isn’t my size chart showing on my product?

  1. It may take a few minutes for size chart changes to be reflected on the store, so wait a little while and then refresh the page to see your changes.
  2. Make sure your size chart is Published. To do this open the size chart, click the arrow on the ‘Save as Draft’ button and click ‘Save as Published’.
  3. Make sure your size chart is tagged against the correct product. To do this open your size chart, and click the Products tab. Next, click the Pick Products button and find the product to tag the chart against. Click on the checkbox next to the product, and click Add. Finally, save the size chart.

I’m having trouble creating tables, help!

Please refer to this guide: Using, editing and creating tables

How can I change the text of my size chart link / button?

Open the size chart, and change to the ‘Link’ tab, and change the text within the field ‘Link text (optional)’.

Please note, the app does not currently support multiple languages – so you can’t have the size link/button in two different languages for a single product.

Using your own images

You can personalise your size chart by adding awesome pictures. These images can be your own, or from the thousands of beautiful copyright-free images on Burst – burst.shopify.com

1. Log into your themes Admin area, and at the bottom left hand corner of your store, click Settings.

2. Select Files – and you should now see this:

3. Click the Upload files button in the top right and upload your image.

TIP – Make sure your image file size isn’t too large and that you save it as a jpg. Aim to keep it under 200kb

4. Once you have completed these steps, your image will appear under the files and the URL you need to copy is on the right hand side.

5. Highlight the URL and copy it to your clipboard.

6. Return back to your store and open your size chart.

7. Go to the Content tab and paste your file URL in here and voila you’ve done it!!

How do I uninstall Clean Size Charts?

You can uninstall the app by clicking Delete next to the app in the App area of the Shopify Admin Area.

If you’re a paid user of the app, there will be HTML comments left within the code:

<!--CCSizeChartLaunchLocationBefore-->
<!--CCSizeChartLaunchLocationAfter-->

These will probably be within product.liquid, although they could be within the file that outputs the product form (which could be a snippet, depending on your theme).

These comments can be removed manually if you wish, although they will not cause any issues if they remain in the code.

If you were on the free plan, there is no code that needs manually removing.