WhatsApp
A well-structured size chart is essential for any eCommerce store selling apparel, shoes, or accessories. It helps customers find the right fit, reducing return rates and improving the overall shopping experience. In this blog, we will show you how to build a dynamic size chart in Shopify that updates based on the selected product.
Why Use a Dynamic Size Chart?
A dynamic size chart is beneficial because:
-
It adapts to different product types (shirts, pants, shoes, etc).
-
It provides a better user experience by displaying only relevant size information.
-
It reduces confusion and potential returns due to sizing issues.
Steps to Create a Dynamic Size Chart
Step 1: Add a Metafield for Size Chart
Since Shopify does not have a built-in size chart feature, we will use metafields to store size chart data.
1. Go to Shopify Admin > Settings > Custom Data > Products.
2. Click Add definition and enter the following details:
-
-
Name: Size Chart.
-
Namespace & Key: custom.size_chart.
- Type: Multi-line text.
-
3. Click Add definition and create a new metafield with:
-
-
Name: Size Chart
-
Namespace & Key: custom.size_chart
-
Type: Multi-line text
-
Now, you can enter a different size chart for each product in the Metafields section of the product page.
Step 2: Display the Size Chart on the Product Page
Next, we will modify the product.liquid file (or your theme's product template) to display the dynamic size chart.
Add the Following Code:
{% if product.metafields.custom.size_chart %}
<button id="size-chart-btn"> View Size Chart </button>
<div id="size-chart-modal" class="hidden">
<div class="size-chart-content">
<span id="close-chart"> × </span>
{{ product.metafields.custom.size_chart }}
</div>
</div>
{% endif %}
Step 3: Add JavaScript for Modal Functionality
To improve user experience, we will create a modal popup for the size chart.
Add the Following JavaScript:
document.getElementById( 'size-chart-btn' ).addEventListener( 'click' , function( ) {
document.getElementById( 'size-chart-modal' ).classList.remove( 'hidden' );
});
document.getElementById( 'close-chart' ).addEventListener( 'click' , function( ) {
document.getElementById( 'size-chart-modal' ).classList.add( 'hidden' );
});
Step 4: Style the Size Chart Modal
Add the following CSS to style the modal popup:
.hidden
{
display: none;
}
#size-chart-modal
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.size-chart-content
{
background: white;
padding: 20px;
border-radius: 5px;
max-width: 500px;
text-align: center;
}
#close-chart
{
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
}
Step 5: Test Your Size Chart
-
Assign a size chart to a product using metafields.
-
Check the product page to ensure the size chart button appears.
-
Click the button to see if the modal opens correctly.
- Test the close button functionality
Enhancing the Size Chart
You can enhance the size chart further by:
-
Adding tables for better readability.
-
Using images or diagrams to visually explain measurements.
-
Integrating interactive tools to compare different size charts.
Conclusion
By following these steps, you have successfully implemented a dynamic size chart in your Shopify store. This method allows you to display a relevant size chart for each product, improving customer satisfaction and reducing returns. You can further enhance the chart by integrating tables, images, or even interactive tools for better visualization.
