TL;DR
Build charts around product categories and verified measurements, rather than applying one generic guide to every item.
Label body measurements and garment measurements clearly, and show units next to the numbers.
Use a supported theme block for shared content, a page-reference metafield for product-specific guides, or an app when your requirements justify it.
Place the size-guide trigger near the size selector, keep fit notes visible, and test the chart on mobile and with a keyboard.
Start with the sizing decision
A shopper choosing between two sizes needs more than a grid of letters. They need to know whether the numbers describe their body or the item, how to measure, and which details change the fit. If those answers are missing, adding a polished pop-up only gives the uncertainty a better-looking home.
The practical answer to how to add size chart in Shopify starts with the information, then the display. Prepare a reliable chart for one category, attach it to the right products, and put a clear route to it beside the size choice. Treat the chart as part of the buying decision, with an owner who checks it whenever the product specification changes.
Do not promise that a size guide will eliminate returns or guarantee a perfect fit. It can make the choice clearer. The underlying measurements, cut, fabric, and shopper preferences still matter.
1 Build a chart for the category you actually sell
Group products by the way shoppers choose a size. A fitted shirt may need chest and waist measurements; trousers may need waist and inseam; footwear may need foot length and a carefully verified conversion. Separate adult and children’s ranges, brands with different grading, and cuts that use different measurement systems. A shared chart is useful only when the shared measurements are genuinely applicable.
Collect the approved specification from the supplier or product team, then check a sample where possible. Record the product family, measurement method, revision date, and person responsible. Never copy a competitor’s chart to fill a gap: an identical size label does not establish an identical fit.
Choose body measurements or garment measurements
Body measurements describe the person the product is intended to fit. Garment measurements describe the finished item. They are not interchangeable. A shirt’s finished chest circumference may exceed the intended body chest measurement because the design includes ease. Stretch and construction also affect the relationship.
Write the basis above the table: “Body measurements in cm” or “Finished garment measurements in cm.” If you show a flat garment width, call it a flat width. Do not label a 52 cm laid-flat chest width as a 52 cm chest circumference. If your measurement method doubles a width, explain that method and apply it consistently.
Choose useful columns and units
Keep the first chart narrow. Include the measurements that decide the fit, rather than every dimension available in a factory sheet. Put secondary details in a separate text note when they are useful. Use centimetres or inches for your audience, or provide an accessible unit switch that updates the labels and values together. One inch equals 2.54 cm; choose a consistent rounding policy and avoid implying greater precision than the source supports.
The following fictional example shows a body-measurement chart for one adult shirt range. These numbers are illustrative, not a sizing recommendation for a real product. Replace them with verified values before publication.
Illustrative adult shirt body measurements in centimetres | ||
Size | Chest circumference cm | Waist circumference cm |
|---|---|---|
S | 88–93 | 74–79 |
M | 94–99 | 80–85 |
L | 100–105 | 86–91 |
XL | 106–111 | 92–97 |
Table note: Body measurements for an illustrative regular-fit shirt range. Measure in centimetres. The garment’s finished dimensions are different. Between-size advice must come from the verified fit guidance for this range.
2 Add measuring instructions and fit notes
Keep the measuring method next to the chart. A measurement name alone is often not enough. Explain the tool, starting point, posture, and whether the tape should be snug or loose. A small diagram can help, but the instructions should remain readable as text.
Example instructions for body measurements
“Use a flexible tape measure. Measure your chest around its fullest part, keeping the tape level across your back. Measure your waist at the location shown in this guide. Stand naturally and keep the tape comfortably close without pulling it tight.” Adapt the waist location to your documented measurement standard; do not leave the shopper to guess whether you mean natural waist or trouser waistband.
For garment measurements, use a different instruction: “Lay a similar shirt flat without stretching it. Measure straight across the chest at the stated point below the armholes, then compare that flat width with our garment-width values.” Specify the exact point used by your product team. Mixing a body-measuring instruction with a garment table creates a plausible-looking but unusable guide.
Put important fit notes beside the size selector
Fit notes answer a different question from the chart. They explain how this specific product wears: a relaxed cut, a close-fitting sleeve, a cropped length, or fabric with limited stretch. Put the short, decision-critical note near the size selector, before the shopper commits. Put the fuller measurement method and detailed explanation inside the size guide.
A clear fictional example is: “Relaxed fit through the body. Fabric has no added stretch. Check the garment chest measurement against a shirt you own.” Use those statements only when they are true. Avoid a generic “size up” instruction across the whole store; advice for a fitted cotton shirt may be wrong for a stretch knit.
3 Choose how to add the chart in Shopify
Choose the simplest route that serves your catalogue. A single shared guide can work for a uniform product range. Product-specific references are more manageable when categories differ. A dedicated app can be appropriate for more involved chart assignment or sizing workflows, provided you verify its actual features and accessibility.
Route A Use a block already supported by your theme
Open the theme editor from Online Store → Themes and inspect the relevant product template. Look for an existing size-guide, pop-up, collapsible content, or page-content block. Names and available settings vary by theme and version. Preview the block on a product before deciding that it meets your needs.
If that block accepts a fixed page or text source, select the appropriate chart content and place its trigger near the size selector. A fixed setting usually applies wherever that product template is used. Check which products share the template before saving: one shared chart should not silently appear on unrelated categories.
Use a duplicate theme for setup and testing where practical. Saving content in the admin and making a theme change are different actions; check what is visible on the published storefront after your chosen release process. Do not assume that editing a page is isolated just because you are previewing an unpublished theme.
Route B Connect a page-reference metafield
Shopify’s official pop-up size chart tutorial describes this route for themes that support dynamic sources. A metafield stores the product’s reference; the theme block displays the referenced page.
In Settings → Metafields and metaobjects, open product metafield definitions. Add a definition named Size chart, choose the Page type, and save it.
Create a Shopify page containing the relevant category chart, measuring instructions, and units. Make separate pages when categories need different guides.
Create or select the appropriate product template. Add the supported pop-up block and connect its page setting to the Size chart metafield using the dynamic source control.
Open each relevant product, select its chart page in the metafield, assign the intended template, and save. Preview the actual product to check the result.
Shopify warns that a pop-up link can still appear on a product whose page reference is empty. Use a template assigned only to relevant products, or have a developer implement and test conditional visibility. Include an unassigned product in your checks.
Route C Use a dedicated size-chart app
Consider an app when you need assignment rules across many products, several charts per product, translation support, or a sizing workflow your theme cannot provide. Treat these as selection criteria, not features every app includes. Check the current listing and documentation, then test the exact experience in your theme.
Evaluate the mobile layout, keyboard operation, chart ownership, unit conversion, export options, and what happens if the app is disabled. Check how the app adds its block or embed to the theme. Remove duplicate triggers so shoppers do not find two guides with different numbers. A recommendation engine is a separate capability from a chart display; do not imply that installing a chart app automatically provides personalised size advice.
4 Make the table and pop-up usable on mobile
A chart that looks tidy on a desktop can become tiny on a phone. Start with a short table, readable text, and a clear heading. Keep essential context above it: product category, measurement basis, units, and a link or instruction for measuring.
Follow the W3C guidance for accessible tables: use real header and data cells, a descriptive caption, and explicit header relationships where needed. A screenshot of a table cannot provide the same structure to assistive technology.
Example of a narrow mobile table
On a small screen, the shirt example can show three columns: Size, Chest in cm, and Waist in cm. Keep the size labels visible and the numbers aligned. If additional columns require horizontal scrolling, confine that scrolling to the table area, provide a visible “Scroll for more measurements” cue, and check that the region can be reached and operated with a keyboard. Do not shrink the entire chart until the numbers fit.
A unit control should say “cm” and “in” in text, clearly identify the active option, and keep focus after switching. Test the converted values against the source data. If the control fails, the remaining table still needs labelled units. Avoid a mix of inches in the heading and centimetres in the cells.
Example of a size-guide modal
Place a text button labelled “Size guide” beside the size selector. It opens a dialog titled “Regular-fit shirt size guide,” with a visible Close button, units, the chart, and measuring instructions. On a phone, the content can scroll inside the dialog without hiding the closing control or pushing the table beyond the viewport.
Shopify’s theme accessibility guidance covers action buttons and modal semantics. Have your theme developer verify a meaningful dialog name, focus moving inside on open, focus staying inside while open, Escape to close, and focus returning to the Size guide button.
Test with touch, keyboard navigation, text zoom, and a screen reader. An icon-only close control still needs an accessible name. Do not assume a working mouse click proves the modal is accessible. Where practical, keep a direct route to the guide page as a fallback, and make sure that route is discoverable.
5 Use a truthful icon to point to the guide
A small ruler or measuring-tape icon can make the size guide easier to spot. Pair it with explicit text such as “Size guide” or “Check measurements.” The visual cue should lead shoppers toward information that is genuinely available. A decorative badge saying “Perfect fit guaranteed” is a promise about the outcome, not a helpful label for a chart.
Snapp Trust Badges & Icons can support concise visual cues through icon blocks. It is not a size-chart engine: it does not supply your measurement data, build a category chart, or calculate a shopper’s correct size. Keep the working size-guide button and chart in your theme or dedicated sizing app, and use an icon as supporting signposting.
Do not make a decorative icon look like an interactive control. If the icon itself is not linked, ensure the nearby size-guide button is obvious and usable. A shopper should not have to tap several symbols to find the measurements.
For broader placement guidance, see Snapp’s product page optimisation guide. Here, the priority is giving the sizing decision its own clear route rather than adding more visual messages around the buy button.
6 Check the right chart appears on the right product
Before releasing the change, test one product from each chart group and at least one product with no assigned guide. Change variants, refresh the page, and open the chart again. If one product’s variants require different measurements, a single product-level reference needs additional design; do not expect it to switch automatically with the selected variant.
Data: verify the size labels, numbers, measurement basis, units, and any rounding against the approved source.
Content: confirm that fit notes apply to this item, the measuring method matches the chart, and links open the intended category guide.
Display: check a narrow phone screen, larger text, keyboard focus, closing behaviour, and the absence of duplicate or empty triggers.
Release: complete the theme or app publishing steps, then inspect the live product URL in a fresh session. Confirm the guide works outside the theme editor.
Assign a named owner to chart updates. When a supplier changes the cut or specification, review both the chart and the fit note. If different production runs use different sizing, resolve that distinction before replacing a shared page that many products reference. Keep a record of the previous values so a correction can be traced.
Give shoppers a clear next step
Start with one category and one reliable chart. Label the measurement basis, explain how to measure, and publish the guide where shoppers choose a size. Once that route works on a phone and with a keyboard, extend it to the rest of the catalogue. Consistency comes from verified data and a repeatable process, not from putting the same table everywhere.
