Add a size chart
The theme shows a size chart as a pop-up that a shopper opens from a link next to the option they are choosing. You build it from blocks the theme already has, so there is nothing to install. The same build works for any measurements table: jar and bottle volumes, net weights, portions per pack, or a garment size run.
Add the link that opens the pop-up
The link lives on the Variant picker block, in the heading of the option you name:
- In the theme editor, open your product template, expand Details under Product information, and select the Variant picker block.
- Set Variant option name to the option the link should sit beside, spelled exactly as it is on the product (for example Size). It is prefilled with Size.
- With Variant picker still selected, click Add block and choose Inline pop-up.
- Set its Link label to something like "Size guide". It is prefilled with "Learn more".
The trigger only renders next to the option named in Variant option name. If the name does not match an option on the product, the link does not appear. See Variant pickers and swatches for the rest of that block.
Put the chart in the pop-up
The Inline pop-up block holds a Pop-up dialog block. That is where the content goes, not on Inline pop-up itself. Expand Inline pop-up, select Pop-up dialog, and use its Add block button.
Set the dialog's Size to Large if your table is wide. Its Title is read by screen readers only, so add a visible heading as a block inside if you want one.
For the table itself you have two ways:
- A page with your table. Create a page under Online Store > Pages and put your measurements table on it. Then add a Page block inside Pop-up dialog and point it at that page. This keeps the numbers as real text, which reads better on a phone and can be translated.
- An image. Save your chart as a graphic and add an Image block inside Pop-up dialog. Simplest, but scale it so the numbers stay readable on a phone.
Add a unit toggle
To let shoppers switch between metric and imperial, add a Tabs block inside Pop-up dialog. It arrives with two tabs. Select each Tab, set its Tab name (for example "ml" and "fl oz", or "CM" and "IN"), and put the matching table inside it as a Page or Image block. The tab bar becomes the unit toggle.
Tips
- The pop-up sits on the product template, so it shows on every product that uses that template. If only part of your catalog needs a chart, give those products their own template.
- Keep one page per unit and per product family. A jar volume chart and a loaf weight chart are different pages, pointed at from each product's own template.
- Quick view leaves pop-up blocks out of the modal, so a shopper reaches the chart from the full product page. See Quick view.