How to insert the size chart to your theme in Shopify

Drive 20-40% of your revenue with Avada

Get Started

Size chart is a chart that includes sizing information. According to the given information, your customers can actively pick the cloth that they think it could fit them perfectly. If you are running an online clothing store then size chart should be a must-have feature for yours.

However, please keep reading our instructional writing on How to insert the size chart to your theme to know more deeply about this topic.

Related posts:

• How to generate a size chart page in Shopify
• How to generate a size chart snippet in Shopify
• How to use a different language or change the Size chart text in Shopify

How to insert the size chart to your theme

• On Desktop
• On iPhone/Android

On Desktop

• Step 1: From your Shopify Admin panel, please go to Online Store > Themes. Or Choose the theme you need to configure and then click Actions > Edit code.

• Step 2: Click to open your product-template.liquid file in the Sections directory.

• Step 3: Paste the following code above the Add to cart button to add a Size chart button:

{% if product.options contains 'Size' %}
<a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
{% endif %}

• Step 4: Add the following code to the bottom of the product-template.liquid file:

<div id="size-chart" class="mfp-hide">
{{ pages.size-chart.content }}
</div>
<style>
#size-chart {
  border: 2px #555 solid;
  background-color: #ffffff;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

• Step 5: Choose Save.

• Step 6: Click theme.js in the Assets directory and add the following code to the bottom of the line:

$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midClick: true
});

• Step 7: Choose Save.

Please note that if the size chart is not appearing then you may need to add extra code to your theme. Because Magnific Popup is required for this customization to work so there are some themes (like Debut) that may require you to finish all these following steps:

• Step 1: Click to open the theme.scss.liquid file or the timber.scss.liquid file In the Assets directory and add this CSS to the bottom.

• Step 2: Please do one of these:
• • If your theme has a vendor.js file in the Assets directory, open the file and add this code to the bottom.
• • If your theme doesn’t have a vendor.js file in the Assets directory, place this code just above the $('.size-chart-open-popup').magnificPopup the code in your theme.js file.
• Step 3: Choose Save.

On iPhone/Android {#on-iphone/android}

• Step 1: From the Shopify App, choose Store.

• Step 2: Tap Online store in the Sales channels section.

• Step 3: Choose Manage themes.

• Step 4: Choose the theme you need to edit and then click Actions > Edit code.

• Step 5: Tap to open the product-template.liquid file in the Sections directory.

• Step 6: Paste the following code above the Add to cart button to add a Size chart button:

{% if product.options contains 'Size' %}
<a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
{% endif %}

• Step 7: Add the following code to the bottom of the product-template.liquid file:

<div id="size-chart" class="mfp-hide">
{{ pages.size-chart.content }}
</div>
<style>
#size-chart {
  border: 2px #555 solid;
  background-color: #ffffff;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

• Step 8: Click Save.

• Step 9: Click theme.js in the Assets directory and add the following code to the bottom of the line:

$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midTap: true
});

• Step 10: Choose Save.

Please note that if the size chart is not appearing, then you may need to add extra code to your theme. Because Magnific Popup is required for this customization to work so there are some themes (like Debut) that may require you to finish all these following steps:

• Step 1: Click to open the theme.scss.liquid file or the timber.scss.liquid file In the Assets directory and add this CSS to the bottom.

• Step 2: Please do one of these:
• • If your theme has a vendor.js file in the Assets directory, open the file and add this code to the bottom.
• • If your theme doesn’t have a vendor.js file in the Assets directory, place this code just above the $('.size-chart-open-popup').magnificPopup code in your theme.js file.
• Step 3: Choose Save.

Learn more: Insert the size chart using AVADA Size Chart

Conclusion

Hope that we have succeeded in helping you find out the way to add the size chart to your theme!