How to insert the size chart to your theme in Shopify

Drive 20-40% of your revenue with Avada

Get Started

Many Shopify store owners face challenges in providing accurate sizing information to their customers, which can lead to confusion and increased returns. Adding a size chart to your theme can address this issue, but the process may seem overwhelming for those who are not familiar with theme customization. This guide will focus on how to insert the size chart into your theme in Shopify, a crucial feature for clothing and accessories stores.

Whether you’re using a desktop or mobile device, this tutorial will help you add this valuable feature to your store, potentially boosting sales and customer satisfaction by helping shoppers make more informed purchasing decisions.

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

Inserting a size chart into your Shopify theme is a powerful way to enhance your customers’ shopping experience and reduce size-related inquiries. By following the step-by-step guide provided for both desktop and mobile platforms, you can easily integrate this valuable feature into your store. Take action now to implement a size chart in your Shopify theme.

Remember, clear sizing information can significantly reduce returns and improve customer satisfaction, potentially leading to increased sales and repeat business. As you continue to optimize your online store, incorporating user-friendly features like size charts will prove invaluable in creating a more efficient and customer-centric e-commerce platform.