Shopify Tutorials

Add a size chart to product pages

If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page.

All products that require reference to the size chart must have a Size option

Editing your theme code to add this feature

Required files: section [product-sizechart-template.liquid]; template [product.sizechart.liquid]
  • In the Section directory, upload the following file:
  • product-sizechart-template.liquid
  • In the Template directory, create product.sizechart.liquid and add the following code :
{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-sizechart-template' %}
{% section 'product-recommendations' %}

{% if collection %}
  <div class="text-center return-link-wrapper page-width">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "url": {{ shop.url | append: product.url | json }},
  {%- if product.featured_image -%}
    {%- assign image_size = product.featured_image.width | append: 'x' -%}
    "image": [
      {{ product.featured_image.src | img_url: image_size | prepend: "https:" | json }}
    ],
  {%- endif -%}
  "description": {{ product.description | strip_html | json }},
  {%- if current_variant.sku != blank -%}
    "sku": {{ current_variant.sku | json }},
  {%- endif -%}
  "brand": {
    "@type": "Thing",
    "name": {{ product.vendor | json }}
  },
  "offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": {{ variant.sku | json }},
        {%- endif -%}
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : {{ variant.price | divided_by: 100.00 | json }},
        "priceCurrency" : {{ cart.currency.iso_code | json }},
        "url" : {{ shop.url | append: variant.url | json }}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}
</script>
  • Congrats, You’ve completed the coding parts.

Theme admin

  • Create navigation where size chart should be displayed to [set collection pages]

  • Now go to random product details from the collection which you’ve set to the nav. Set the template product.sizechart

  • See the product from your store and customize this from theme section settings. You’ll see an option to add content > add your sizechart > give it a name > select the nav which you’ve created > add the size in the content

Congrats, You’ve completed this feature.

Shopify Developer

Recent Posts

How to Link eBay to Shopify Store

Imagine! Seamlessly connecting the vast customer base of eBay with the robust features of your…

4 weeks ago

Unlock the Power of Shopify Flow: Automation Strategies for eCommerce

Let’s face it. Running an online store requires unwavering discipline. Juggling multiple tasks simultaneously is…

1 month ago

Everything You Need to Know About Shopify Liquid

There’s no denying that Shopify has taken over the world. The ecommerce platform contributes to…

2 months ago

Maximizing Revenue: 7 Best Shopify Themes for Conversion Rates that Soar

It’s true. Every marketing strategy has one common objective: to drive maximum conversion rates. If…

2 months ago

Terrific Dropshipping Business Ideas for 2024

*Sigh*. Are you tired of trying out different methods of making money online? Hear it…

2 months ago

Shopify SEO Checklist for Continued Success in 2023

When driving traffic to your Shopify store, Search Engine Optimization (SEO) is the most affordable…

2 months ago