Custom Size Chart in Shopify

✅ GOAL:

You want to:

• ✅ Design a Size Chart using Shopify’s Page Editor
• ✅ Show a “Size Chart” link on the product page
• ✅ On click, show the page content in a popup (fully working)

🧩 STEP-BY-STEP WORKING METHOD (Rechecked July 2025)

✅ 1. Create the Page in Shopify

1. Go to: Online Store → Pages → Add page
   • Title: Size Chart
   • Content: Add your text/table/image here
2. Save
3. Note the handle: it will be size-chart (if that’s the title)

✅ 2. Create a Custom Snippet (Reusable)

Go to Online Store → Edit Code → Snippets → Add a new snippet
Name: size-chart-popup

Paste this liquid working version:

<!– Size Chart Link –>

<div id=”size-chart-button-container” style=”margin: 10px 0;”>

  <a href=”#” id=”open-size-chart” style=”text-decoration: underline; cursor: pointer;”>Size Chart</a>

</div>

 

<!– Popup Modal –>

<div id=”size-chart-modal” style=”display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6);”>

  <div style=”background: #fff; max-width: 700px; margin: 5% auto; padding: 30px; position: relative; overflow-y: auto; max-height: 80vh;”>

    <span id=”close-size-chart” style=”position: absolute; top: 10px; right: 15px; font-size: 22px; cursor: pointer;”>&times;</span>

    <div id=”size-chart-content”>

      {% assign size_chart_page = pages[‘size-chart’] %}

      {{ size_chart_page.content }}

    </div>

  </div>

</div>

 

<script>

  document.addEventListener(‘DOMContentLoaded’, function () {

    const openBtn = document.getElementById(‘open-size-chart’);

    const closeBtn = document.getElementById(‘close-size-chart’);

    const modal = document.getElementById(‘size-chart-modal’);

 

    openBtn.addEventListener(‘click’, function (e) {

      e.preventDefault();

      modal.style.display = ‘block’;

    });

 

    closeBtn.addEventListener(‘click’, function () {

      modal.style.display = ‘none’;

    });

 

    window.addEventListener(‘click’, function (e) {

      if (e.target == modal) {

        modal.style.display = ‘none’;

      }

    });

  });

</script>

 

✅ This version works without using fetch or AJAX, so it avoids all Shopify CSP restrictions.

✅ 3. Render the Snippet on Product Page

Open: sections/main-product.liquid

Paste this where you want the Size Chart link to appear (usually near variant selector or before buy buttons):

{% render ‘size-chart-popup’ %}