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:

 

 

 

✅ 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’ %}