Size Chart System

This guide explains the theme's Size Chart feature in plain language: how to create one, how the content is stored, how it connects to your products, and how it appears to shoppers. A short "Behind the scenes (for developers)" section at the end has the technical detail for anyone who needs it.

The one big idea: The size chart's content does not live in the theme editor. It lives in a product metafield called custom.size_chart, which points to a reusable metaobject you create once and attach to as many products as you like. The size chart block in the theme editor only controls how the chart looks (icon, label, units, colours).

1. What the size chart is#

The size chart is a small popup a shopper can open from a product page — usually by clicking a "Size chart" link shown next to the Size option. Inside, it shows:

• A measurement table (e.g. Size / Chest / Waist).
• A toggle to switch between inches and centimetres.
• An optional "How to measure" guide with steps and a diagram image.

The same popup design is reused everywhere, so every product's size chart looks consistent.

2. How to create a size chart (step‑by‑step for a store owner)#

You do this once in your Shopify admin (not in the theme editor), then reuse it across products.

Step 1 — Create the size chart metaobject#

1. In Shopify admin, go to Settings → Custom data → Metaobjects and create a new metaobject definition (e.g. name it "Size chart").
2. Give it these fields (the field keys must match exactly — see the table in section 3):

- title - headers - size_data - note (optional) - measure_guide (optional — links to a second metaobject; see Step 2)

1. Create an entry of this metaobject and fill in the values for your chart (e.g. a "T‑Shirt size chart").

Step 2 — (Optional) Create a "How to measure" guide#

1. Create a second metaobject definition (e.g. "Measure guide") with fields: title, steps, image.
2. Create an entry, add the measuring steps and a diagram image.
3. Back in your size chart entry, set the measure_guide field to link this guide.

Step 3 — Connect the size chart to your products#

1. Make sure you have a product metafield with namespace `custom` and key `size_chart`, of type "Metaobject reference" (pointing at your Size chart metaobject definition).
2. Open a product → in its Metafields section, set `custom.size_chart` to the size chart entry you created.
3. Done. The size chart button now appears on that product, next to the Size option.

Repeat Step 3 for each product. You can reuse the same size chart entry on many products, or make different entries for different product types.

3. The metaobject explained (the fields and example values)#

Main size chart metaobject#

"How to measure" guide metaobject (optional)#

4. How the content connects to your products#

• A product shows a size chart only when its `custom.size_chart` metafield is filled in.
• The connection is per product — you set it on each product individually (and can reuse the same chart entry across many products).
• There are no automatic rules: it is not based on tags, collections, or a store‑wide default. If the metafield is empty, the product simply has no size chart (the button and popup don't appear).

5. How it's displayed to shoppers#

1. On the product page, a "Size chart" link/button appears next to the Size option (only if the product has the metafield set).
2. Clicking it opens the size chart popup (or a side drawer, depending on the block setting).
3. Inside the popup the shopper can:

- Read the measurement table. - Switch between Inches and Centimetres. - Switch to the "How to measure" tab (if a guide was added).

1. They close it with the X, by clicking outside it, or by pressing Esc.

6. The size chart block settings (in the theme editor)#

In the theme editor, the Size chart block (inside the Product information section) controls only the appearance — the content always comes from the metaobject. Settings include:

The theme editor now also shows a short "How to set up your size chart" guide at the top of this block, summarising the metaobject steps above.

7. Logic, conditions & dependencies#

When the size chart appears (all must be true):

• The product's custom.size_chart metafield is set, and
• The chart has more than one column (headers has at least 2 names), and
• The chart has at least one row (size_data is not empty).

If any of these is missing, the chart (and its button) won't show.

Files involved (in the theme):

• snippets/size-chart.liquid — builds the table and the "how to measure" content from the metaobject.
• snippets/product-popup.liquid — the popup/drawer shell that contains the chart.
• snippets/popup-trigger.liquid — the button that opens the popup.
• snippets/product-options.liquid + snippets/option-group.liquid — place the button next to the Size option.
• sections/main-product.liquid and sections/featured-product.liquid — define the Size chart block and its settings.
• assets/size-chart.js and assets/size-chart.css — the in‑popup behaviour (unit/measure toggles) and styling.
• assets/modal-handler (global) — opens/closes the popup.

Build note (for developers): the styles and scripts are compiled from source — edit src/styles/scss/snippets/size-chart.scss and src/scripts/size-chart.ts, not the compiled assets/size-chart.css / assets/size-chart.js (those are overwritten by the build).

8. Common pitfalls#

9. Behind the scenes (for developers)#

Data source. The chart resolves from the product metafield product.metafields.custom.size_chart.value (a metaobject reference), read in snippets/size-chart.liquid:11. The same metafield gates rendering in snippets/product-popup.liquid (renders only if custom.size_chart.value != blank) and snippets/product-options.liquid (collects size‑chart blocks only when context == 'product' and the metafield exists).

Metaobject fields read (snippets/size-chart.liquid): title, headers (| split: ','), size_data.value (list of CSV rows), note, and the nested measure_guide.value metaobject → title, steps (newline‑split, each Label, description), and image.value (with a fallback to image). Data cells store the raw value as cm in a data-cm attribute; src/scripts/size-chart.ts computes inches on the fly (÷ 2.54, handles ranges like 90-95).

Render gate. Renders only when chart != blank and headers.size > 1 and raw_rows.size > 0 (size-chart.liquid ~line 39‑43).

Trigger ↔ popup pairing. No when 'size_chart' branch exists in the block loop. The trigger is emitted from the variant picker (snippets/option-group.liquid, next to the option whose handle is size) via snippets/popup-trigger.liquid, carrying data-ui-action="toggle" and data-ui-target="size-chart-<block.id>". The modal shell is rendered after the block loop in sections/main-product.liquid (section.blocks | where: 'type', 'size_chart' → render 'product-popup', name_prefix: 'size-chart'), as <modal-dialog data-ui-name="size-chart-<block.id>">. The global <modal-handler> (src/scripts/modal-handler.ts) matches data-ui-target to data-ui-name, toggles data-state, traps focus, and closes on overlay/close/Esc. Visibility is pure CSS reacting to data-state.

Block colours. The section injects per‑block CSS (.main-product-<block.id> .size-chart) mapping the block's colour settings to the CSS variables the SCSS consumes (--background-color, --border-color, --text-color), split for light/dark mode.

Manual alternative. The separate popup block (not the size_chart block) is the theme's manual rich‑text/image popup path; it is independent of the metaobject‑driven size chart.

This document describes the theme as reviewed on 2026‑06‑20. If the size chart code changes, update this file to match.