To add a size chart popup on Shopify without an app, create a “Size Chart” block in your theme: add a new case and schema entry to main-product.liquid, plus a snippet containing a button and a modal dialog. You can then add the size chart block to any product page from the theme editor and fill it with a page or image.

If you sell clothing, shoes, jewelry, or anything else that has to fit, here’s a number that should get your attention: wrong sizing is one of the biggest reasons for returns in fashion eCommerce. Every “it didn’t fit” return costs you shipping, handling, restocking time — and often the customer, who quietly decides your store is a gamble.

The fix is embarrassingly simple: a clear, easy-to-find size chart right on the product page, ideally opening in a clean popup so the shopper never leaves the page or loses their place.

But when you go to add one in Shopify, you hit the familiar wall. There’s no “size chart” feature in the product editor. Your theme has no size chart block. And the App Store is happy to sell you one for $5–$10 a month — recurring, forever, for what is essentially a button and a popup.

In this tutorial, I’ll give you the free code to build it properly: a real, native Size Chart block that appears in your theme editor just like Shopify’s built-in blocks. You’ll be able to:

• Add it to the product page with drag-and-drop, right where you want it (typically next to the size selector)
• Open the chart in a clean modal popup — no page reload, no lost scroll position
• Fill it with either a Shopify page (a proper HTML table you can edit anytime) or an image
• Optionally show different charts for different products, and only display the button on products that actually have sizes

This is exactly how professional themes implement size charts, and it works on Dawn and every theme built on it. Total time: about 25 minutes. Let’s build it.

Table of Contents

• Why a Size Chart Popup Beats Every Alternative
• Page vs. Image vs. App: Choosing Your Size Chart Format
• Before You Start
• Step 1: Create Your Size Chart Content
• Step 2: Create the Size Chart Popup Snippet
• Step 3: Register the Block in main-product.liquid
• Step 4: Add the CSS
• Step 5: Add the Size Chart Block in the Theme Editor
• Bonus 1: Show the Button Only on Products with Sizes
• Bonus 2: Different Size Charts for Different Products (Metafields)
• Best Practices for Size Charts That Reduce Returns
• Common Mistakes to Avoid
• Troubleshooting
• FAQ
• Conclusion

Why a Size Chart Popup Beats Every Alternative

There are four common ways stores present sizing info, and they’re not equal:

The popup wins because of where and when it appears: right beside the size options, at the exact moment the shopper is deciding between M and L. That’s the moment of doubt, and answering it on the spot is what actually prevents both abandoned carts and wrong-size orders.

Page vs. Image vs. App: Choosing Your Size Chart Format

The block we’re building supports two content sources — pick based on how you manage sizing info:

Shopify page (recommended). Create a page with a proper HTML table. It’s crisp on every screen, searchable, accessible, easy to update without design tools, and you can reuse one page across hundreds of products. Update the page once, and every popup updates.

Image. If your brand team designed a beautiful size chart graphic, use it. Just remember images of tables can get hard to read on small phones, so upload high resolution and test on mobile.

App? For a button and a popup, apps are pure overhead: monthly cost, external scripts on every product page, and a broken chart the day you uninstall. The one scenario where an app earns its fee is automatic unit conversion or body-measurement recommendation engines — genuinely complex features. For everything else, the code below does the job for free.

Before You Start

You’ll need:

• A store on an Online Store 2.0 theme — I’ll use Dawn’s file names, which apply to Sense, Craft, Refresh, Studio, and most themes built on Dawn’s architecture
• Your size data (measurements per size)
• About 25 minutes

And the rule that never changes: duplicate your theme first. Go to Online Store → Themes → ⋯ → Duplicate, and make every edit below on the copy. Publish only when it works.

Step 1: Create Your Size Chart Content

Option A — a page (recommended):

1. Go to Online Store → Pages → Add page
2. Title it “Size Chart” (or “Men’s Apparel Size Chart” if you’ll have several)
3. In the content editor, insert a table (use the table button in the rich text toolbar) and fill in your measurements:

4. Add a line about how to measure (“measure around the fullest part of your chest…”) — it dramatically improves accuracy
5. Important: set the page’s visibility so it works for the popup but doesn’t clutter navigation — simply don’t add it to any menu. Click Save

Option B — an image: have your chart graphic ready as a JPG or PNG, at least 1000 px wide, and reasonably compressed.

Step 2: Create the Size Chart Popup Snippet

1. Go to Online Store → Themes → ⋯ → Edit code on your duplicate theme
2. In the Snippets folder, click Add a new snippet, name it size-chart-popup, and paste:

liquid

{%- comment -%} Size Chart Popup — renders a trigger button + modal dialog {%- endcomment -%}

<div class="size-chart">
  <button
    type="button"
    class="size-chart__trigger"
    aria-haspopup="dialog"
    onclick="document.getElementById('SizeChartModal-{{ section.id }}').showModal()"
  >
    {{ block.settings.label | default: 'Size Chart' }}
  </button>

  <dialog id="SizeChartModal-{{ section.id }}" class="size-chart__modal">
    <div class="size-chart__inner">
      <button
        type="button"
        class="size-chart__close"
        aria-label="Close size chart"
        onclick="this.closest('dialog').close()"
      >&times;</button>

      <div class="size-chart__content rte">
        {%- if block.settings.chart_page != blank -%}
          <h2 class="size-chart__title">{{ block.settings.chart_page.title | escape }}</h2>
          {{ block.settings.chart_page.content }}
        {%- elsif block.settings.chart_image != blank -%}
          <img
            src="{{ block.settings.chart_image | image_url: width: 1200 }}"
            alt="{{ block.settings.chart_image.alt | default: 'Size chart' }}"
            width="1200"
            height="{{ 1200 | divided_by: block.settings.chart_image.aspect_ratio | round }}"
            loading="lazy"
          >
        {%- else -%}
          <p>Select a size chart page or image in the theme editor.</p>
        {%- endif -%}
      </div>
    </div>
  </dialog>
</div>

<script>
  (function () {
    var modal = document.getElementById('SizeChartModal-{{ section.id }}');
    if (!modal) return;
    /* Close when clicking the backdrop (outside the inner box) */
    modal.addEventListener('click', function (e) {
      if (e.target === modal) modal.close();
    });
  })();
</script>

3. Click Save

A few things worth appreciating about this snippet:

• It uses the native HTML <dialog> element — the browser handles the dark backdrop, focus trapping, and the Escape key for free. No JavaScript library, no jQuery, almost no code.
• The rte class makes your page’s table inherit your theme’s typography, so it looks native automatically.
• Clicking the dark backdrop closes the popup — the one behavior <dialog> doesn’t do by itself, added with six lines of script.

Step 3: Register the Block in main-product.liquid

Now we make “Size Chart” appear as a real block in the theme editor.

1. Open Sections → main-product.liquid
2. Find the block loop — search (Ctrl/Cmd + F) for:

{%- when 'description' -%}

3. Directly above that line, add a new case:

liquid

{%- when 'size_chart' -%}
  {% render 'size-chart-popup', block: block, section: section %}

4. Now scroll to the bottom of the file, into the {% schema %} JSON, and find the "blocks": [ array. Add this entry inside it (watch your commas — every entry except the last needs a trailing comma):

json

{
  "type": "size_chart",
  "name": "Size Chart Popup",
  "limit": 1,
  "settings": [
    {
      "type": "text",
      "id": "label",
      "label": "Button text",
      "default": "📏 Size Chart"
    },
    {
      "type": "page",
      "id": "chart_page",
      "label": "Size chart page",
      "info": "Recommended — a page with your size table"
    },
    {
      "type": "image_picker",
      "id": "chart_image",
      "label": "Or size chart image",
      "info": "Used only if no page is selected"
    }
  ]
}

5. Click Save

If the file refuses to save with a schema error, it’s a JSON comma problem — check the entry before and after yours.

Step 4: Add the CSS

Open Assets → base.css, scroll to the very bottom, and paste:

css

/* ===== Size Chart Popup ===== */
.size-chart {
  margin: 1.2rem 0;
}

.size-chart__trigger {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.4rem;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  cursor: pointer;
  color: rgb(var(--color-foreground));
}

.size-chart__trigger:hover {
  text-decoration-thickness: 2px;
}

.size-chart__modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(92vw, 64rem);
  max-height: 85vh;
}

.size-chart__modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.size-chart__inner {
  position: relative;
  padding: 3rem 2.4rem 2.4rem;
  overflow-y: auto;
  max-height: 85vh;
}

.size-chart__close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.55);
}

.size-chart__close:hover {
  color: rgba(0, 0, 0, 0.9);
}

.size-chart__title {
  margin: 0 0 1.6rem;
  font-size: 2rem;
}

.size-chart__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}

.size-chart__content th,
.size-chart__content td {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0.8rem 1rem;
  text-align: left;
}

.size-chart__content th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

.size-chart__content img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 749px) {
  .size-chart__inner {
    padding: 2.6rem 1.4rem 1.6rem;
  }
  .size-chart__content table {
    font-size: 1.2rem;
  }
}

Click Save. The code work is complete.

Step 5: Add the Size Chart Block in the Theme Editor

1. Go to Online Store → Themes → Customize on your duplicate
2. In the top dropdown, open Products → Default product
3. Inside Product information, click Add block — you’ll see your new Size Chart Popup block in the list
4. Add it, then drag it directly below the variant picker (the Size selector) — that’s the highest-impact position
5. In the block’s settings, choose your size chart page (or image) and adjust the button text
6. Click Save, then preview a product

Click the button: the popup opens with your table, a dark backdrop, a close button, backdrop-click closing, and Escape-key support. Native-feeling, fast, and yours.

Bonus 1: Show the Button Only on Products with Sizes

Selling both apparel and accessories? A size chart button on a coffee mug looks careless. Make the block smart by rendering it only when the product actually has a “Size” option.

In main-product.liquid, change your case to:

liquid

{%- when 'size_chart' -%}
  {%- if product.options contains 'Size' -%}
    {% render 'size-chart-popup', block: block, section: section %}
  {%- endif -%}

Now one block handles your whole catalog: products with a Size option show the button, everything else stays clean. (If your stores uses a different option name — “Shoe Size,” “Ring Size” — adjust the check or list multiple: {%- if product.options contains 'Size' or product.options contains 'Shoe Size' -%}.)

Bonus 2: Different Size Charts for Different Products (Metafields)

One chart rarely fits an entire catalog — men’s tops, women’s dresses, and shoes all measure differently. Metafields solve this elegantly:

1. Go to Settings → Custom data → Products → Add definition
2. Name: Size chart · Namespace and key: custom.size_chart · Type: Page (single page reference)
3. Save. Each product’s admin page now has a “Size chart” field where you can pick a specific page

Then update the snippet’s content logic so a product-specific chart overrides the block default:

liquid

{%- assign chart_page = product.metafields.custom.size_chart.value | default: block.settings.chart_page -%}

{%- if chart_page != blank -%}
  <h2 class="size-chart__title">{{ chart_page.title | escape }}</h2>
  {{ chart_page.content }}
{%- elsif block.settings.chart_image != blank -%}
  ...

The behavior: products with a metafield chart show their chart; everything else falls back to the default chart from the block settings. One system, unlimited charts, zero apps.

Best Practices for Size Charts That Reduce Returns

Put the button next to the size selector. Not in the description, not in a tab at the bottom — beside the decision it supports.

Include “how to measure” instructions. A table of numbers only helps if the customer measures correctly. Two sentences and you’ve prevented half the errors.

Offer both units. Inches and centimeters. International shoppers shouldn’t need a calculator to buy a T-shirt.

Use real garment measurements when possible. “Fits chest 38–40 in” is good; “garment chest width: 21 in, laid flat” is even better for the detail-oriented shopper.

Keep charts per category, not per product. One chart per product type (via the metafield method) is manageable; a unique chart per product is a maintenance nightmare.

Add fit notes on the product itself. “Runs small — size up” in the description works with the chart, and it’s the single most effective returns-reducer for quirky-fitting items.

Common Mistakes to Avoid

1. Editing the live theme. A missing comma in the schema JSON can block the whole section. Duplicate first, always.
2. Pasting the schema entry outside the blocks array. It must sit inside "blocks": [ ... ], as a sibling of the existing block entries.
3. A size chart image that’s unreadable on mobile. Test the popup on a real phone; if you’re pinch-zooming to read numbers, switch to a page-based table.
4. Hiding the page in your navigation but forgetting it’s still indexable. That’s usually fine (a size chart page ranking is harmless), but if you want it fully private, add it to your theme’s noindex handling.
5. Inconsistent measurement basis. Mixing body measurements and garment measurements in one table confuses everyone. Pick one and label it clearly.
6. Forgetting to re-apply the code after a theme update. Updates replace main-product.liquid and base.css. Keep your three edits (snippet, case + schema, CSS) saved somewhere — re-applying takes five minutes.

Troubleshooting

The “Size Chart Popup” block doesn’t appear in Add block. The schema entry didn’t save — almost always a JSON comma error. Re-open main-product.liquid, check the commas around your entry, and confirm the editor saved without a red error banner.

The button shows but nothing opens on click. Check that the snippet’s id and the button’s onclick target match (they do in the code above unless something was renamed while pasting). Also confirm the snippet file is named exactly size-chart-popup — the render tag must match the filename.

The popup opens but is empty. No page or image is selected in the block settings, or (metafield version) the product’s metafield points to a deleted page. Select content in the theme editor block settings.

The popup opens behind the page content. Some themes set aggressive z-index values on the header or sticky elements. Native <dialog> sits in the browser’s top layer and normally beats everything; if you replaced it with a div-based modal, add z-index: 999 to the modal class.

The table looks unstyled inside the popup. Make sure the content wrapper keeps the rte class, and that the table CSS from Step 4 saved at the bottom of base.css.

Escape closes it, but clicking outside doesn’t. The small backdrop-click script at the bottom of the snippet is missing or was pasted outside the snippet file. Re-check it exists and references the same modal ID.

It works in preview but not on the live store. You built it on the duplicate (correct!) but haven’t published it yet. Publish the duplicate when you’re happy.

FAQ

1. How do I add a size chart to Shopify without an app? Add a custom block to your product template: a snippet containing a button and a modal dialog, registered in main-product.liquid‘s schema. This guide includes the complete free code — about 25 minutes of copy-paste.

2. Does Shopify have a built-in size chart feature? No. There’s no native size chart in the product editor or in free themes, which is why stores either buy an app or add a small custom block like this one.

3. Should my size chart be a page or an image? A page with an HTML table is better in most cases: it’s readable on every screen size, editable in seconds, accessible, and one page can serve unlimited products. Use an image only if you have a designed graphic — and test it on mobile.

4. Can I show different size charts for different products? Yes. Add a page-reference metafield (custom.size_chart) and the snippet variation in this guide — each product can then have its own chart, with a store-wide default as fallback.

5. Can I show the size chart button only on clothing? Yes. Wrap the render in {% if product.options contains 'Size' %} so the button appears only on products that actually have a Size option.

6. Will this work on the Dawn theme? Other themes? It’s written for Dawn and works on all themes sharing Dawn’s architecture (Sense, Craft, Refresh, Studio). Other OS 2.0 themes use the same concepts with different file names — find their main product section and block schema.

7. Will the popup slow down my product pages? No. It’s a native HTML <dialog> with a few lines of inline script — no external libraries, no app scripts, effectively zero page-weight.

8. How do I make the popup open automatically? You generally shouldn’t — auto-opening popups annoy shoppers and hurt conversions. The chart should open on demand, next to the size selector, when the shopper wants it.

9. Where should the size chart button be placed? Directly below or beside the variant (size) picker. That’s where sizing doubt happens, and proximity is what makes the chart actually get used.

10. Can I put a size chart in the quick-view or cart drawer too? The same snippet can be rendered anywhere a block/section context exists, but start with the product page — that’s where sizing decisions are made. Quick-view integration varies heavily by theme.

11. Does a size chart really reduce returns? Yes — wrong size is a leading return reason in apparel, and a visible chart with measuring instructions addresses it at the point of decision. Pair it with honest fit notes (“runs small”) for the biggest effect.

12. The rich text editor’s table is hard to work with — alternatives? You can paste raw HTML: open the page editor’s code view (<> button) and paste a <table> built elsewhere. The popup’s CSS will style any standard HTML table.

13. Will my size chart block survive theme updates? The block’s settings survive, but updates replace the code files. Keep copies of your snippet, the schema entry, and the CSS — re-applying them after an update takes about five minutes.

14. Can I add multiple size chart blocks (e.g., size chart + care guide)? Yes — duplicate the pattern with a new block type (care_guide), a renamed snippet, and its own schema entry. The limit: 1 in the schema applies per block type, so different popups can coexist.

Conclusion

A size chart is one of those small features with outsized impact: it answers the shopper’s biggest question at the exact moment of decision, cuts wrong-size returns, and makes your store feel like it was built by people who care about fit.

And now you have it — built the right way. To recap: create your chart as a Shopify page (or image), add the size-chart-popup snippet, register the block in main-product.liquid‘s schema, drop in the CSS, and place the block right below your size selector in the theme editor. Add the two bonus upgrades — showing the button only on sized products, and per-product charts via metafields — and you’ve matched what premium themes and paid apps charge for, with a native <dialog> popup that weighs practically nothing.

No app. No subscription. Just a proper block in your theme, exactly where your shoppers need it.

If you want to keep adding professional touches like this to your store, the resources below are your next step.

Keep Learning and Get Help

Prefer to follow along on video? Watch the full step-by-step walkthrough of this exact build here: How To Add A Size Chart On Shopify — and subscribe for more free-code Shopify tutorials: youtube.com/@foysalshopifyexpert

Want it installed for you? If you’d rather have an expert add the size chart popup — or handle any Shopify customization, theme work, or SEO project — hire me directly on Upwork: My Upwork Profile

Ready-made Shopify sections and blocks. I sell polished, plug-and-play Shopify code products — popups, sliders, mega menus, and more — with one-time payment and no subscriptions: ecommercethesis.gumroad.com

Learn Shopify professionally. Turn customizations like this into freelancing income with my structured course: Freelancing with Shopify — or browse all courses.

Stuck on a step? Reach me directly on WhatsApp for personal help: wa.me/8801991505652

Happy building — and here’s to fewer “it didn’t fit” returns.

:Why Pop Up Blocks Are Important for Shopify Product Pages
: Types of Pop Up Blocks You Can Add on Shopify
: Step-by-Step Guide to Adding a Pop Up Block on Shopify

is a common question for many store owners who want to enhance user experience. Whether you’re aiming to display size guides, shipping details, or discount offers, adding a pop-up to your product pages can help reduce clutter and increase conversion. In this guide, we’ll walk you through the step-by-step process to add a clean and responsive pop-up block to your Shopify product information section.

Shopify supports promotional, informational, newsletter, and exit-intent pop-ups. Each type serves a unique purpose: promotional pop-ups show offers, informational pop-ups highlight details, and exit-intent pop-ups help retain visitors.

If you’d like, I can also help you write:

• The rest of the blog/tutorial content
• The meta description (shortened to <155 characters)
• Add outbound/internal link suggestions
• Suggest relevant images or screenshots for your Shopify tutorial
• Provide additional tips for increasing conversions with pop ups

Solution

I’ll add a new “custom_popup” block type that gives you more control over the popup content and styling.

{%- when 'custom_popup' -%}
  <div class="product-custom-popup{% if block.settings.styled_as_button %} product-custom-popup--button{% endif %}" {{ block.shopify_attributes }}>
    <modal-opener
      class="product-popup-modal__opener quick-add-hidden"
      data-modal="#CustomPopupModal-{{ block.id }}"
    >
      <button
        id="ProductCustomPopup-{{ block.id }}"
        class="{% if block.settings.styled_as_button %}button{% else %}link{% endif %} product-custom-popup__trigger"
        type="button"
        aria-haspopup="dialog"
      >
        {%- if block.settings.icon != 'none' -%}
          {% render 'icon-accordion', icon: block.settings.icon %}
        {%- endif -%}
        <span>{{ block.settings.trigger_text | escape }}</span>
      </button>
    </modal-opener>
  </div>

You’ll also need to add the modal dialog code at the bottom of your section where the other popups are rendered:

{% assign custom_popups = section.blocks | where: 'type', 'custom_popup' %}
{%- for block in custom_popups -%}
  <modal-dialog id="CustomPopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
    <div
      role="dialog"
      aria-label="{{ block.settings.trigger_text }}"
      aria-modal="true"
      class="product-popup-modal__content"
      tabindex="-1"
    >
      <button
        id="CustomModalClose-{{ block.id }}"
        type="button"
        class="product-popup-modal__toggle"
        aria-label="{{ 'accessibility.close' | t }}"
      >
        {{- 'icon-close.svg' | inline_asset_content -}}
      </button>
      <div class="product-popup-modal__content-info">
        {%- if block.settings.popup_heading != blank -%}
          <h2 class="h3">{{ block.settings.popup_heading | escape }}</h2>
        {%- endif -%}
        <div class="rte">
          {{ block.settings.popup_content }}
        </div>
      </div>
    </div>
  </modal-dialog>
{%- endfor -%}

Add to Schema

Add this new block definition to your schema:

{
  "type": "custom_popup",
  "name": "Custom Popup",
  "settings": [
    {
      "type": "text",
      "id": "trigger_text",
      "label": "Trigger Text",
      "default": "Popup Trigger"
    },
    {
      "type": "select",
      "id": "icon",
      "options": [
        {
          "value": "none",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
        },
        {
          "value": "apple",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
        },
        {
          "value": "box",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
        },
        {
          "value": "chat_bubble",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
        },
        {
          "value": "check_mark",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
        },
        {
          "value": "eye",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
        },
        {
          "value": "heart",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
        },
        {
          "value": "question_mark",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label"
        },
        {
          "value": "star",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label"
        }
      ],
      "default": "none",
      "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
    },
    {
      "type": "checkbox",
      "id": "styled_as_button",
      "label": "Style as button",
      "default": false
    },
    {
      "type": "text",
      "id": "popup_heading",
      "label": "Popup Heading",
      "default": "Popup Title"
    },
    {
      "type": "richtext",
      "id": "popup_content",
      "label": "Popup Content",
      "default": "<p>Add your popup content here.</p>"
    }
  ]
}

CSS Styling (Optional)

Add this CSS to your theme’s stylesheet to style the new popup:

.product-custom-popup--button {
  margin: 1rem 0

.product-custom-popup__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.product-custom-popup__trigger .icon {
  width: 1.5rem;
  height: 1.5rem;
}

Usage

Now you can add custom popup blocks in your product section with:

• Custom trigger text
• Optional icon
• Button or link styling
• Custom heading and rich text content

The popup will inherit the existing modal functionality from your theme, so no additional JavaScript is needed.

This enhanced popup block gives you more flexibility than the standard popup block that only uses page content.

For more details, visit the official Shopify documentation.
Shopify Docs

How To Disable Right Click On Shopify Store

https://youtu.be/_h3oZML43qU?si=tvCqWj5hzQG3W9yH