How to Add Size Charts to Shopify Product Pages

SHOPIFY SIZE CHARTS

Welcome to the WebSense Pro blog, where we’re committed to helping you maximize your Shopify experience. In this step-by-step guide, we’ll show you how to seamlessly integrate size charts into your Shopify product pages using the power of collapsible rows and Metafields. Size charts are a crucial aspect of any e-commerce store, and with our tutorial, you’ll be able to enhance user experience and provide valuable information to your customers.

1. Installing and Customizing the Dawn Theme
2. Adding Collapsible Rows and Images
3. Creating Metafields for Size Charts
4. Embedding Metafields in the Collapsible Rows
5. Uploading Size Chart Images
6. Previewing Your Enhanced Product Pages

Prerequisites:

Before you begin, ensure you have a basic understanding of Shopify’s backend and are comfortable with making theme customizations. You’ll also need access to your Shopify admin panel and the ability to install themes and modify code.

Installing and Customizing the Dawn Theme:

1. Log in to your Shopify admin panel.
2. Go to Online Store > Themes.
3. Click “Add theme” and choose the Dawn theme.
4. Customize the theme and access the product template.

Adding Image in Collapsible Row Block:

1. Inside the product template, add a collapsible row using the “Add block” option.
2. Edit the collapsible row’s heading and icon to indicate the size chart.
3. Change liquid code to enable image embedding in the collapsible row

Change the following code in main-product.liquid file:

{
          "type": "richtext",
          "id": "content",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        }

To the following code:

{
          "type": "liquid",
          "id": "content",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        }

Creating Metafields for Size Charts:

1. In the Shopify admin panel, navigate to Settings > Custom data.
2. Click “Add definition” under Products.
3. Create a new Metafield named “size chart” with the type “File”.
4. Save the Metafield definition.

Embedding Metafields in the Collapsible Rows:

1. Copy the provided code that references the Metafield.
2. Return to the product template customization and paste the following code in the Collapsible row block:

{% assign image_url = product.metafields.custom.size_chart  %}
{% if image_url != blank %} 
 <img src="{{ image_url.value | image_url }}">
{% endif %}

Uploading Size Chart Images:

1. Access a product in your Shopify admin.
2. Locate the “size chart” Metafield you created.
3. Upload the appropriate size chart image for the product.

Previewing Your Enhanced Product Pages:

1. After saving the changes, preview the product page.
2. Verify that the size chart displays in the collapsible row and corresponds to the product.