How to add a size chart to Shopify - Free Tutorial

In this customization, we’re going to add a size chart to your shopify store. We have a few different ways to approach this, but they’re all pretty straightforward so if you’re new to customizing your shopify store this is a great one to learn with.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

Same size chart for all products (static method)

In line size chart Custom Liquid Block code

You can replace “size-chart” with the handle of your page

{% assign my_page = pages['size-chart'] %}
<div class="custom-page-content">
  {{ my_page.content }}
</div>

<style>
.custom-page-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.custom-page-content img {
  max-width: 100%;
  height: auto;
}
</style>

Size chart in Collapsible Row

Add Collapsible Row block
Select size chart page

Pop-up

Add Pop-Up block
Select size chart page

Size chart changes per product (dynamic method)

Edit main-product.liquid with your choice of size chart type

In line size chart with a custom Page Block

Add Page Block option

{%- when 'page_block' -%}
  {% if block.settings.page != blank %}
    {% assign selected_page = pages[block.settings.page] %}
    <div class="custom-page-block">
      {% if block.settings.hide_page_title != true %}
        <h2>{{ selected_page.title }}</h2>
      {% endif %}
      <div>{{ selected_page.content }}</div>
    </div>
    <style>
      .custom-page-block {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .custom-page-block img {
        max-width: 100%;
        height: auto;
      }
    </style>
  {% endif %}

Add schema code

{
  "type": "page_block",
  "name": "Page Block",
  "settings": [
    {
      "id": "page",
      "type": "page",
      "label": "t:sections.main-product.blocks.popup.settings.page.label"
    },
    {
      "type": "checkbox",
      "id": "hide_page_title",
      "label": "Hide Page title",
      "default": false
    }
  ]
},

Size chart in Collapsible Row

Add code for the collapsible row under {%- when 'collapsible_tab' -%}

{%- assign collapsible_content_exists = false -%}
{%- if block.settings.content != blank or block.settings.page.content != blank -%}
  {%- assign collapsible_content_exists = true -%}
{%- endif -%}
{%- if collapsible_content_exists or block.settings.hide_empty_collapsible_tab == false -%}

.... existing code ...

{%- endif -%}

Add settings in the schema for the collapsible tab

{
  "type": "checkbox",
  "id": "hide_empty_collapsible_tab",
  "label": "Hide empty collapsible tab",
  "default": false
}

Pop-up

Add code for the popup block under {%- when 'popup' -%}

{%- assign popup_content_exists = false -%}
{%- if block.settings.page.content != blank -%}
  {%- assign popup_content_exists = true -%}
{%- endif -%}
{%- if popup_content_exists or block.settings.hide_empty_popup == false -%}

.... existing code ...

{%- endif -%}

Add if statement under {%- for block in popups -%}

{% if block.settings.hide_popup_title != true %}

... page title code...

{% endif %}

Add settings in the schema for the popup

{
  "type": "checkbox",
  "id": "hide_empty_popup",
  "label": "Hide empty Pop-up",
  "default": false
},
{
  "type": "checkbox",
  "id": "hide_popup_title",
  "label": "Hide Pop-up page title",
  "default": false
}