Shopify Size Chart: Add a Popup Next to the Price

The problem: a size chart shoppers actually notice

A store owner asked me how to add a size chart to their Shopify product page.

They did not just want a size chart somewhere on the page. They wanted it in a specific spot: right next to the price, on the same line. A small Size guide link that a shopper sees the moment they look at the price and start thinking about which size to pick.

Clicking it should open a popup with the size chart image and a close button. Nothing fancy. Just the chart, front and centre, with a clear way to close it again.

That is a good instinct. On a fashion or apparel store, the size question is the number one reason people hesitate or return an item. Putting the answer one click away, right where the shopper is already looking, removes that friction.

This guide shows you how to build exactly that. It is one block of code, no paid app, and it works on the Horizon theme. I built it and tested it on a real Horizon store.

Before: the price sits on its own line with no size chart link next to it

Why the size chart usually ends up in the wrong place

Most size charts on Shopify stores end up in one of three awkward places.

Some sit in a tab or accordion far below the buy button, so the shopper has to scroll past everything to find them. Some live on a completely separate page, which means leaving the product to go look, then coming back. And some are baked into the product description as a plain image, which looks fine on desktop and breaks on mobile.

None of those put the size chart where the decision actually happens, which is right at the price and the size selector.

There is a reason it is hard to place it there. On modern themes like Horizon, the product page is built from separate blocks that stack on top of each other. The price is one block. If you add another block, it lands above or below the price, not beside it. Getting a link onto the same row as the price takes a small amount of code, which is why most people give up and reach for an app.

You do not need an app. You need one Custom Liquid block that places the link for you.

What we are building

Here is what the finished result does:

• Adds a small Size guide link on the same row as the price.
• Opens a popup with your size chart image when clicked.
• Gives the popup a close button, plus close on the Esc key or a click outside.
• Lets you turn the underline on the link on or off with one setting.
• Uses your theme's own text colour, so it matches your store automatically.
• Works on desktop and mobile.

It is a single block, so there are no theme files to edit and nothing to break. If you ever want to remove it, you delete the block and everything is gone.

Before you start: which theme is this for

This guide is written for Horizon, Shopify's newer free theme that uses blocks and web components. The code targets the way Horizon builds its price element, so it drops in cleanly there.

If you are on an older theme like Dawn, the idea is the same but the price markup is different, so the selector in the code would need a small change. The steps for adding a Custom Liquid block are almost identical across themes, so you can still follow along.

Not sure which theme you run? In your Shopify admin, go to Online Store > Themes and look at the name of your live theme at the top.

Step by step: add the size chart popup

1. Open the theme editor

In your admin, go to Online Store > Themes, then click Customize on your live theme. In the preview, open any product page. This is the page you will be editing.

2. Add a Custom Liquid block

Click into the product information area. Click Add block, type Custom liquid into the search, and choose Custom Liquid.

Position does not matter. The code finds the price and places the link next to it for you, so you can drop the block anywhere in the product area.

Add a block, search Custom liquid, and choose Custom Liquid

3. Paste the code

A Liquid code box appears. Paste this into it:

Paste the code into the Liquid code box

{%- comment -%} ---- Size guide popup. Set the 3 values below. ---- {%- endcomment -%}
{%- assign sg_label     = 'Size guide' -%}
{%- assign sg_underline = true -%}
{%- assign sg_image_url = 'PASTE_YOUR_SIZE_CHART_IMAGE_URL' -%}

<dialog class="sg-modal" data-sg-modal>
  <button type="button" class="sg-modal__close" data-sg-close aria-label="Close">&times;</button>
  <img class="sg-modal__img" src="{{ sg_image_url }}" alt="{{ sg_label }}" loading="lazy">
</dialog>

<style>
  product-price.sg-has-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 4px;
  }
  product-price.sg-has-link > * { width: auto; flex: 0 0 auto; max-width: 100%; }
  .sg-link {
    appearance: none; background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: 0.85em; line-height: 1.2; color: inherit;
    opacity: 0.85; cursor: pointer;
  }
  .sg-link.sg-underline { text-decoration: underline; text-underline-offset: 2px; }
  .sg-link:hover { opacity: 1; }
  .sg-modal {
    width: min(92vw, 640px); max-height: 88vh; padding: 0; border: 0;
    border-radius: 12px; overflow: visible;
    background: rgb(var(--color-background-rgb, 255 255 255));
    color: rgb(var(--color-foreground-rgb, 26 26 26));
  }
  .sg-modal::backdrop { background: rgba(0, 0, 0, 0.55); }
  .sg-modal__img {
    display: block; width: 100%; height: auto; max-height: 88vh;
    object-fit: contain; border-radius: 12px;
  }
  .sg-modal__close {
    position: absolute; top: -14px; inset-inline-end: -14px;
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
    background: rgb(var(--color-foreground-rgb, 26 26 26));
    color: rgb(var(--color-background-rgb, 255 255 255));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
</style>

<script>
  (function () {
    var LABEL = {{ sg_label | json }};
    var UNDERLINE = {{ sg_underline | json }};
    var modal = document.querySelector('[data-sg-modal]');
    if (!modal) return;
    if (modal.parentNode !== document.body) document.body.appendChild(modal);

    function openModal() { modal.showModal ? modal.showModal() : modal.setAttribute('open', ''); }
    function closeModal() { modal.close ? modal.close() : modal.removeAttribute('open'); }

    document.addEventListener('click', function (e) {
      if (e.target.closest('[data-sg-open]')) { e.preventDefault(); openModal(); }
      else if (e.target.closest('[data-sg-close]')) { e.preventDefault(); closeModal(); }
      else if (e.target === modal) closeModal();
    });

    function inject() {
      var price = document.querySelector('product-price');
      if (!price || price.querySelector('[data-sg-open]')) return;
      price.classList.add('sg-has-link');
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'sg-link' + (UNDERLINE ? ' sg-underline' : '');
      btn.setAttribute('data-sg-open', '');
      btn.textContent = LABEL;
      price.appendChild(btn);
    }
    inject();
    new MutationObserver(inject).observe(document.body, { childList: true, subtree: true });
  })();
</script>

4. Set your three values

At the very top of the code there are three lines to edit. That is all you touch.

• sg_label is the link text. Keep 'Size guide' or change it to 'Size chart', whatever you prefer.
• sg_underline is true for an underlined link, or false for no underline. The store owner who asked wanted this choice, and it is one word.
• sg_image_url is the address of your size chart image. Upload the chart in Settings > Files, copy its URL, and paste it here in place of the placeholder text.

5. Save

Click Save. That is the whole setup.

The underlined Size guide link now sits on the same row as the price, and clicking it opens your chart.

After: an underlined Size guide link now sits on the same row as the price

The popup shows your size chart image with a round close button in the corner. It closes on the button, on the Esc key, or on a click outside the image, whichever the shopper reaches for first.

The size chart popup open, with the chart image and a close button

How to make the size chart image

The popup is only as good as the image you feed it, so spend a minute on the chart itself.

A clear size chart for apparel usually has a row per size and a column per measurement. The common columns are bust or chest, waist, hips, and length. Put the measurements in centimetres, or list both centimetres and inches if you sell internationally.

Keep it readable. A wide, low table with big text works better in a popup than a tall, cramped one. Export it as a PNG or JPG.

Then upload it: in your admin go to Settings > Files, click Upload files, choose your chart, and once it appears, copy its URL. That URL is what goes into sg_image_url in the code.

If you sell very different product types, you can make more than one chart and add a second Custom Liquid block with a different image on the templates that need it.

How do I add a size chart to Shopify without an app?

You add a Custom Liquid block to your product page and paste in a small piece of code, exactly like the steps above. Custom Liquid is a built-in block type, so it costs nothing and installs nothing.

Size chart apps exist and some are good, especially if you need a different chart for every product with no code at all. But for a single store-wide chart that opens in a popup next to the price, an app is more moving parts than you need. The block above does the job and you own every line of it.

Can I put the size guide right next to the price?

Yes, and that is the main thing this guide solves.

On Horizon the price lives in its own block, and the theme stacks blocks vertically by default, so a normal block lands under the price rather than beside it. The code handles that. It finds the price element, switches it to a horizontal layout, and drops the link in on the same row. It also re-checks after the shopper changes a variant, so the link never disappears when the price updates.

If you would rather have the link somewhere else, such as under the size selector, you can move it, but next to the price is where shoppers look first.

How do I show a size chart for one product only?

The block above shows the same chart on every product that uses the template, which is what most single-brand stores want.

If you genuinely need a different chart per product, Shopify has a metafield-based approach. You create an image metafield on the product, upload a chart to each product, and reference that metafield in the code instead of a fixed URL. Shopify's own help has a tutorial on building a pop-up size chart with metafields. It is more setup, but it lets every product carry its own chart.

For most stores, one good chart shown everywhere is simpler and just as effective.

Where do I upload the size chart image in Shopify?

Go to Settings > Files in your admin. That is Shopify's built-in file library, and any image there gets a public URL you can use anywhere, including in this popup.

Upload the chart, wait for it to finish processing, then click the copy icon next to it to grab the URL. Paste that into sg_image_url. Do not paste the address of an image from another website, since that can break or load slowly. Host it in your own Files library.

If the size chart is still not showing

A few things to check if the link or popup does not appear.

First, confirm you saved the block. The editor does not apply changes until you click Save.

Second, check the image URL. Paste it into a new browser tab on its own. If it does not open there, it will not open in the popup either. Make sure it is the full address, starting with https.

Third, make sure you are on Horizon. The code targets Horizon's price element. On a different theme the link may not attach, and the selector would need adjusting for that theme's markup.

Fourth, if you already had a separate size guide link elsewhere on the page, you now have two. Keep whichever you prefer and remove the other. They do not conflict, it just looks tidier with one.

Size chart, size guide, size table: same thing?

Shoppers and merchants use these words interchangeably, and for this purpose they mean the same thing: a reference that maps a size label like S, M, or L to real body measurements.

The label on the link is up to you. Size guide and Size chart both read well. Whatever you type into sg_label is what shoppers see, so use the phrase your customers are used to.

The important part is not the word. It is the placement. A size reference the shopper can reach in one click, right beside the price, answers the size question before it becomes a reason to leave.

The short version

To add a size chart popup next to the price on Shopify Horizon:

• Open Online Store > Themes > Customize and go to a product page.
• Add a Custom Liquid block anywhere in the product area.
• Paste the code above.
• Set your label, choose underline on or off, and paste your size chart image URL from Settings > Files.
• Save.

One block, no app, and the size chart lands exactly where shoppers look. I tested it on a Horizon store and the link sits cleanly on the price row with the popup opening on click.