Adding a Size Chart to Lumin Theme

A size chart is a feature that allows you to show your buyers extra information about your product's dimensions and sizes to help them to choose the appropriate variant:

Creating a page holding the size chart

The first step is to create a page containing the information about your size chart:

1/ Open Shopify admin, and click on "Pages" in the "Online Store" section:

2/ Create a new page and fill it with your information:

You can enter any title or content, but we recommend you use a meaningful name, such as Size chart, Dress sizes... This will make maintenance easier for you in the future.

Make sure that the page's visibility is set to visible. Hidden pages can't be connected in the theme editor.

3/ Repeat the process if your use case involves multiple size charts by creating one different page for each unique size chart.

Showing the same size chart for every product

If your use case is simple and you want to display the same size chart for each product, follow the steps below. If you instead need to display a different size chart for each product, jump to this section.

1/ Open the theme editor, and navigate to the product section:

2/ In the sidebar, for the product template, click on "Variant picker":

3/ Write the variant option name for which you want to show size char (e.g. Size)

4/ Select the size chart page you have created in the step before, in the Size chart setting

5/ Save.

Showing a different size chart for each product

Showing a different size chart for each product is a bit more complex and requires using metafields. If your use case is simpler and you just want the same size chart for every product, follow those instructions instead.

1/ In your Shopify admin, click on Settings and select Custom data to create a new metafield:

2/ Click on "Products" (as we want to create a product metafield):

3/ At the top, click on Add definition. For the name, write something meaningful such as Size chart. Select the Page reference metafield type, and make sure that "One page" is checked:

Once everything is set up, your metafield should look like this:

4/ Click on Save to create the metafield.

5/ Once you have created the metafield, we must connect it to the theme editor. To do that, open the theme editor, and navigate to the product section:

6/ In the sidebar, for the product template, click on "Variant picker":

If you do not see the variant picker, you might have removed it by mistake. If this is the case, click on "Add block" and select "Variant picker".

7/ Write the variant option name for which you want to show size char (e.g. Size)

9/ In the list, select the metafield we created earlier to connect it:

If you do not see the metafield in the list, ensure you have correctly created a page reference metafield (refer to step 3).

10/ Save your changes.

11/ At this stage, nothing will appear on your product page, which is normal. We have just connected the metafield but have not yet configured any size chart for our products. To do that, open the Shopify admin and navigate to a product you want to set up a size chart for. Scroll down until you see the Metafields box:

12/ Click on the Size chart metafield, and select the page you want to show for this product:

13/ Save the product, and repeat the other products' process. With this approach, you can select a unique size chart for each product (or a group of products, as the same page can be assigned to more than one product).