How do I add a size chart?

What you are seeing

Customers ask which size to order, or they order the wrong one and return it. You want a size guide next to the size options on the product page, and you would rather not install another app for it.

How the theme handles it

Laurel has a built in size chart that attaches to a product option. You store the chart itself in a metafield, then tell the variant picker which option name is the size one. From then on the chart appears automatically on every product that uses that option name, with no per product work.

That last part is the point: set it up once and a catalog of hundreds of products is covered.

Step 1: Create the size chart metafield

Steps:

Go to Shopify admin > Settings > Custom data > Products.
Click Add definition.
Create the definition for the size chart.
Click Save.
Go to Online Store > Pages and create a page containing your size chart.
Add the size chart as a table, image, or formatted text, then click Save.
Go to Shopify admin > Products and open the product you want to edit.
Scroll down to the Metafields area and select the size chart page in the Size chart field.
Click Save.

Result: the product now has a size chart page linked in its Size chart metafield, ready for the theme to display.

Step 2: Tell the variant picker which option is the size

Steps:

Go to Online Store > Themes > Customize.
Open your Product page template.
Go to Product information > Variant picker > Size trigger.
Enter the option name you use for sizing, for example Size.
Click Save.

Result: the size chart link appears next to the size options on every product page that uses that option name.

alt="">

The value in Size trigger has to match the option name on your products exactly. If some products call it Size and others Shoe size, the chart only appears on the ones that match.

When to contact support

Contact support if the chart does not appear after both steps are done, if it appears on the wrong products, or if the chart opens but the table inside it is empty or badly formatted.

Send this with your first message:

Your store URL, and the URL of a product page where the chart should appear.
The exact option name on that product, and the exact value you typed into Size trigger.
A screenshot of the metafield definition, and a screenshot of the product page.
Theme name and version: Laurel 1.0.0, shown under the theme name in Online Store > Themes.
A staff account for the support team.

Metafields: the other product metafields the theme reads
Product information: the section that holds the variant picker
Staff account: how to give the support team access to your store