Add a size chart to product pages

Caution

Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free vintage themes don't receive updates except security fixes.

Note

If you use a free theme from Shopify, then you can contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. Learn more about the Shopify Design Policy.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

If you sell clothing items that require customers to know their size before they make a purchase, then 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:

Caution

This tutorial doesn't work for the Express theme without additional code.

You might find you might need to adjust the CSS for the chart depending on the theme.

Additionally, size chart tables aren't responsive to all devices. They can be cut off the side of the page on mobile devices if too many columns of information are added.

Creating a size chart page

Desktop

1. From your Shopify admin, go to Online Store > Pages.
2. Click Add page.
3. Enter a page title.
   • If you want to create a size chart that appears site-wide, then enter Size Chart for the page title. In the Search engine listing preview* section, the URL of the page should end in /size-chart.
   • If you want to create a chart that only appears on products from a specific vendor, then enter the name of the vendor followed by Size Chart.
     For example, if your vendor is called Great Owls, then enter Great Owls Size Chart for the page title. In the Search engine listing preview section, the URL of the page should end in /great-owls-size-chart.
   • If you want to create a chart that only appears on a specific type of product, then enter the product type followed by Size Chart.
     For example, if you want to display a size chart specific to shoes, then enter Shoes Size Chart for the page title. In the Search engine listing preview section, the URL of the page should end in /shoes-size-chart.
4. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:

   

5. In the Visibility section, make sure the page is set to Visible.
6. Click Save.

iPhone

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Pages.
4. Click Add page.
5. Enter a page title.
   • If you want to create a size chart that appears site-wide, then enter Size Chart for the page title. In the Search engine listing preview* section, the URL of the page should end in /size-chart.
   • If you want to create a chart that only appears on products from a specific vendor, then enter the name of the vendor followed by Size Chart.
     For example, if your vendor is called Great Owls, then enter Great Owls Size Chart for the page title. In the Search engine listing preview section, the URL of the page should end in /great-owls-size-chart.
   • If you want to create a chart that only appears on a specific type of product, then enter the product type followed by Size Chart.
     For example, if you want to display a size chart specific to shoes, then enter Shoes Size Chart for the page title. In the Search engine listing preview section, the URL of the page should end in /shoes-size-chart.
6. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:

   

7. In the Visibility section, make sure the page is set to Visible.
8. Click Save.

Android

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Pages.
4. Click Add page.
5. Enter a page title.
   • If you want to create a size chart that appears site-wide, then enter Size Chart for the page title. In the Search engine listing preview* section, the URL of the page should end in /size-chart.
   • If you want to create a chart that only appears on products from a specific vendor, then enter the name of the vendor followed by Size Chart.
     For example, if your vendor is called Great Owls, then enter Great Owls Size Chart for the page title. In the Search engine listing preview section, the URL of the page should end in /great-owls-size-chart.
   • If you want to create a chart that only appears on a specific type of product, then enter the product type followed by Size Chart.
     For example, if you want to display a size chart specific to shoes, then enter Shoes Size Chart for the page title. In the Search engine listing preview section, the URL of the page should end in /shoes-size-chart.
6. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:

   

7. In the Visibility section, make sure the page is set to Visible.
8. Click Save.

Navigate to the Code Editor

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.

Choose one of the following and create a size chart snippet

Site-wide

Note

Choosing Site-wide displays the Size Chart on all product pages that have a Size option.

Creating a size chart snippet

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet size-chart, and click Create snippet:

   

3. Copy the following into your size-chart snippet:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

{% block "note" %} There are some changes that need to be made to the CSS styling for the themes Simple and Minimal. {% endblock %}

If you are using the theme Simple, then use this code:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 8px;
    width: 50%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
    .trigger-pop-up {
      width: 100%;
    }
  }
  </style>

If you are using the theme Minimal, then use the following code:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
  @media only screen and (min-width: 750px) {
    .trigger-pop-up {
      width: 50%;
    }
  }
</style>

Add the size chart snippet into your theme.liquid

1. In the Layout directory, click to open your theme.liquid file.
2. Find the closing </body> tag. Right above the closing </body> tag, paste the following code:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

Add a Size chart button

1. In the Sections directory, click to open your product-template.liquid file or product.liquid file if you don't have a product-template.liquid file.
2. Paste the following code above the Add to cart button:

{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

The Add to cart button typically starts with something like <button type="submit" name="add". If your store's operating language isn't English, then replace See Size Chart with the text that you prefer to use.

Note

In the theme Narrative, you need to insert the above code within the product-form.liquid file that is located in the Snippets directory.

Type

Note

Choosing Product type displays the Size Chart on all product pages that has a Size option and the specified product type.

Creating a size chart snippet

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet size-chart, and click Create snippet:

   

3. Copy the following into your size-chart snippet:

{% assign chart = product.type | handleize | append: "-size-chart" %} {% unless
pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Note

There are some changes that need to be made to the CSS styling for the themes Simple and Minimal.

If you are using the theme Simple, replace from .trigger-pop-up to right above </style> with this code:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

If you are using the theme Minimal, add the following code above the closing </style> tag:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Add the size chart snippet into your theme.liquid

1. In the Layout directory, click to open your theme.liquid file.
2. Find the closing </body> tag. Right above the closing </body> tag, paste the following code:

  {% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Add a Size chart button

1. In the Sections directory, click to open your product-template.liquid file or product.liquid file if you don't have a product-template.liquid file.
2. Paste the following code above the Add to cart button:

    {% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

The Add to cart button typically starts with something like <button type="submit" name="add". If your store's operating language isn't English, then replace See Size Chart with the text that you prefer to use.

Note

In the theme Narrative, you need to insert the above code within the product-form.liquid file that is located in the Snippets directory.

Vendor

Note

Choosing Product Vendor displays the Size Chart on all product pages that has a Size option and the specified product vendor.

Creating a size chart snippet

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet size-chart, and click Create snippet:

   

3. Copy the following into your size-chart snippet:

{% assign chart = product.vendor | handleize | append: "-size-chart" %} {%
unless pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Note

There are some changes that need to be made to the CSS styling for the themes Simple and Minimal.

If you are using the theme Simple, replace from .trigger-pop-up to right above </style> with this code:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

If you are using the theme Minimal, add the following code above the closing </style> tag:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Add the size chart snippet into your theme.liquid

1. In the Layout directory, click to open your theme.liquid file.
2. Find the closing </body> tag. Right above the closing </body> tag, paste the following code:

  {% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.vendor  | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Add a Size chart button

1. In the Sections directory, click to open your product-template.liquid file or product.liquid file if you don't have a product-template.liquid file.
2. Paste the following code above the Add to cart button:

    {% if product.options contains 'Size' %}
      {% assign chart = product.vendor  | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

The Add to cart button typically starts with something like <button type="submit" name="add". If your store's operating language isn't English, then replace See Size Chart with the text that you prefer to use.

Note

In the theme Narrative, you need to insert the above code within the product-form.liquid file that is located in the Snippets directory.