How To Add a Size Chart To Shopify

For even better conversions, consider adding estimated delivery dates to product pages alongside your size chart.

Methods for Adding a Size Chart in Shopify

There are different methods for adding Size Charts in Shopify; some of these are listed here.

1. Add a Size Chart Using Shopify's Built-In Features
2. Add a Custom Size Chart with Code
3. Use a Shopify App for Size Charts

Method 1: Add a Size Chart Using Shopify's Built-In Features

Shopify doesn't have a pre-built Size Chart button, but you can create a Size Chart page in the Shopify admin and link it in the product description. Follow these steps to create a Size Chart page.

Step 1: Navigate to Shopify Admin > Online store > Pages.

Step 2: Select the existing page to add content related to the size chart, or create a new one by clicking Add page.

Step 3: Add the title of the page and make the status of the page visible.

Step 4: Add the content related to the Size chart in the content area of the page.

Step 5: Save the changes.

Step 6: Navigate to Shopify Admin > Products.

Step 7: Choose the product that you want to update, and in the description section, link the size chart page and click Save.

While you’re updating product descriptions, you can also add brand trust signals like discount codes or custom discount inputs on cart pages.

Method 2: Add a Custom Size Chart with Code

If you want a more professional look and are comfortable with coding, then you can add the Size chart button and modal directly to your product page directly to your theme. Here is the final result. Check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Online store > Themes > Edit code

Step 2: Go to the main product liquid file depending on the theme you are using.

Step 3: Insert the HTML link or Button for the Size Char, for example, use this.

  
    <a href="#" id="size-chart-link" class="size-chart-trigger">Size Chart</a>
    <div id="size-chart-modal" class="size-chart-modal">
      <div class="size-chart-content">
        <span class="size-chart-close">×</span>
        <h2>Size Chart</h2>
        <img src="{{ 'size-chart.jpg' | asset_url }}" alt="Size Chart">
      </div>
    </div>
  

Step 4: Upload the size chart image with the same name (size-chart.jpg) in the asset directory.

Step 5: Save the changes.

Step 6: Add CSS for styling in your base.css file depending on the theme. fForexample use this

  
    .size-chart-trigger {
      margin-top: 10px;
      font-size: 14px;
      color: #0073e6;
      cursor: pointer;
      text-decoration: underline;
      transition: color 0.3s;
      text-decoration: none;
      text-align: right;
      display: block;
    }
    .size-chart-trigger:hover {
      color: #005bb5;
    }


    .size-chart-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.6);
      justify-content: center;
      align-items: center;
      animation: fadeIn 0.3s ease;
    }


    .size-chart-content {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      max-width: 600px;
      width: 90%;
      text-align: center;
      position: relative;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      animation: slideUp 0.3s ease;
    }
    .size-chart-content img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .size-chart-content h2 {
      margin-bottom: 15px;
      font-size: 20px;
      font-weight: 600;
    }


    .size-chart-close {
      position: absolute;
      top: 12px;
      right: 16px;
      font-size: 26px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
      transition: color 0.3s;
    }
    .size-chart-close:hover {
      color: #000;
    }


    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    @keyframes slideUp {
      from {transform: translateY(30px); opacity: 0;}
      to {transform: translateY(0); opacity: 1;}
    }

  

Step 7: Add JS to show a pop-up on button click in your theme.js file or create a new one and link it into the main theme.liquid file.

  
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const modal = document.getElementById("size-chart-modal");
        const openBtn = document.getElementById("size-chart-link");
        const closeBtn = document.querySelector(".size-chart-close");

        openBtn.addEventListener("click", function (e) {
          e.preventDefault();
          modal.style.display = "flex";
        });

        closeBtn.addEventListener("click", function () {
          modal.style.display = "none";
        });

        window.addEventListener("click", function (e) {
          if (e.target === modal) {
            modal.style.display = "none";
          }
        });
      });
    </script>
  

Step 8: Save the changes.

Method 3: Use a Shopify App for Size Charts

If you want advanced features like different charts for different products, Shopify apps can help you in this case. Popular apps used for that purpose are as follows.

• Kiwi Size Chart & Recommender
• Snake Size Chart & Size Guide
• BF Size Chart & Size Guide

Here is the final result. Check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Shopify Admin > Apps

Step 2: Click on the Apps and Sale channel settings

Step 3: Visit the Shopify App store

Step 4: Search for the app related to Size Chart, for example, Kiwi SizeChart t& Recommender

Step 5: Install the app

Step 6: Reconfirm the installation process in the Shopify admin

Step 7: Enable the theme extension.

Step 8: Click Save.

Step 9: Add your size guide by clicking Add sizing button. 

Step 10: Create your size chart table, or add an image, or add A new block.

Step 11: After adding the details, click Save.

Bottom Line

Adding a size chart in Shopify improves customer confidence, reduces returns, and boosts sales. Whether you use a simple size chart page, a custom pop-up, or an advanced Shopify app, the key is to make sizing information easy to find and clear to read.

Get a fully branded, conversion-optimized storefront with size charts, custom product pages, and built-in SEO. Work with our Shopify Custom Theme Development experts to give your store the professional edge it deserves.