How to Add a Size Chart in Shopify?

Making purchasing decisions is not that easy, especially if customers are buying apparel. The hesitation usually starts when they need to choose a size. Thus, you must ensure customers can choose the correct size to avoid returns and frustration that follow with the wrong size.

That's when the Shopify Size Chart App by Magefan comes in handy. 

To add a size chart to Shopify:

1. Navigate to Apps > Magefan Size Chart and hit the Add New Size Chart button.

add new size chart in shopify

2. Choose one of the ready-made templates or create a blank one. We'll go for the Women's Top Template. Once you choose a template, a draft is created.

create size chart in shopify

3. Make changes to the template, if needed. Edit the sizes and metrics, change colours, and size guide, etc. 

shopify new size chart

Note: if you want to upload a size chart image, simply choose a Blank template and upload the image via the media tool.

4. Add Custom CSS to adjust the design of your size chart (optional). 

shopify size chart custom css

5. Set the Conditions to define what products to display a size chart on. You can set that the products must match all conditions or any condition (if a product should match at least one condition for the size chat to be applied to it). Choose from: 

  • Title
  • Vendor
  • Product Type
  • Product Collection
  • Tags
  • Variant Title
  • Price
  • Compare at Price 
  • Inventory Quantity 

size chart rule conditions

We're going for the products that contain "jacket" in their titles since it's a women's top size chart.

Note: if you want to apply your size chart to all products simply leave the auto-filled settings (Products must match all conditions) and don't set any conditions. 

6. Define Shopify size chart display settings for desktop, tablet and mobile.

  • Enabled — enable or disable a size chart on desktop, tablet or mobile devices.
  • Button Position — choose where to display the size chart label — Right or Left.
  • Type — select the size chart type  — Popup or Drawer.
  • Label — set a name for the size chart label on different devices.

shopify size chart display settings

Finally, change the Status of the size chart to Active and Save it. Then go to the frontend to check the size chart. 

active size chart in shopify

You'll find the size chart label displayed according to the display settings you've set. 

size chart label shopify frontend

Then, once you click on the size chart label, it will pop up on the screen (Popup type) or fly out from the left or right side (Drawer type). 

shopify size chart

Now you have size options displayed accordingly on different types of products. This will not only improve customers' experience but also reduce the return rates on your store. So, it's a win-win. 

In case you have a multi-language store, you can also translate size charts into different languages in just a few clicks.