Getting started

Batten Size Chart takes about ten minutes to set up. Build one chart, write one rule, add one block, and the right guide starts appearing on the right products.

1. Install

Install from the Shopify App Store. On install the app creates two metaobject definitions, Size chart and Size chart rule, and a pinned Size chart product metafield definition of type metaobject reference. All three are app owned, so they show up under Settings, Custom data with the app's name on them.

Reinstalling does not duplicate the definitions. The app looks each one up before it creates it.

2. Build a chart

1. Open the app and choose Create chart.
2. Give it a title, for example Women's tops.
3. Add your columns, for example Size, Chest, Waist.
4. Add rows, or paste a whole table.

To paste, copy the block of cells out of Excel or Google Sheets, drop it into the paste panel, and choose Replace the table. The first line becomes your column headers and every line after it becomes a row.

3. Set the unit system

Choose Centimeters, Inches, or Both. If you choose Both, enter one set of measurements and press Convert into the other unit. The storefront dialog then shows a toggle, and only one table is visible at a time. This is on both plans, because the toggle lives in the storefront where a plan gate cannot reach it.

4. Write assignment rules

Open Rules and add one. A rule is a chart, a match type, a value, and a priority.

Every rule shows how many products it currently matches, so you can check the number against a search in your products list before you save. Lower priority numbers win, so a rule at priority 5 beats a rule at priority 10.

5. Add the storefront blocks

In the theme editor, open the product template and add the Size guide button app block directly under the variant picker. Save, then open the product on the storefront and click the link. The dialog should open, trap focus, close on Escape and on a backdrop click, and return focus to the link.

The second block, Size chart, renders the table inline in any section rather than in a dialog. Use it when the guide is part of the page rather than an aside.

6. Check the resolution order

Three things can decide which chart a product shows. From weakest to strongest:

1. The default chart, used when nothing else matches.
2. The highest priority matching rule.
3. The product's own Size chart metafield, which always wins.

Clear the product metafield and the rule takes over again.

Where the data lives

Charts and rules are stored in app owned metaobjects on your store. They are translatable with Translate and Adapt, they are visible in your admin, and they stay with the store rather than living on our servers.