Adding a pop-up size chart to your product pages

Metafields help you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn't usually captured in the Shopify admin. Metafields can be used internally in your Shopify admin and you can also choose to display them in your online store.

With metafields, you can add a page reference to a pop-up block that displays a link on your product pages. When clicked, the link opens a pop-up that displays your page's content. You can add images and other media using the rich text editor for your pages.

The following are some examples of pop-up information you could add to your product pages:

• Size charts
• Care instructions
• Assembly instructions
• Product specifications
• Frequently asked questions

This is a 4-step tutorial that introduces page reference metafields, creating a product metafield for a page reference, creating a product page template for your online store, adding a new page, referencing the page in specific products, and applying the product page template to specific products. You can use this tutorial to create any content you want in the pop-up. This tutorial uses the example of the size chart throughout.

This tutorial requires an Online Store 2.0 theme. If you're using a vintage theme, or if you want to add metafield types that your theme doesn't support, then you can edit your theme code or hire a Shopify Partner.

Step 1: Create a product metafield for a page

To begin, you must create a page reference metafield definition for your product pages. The product metafield links to a specific page and can be customized for each product. If you don't add a page reference to a product that uses the same template, then your pop-up link text still displays as though there is content. In order to only display the pop-up link on specific products, you can create a product template and apply that only to relevant products.

With page reference metafields, you can display different product information by creating different pages for different types of products. For example, you can create two different size chart pages for two different age groups, such as a toddler size chart and an infant size chart, and then you can add the page reference for toddler sizes only to products that are for toddlers.

You need to create a metafield definition for a page reference in order to connect it to the pop-up block in your theme editor. Storefront access is selected by default when you create your metafield definition.

Steps:

Desktop

1. From your Shopify admin, go to Settings > Custom data.

2. In the Metafield definitions section, click Products.

3. Click Add definition.

4. In the Name field, enter Size chart.

5. Click ⊕ Select type.

6. Select Page from the drop-down menu. One page is selected by default.

7. Click Save.

iPhone

1. From the Shopify app, tap … > Settings.
2. Tap Custom data.
3. In the Metafield definitions section, tap Products.
4. Tap +.
5. In the Name field, enter Size chart.
6. Tap + Select type.
7. Tap to select Page from the drop-down menu. One page is selected by default.
8. Tap Save.

Android

1. From the Shopify app, tap ☰ > Settings.
2. Tap Custom data.
3. In the Metafield definitions section, tap Products.
4. Tap +.
5. In the Name field, enter Size chart.
6. Tap + Select type.
7. Tap to select Page from the drop-down menu. One page is selected by default.
8. Tap ✓ to save.

Step 2: Create your product page template

This tutorial requires an Online Store 2.0 theme. If you're using a vintage theme, or if you want to add metafield types that your theme doesn't support, then you can edit your theme code or hire a Shopify Partner.

After you add a section or block, you can select a metafield by clicking the dynamic source icon:

If you don't want to add the pop-up link for the size chart to all your products, then you need to create a new product page template. In the steps, you create a new product page template, but you can also choose an existing product page template to customize instead.

Steps:

Desktop

1. From your Shopify admin, go to Online store > Themes.
2. Click Customize next to the theme that you want to customize.
3. From the Home page drop-down menu at the top of the editor, click Products, and then click ⊕ Create template to create and customize a new template.
4. In the Sections navigation sidebar, go to the Template > Product information blocks, and then click ⊕ Add block.
5. Click Pop-up.
6. In the Link label field, enter Size chart. This is the text that displays what a customer clicks for the pop-up page content.
7. Next to Page, click the dynamic source icon, and then click to select the page reference metafield that you created.
8. Click Save.

iPhone

1. From the Shopify app, tap … > Online store.
2. Tap Manage all themes.
3. Tap Customize next to the theme that you want to customize.
4. From the Home page drop-down menu at the top of the editor, tap Products, and then tap ⊕ Create template to create and customize a new template.
5. In the Sections navigation sidebar, go to the Template > Product information blocks, and then tap ⊕ Add block.
6. Tap Pop-up.
7. In the Link label field, enter Size chart. This is the text that displays what a customer clicks for the pop-up page content.
8. Next to Page, tap the dynamic source icon, and then tap to select the page reference metafield that you created.
9. Tap Save.

Android

1. From the Shopify app, tap ☰ > Online store.
2. Tap Manage all themes.
3. Tap Customize next to the theme that you want to customize.
4. From the Home page drop-down menu at the top of the editor, tap Products, and then tap ⊕ Create template to create and customize a new template.
5. In the Sections navigation sidebar, go to the Template > Product information blocks, and then tap ⊕ Add block.
6. Tap Pop-up.
7. In the Link label field, enter Size chart. This is the text that displays what a customer clicks for the pop-up page content.
8. Next to Page, tap the dynamic source icon, and then tap to select the page reference metafield that you created.
9. Tap ✓ to save your theme.

Step 3: Add a page with your size chart

You need to create a page with the size chart content that the metafield references. If you already have a page created, then you can skip to step 4.

Steps:

Desktop

1. From your Shopify admin, go to Online store > Pages.
2. Click Add page.
3. In the Title field, enter Size chart, and then add the size chart information in Content.
4. In the Visibility section, set the page as Visible.
5. Click Save.

iPhone

1. From the Shopify app, tap … > Online store.
2. Tap Pages.
3. Tap Add page.
4. In the Title field, enter Size chart, and then add the size chart information in Content.
5. In the Visibility section, set the page as Visible.
6. Tap Save.

Android

1. From the Shopify app, tap ☰ > Online store.
2. Tap Pages.
3. Tap Add page.
4. In the Title field, enter Size chart, and then add the size chart information in Content.
5. In the Visibility section, set the page as Visible.
6. Tap ✓ to save.

You can create as many size chart pages to reference in the metafield as you need. However, you can link only one page in the product metafield.

Step 4: Reference the page and apply the product template to specific products

When you add a page reference to a specific product, the information from that page displays only with that product. If you leave the page reference blank for a product that uses that product template, then the link text still displays as a link. However, the pop-up is blank with no page reference and might create confusion for your customers. You can use a different product page template for specific product types that have size charts, such as clothing or shoes, and a product template for other product types, such as children's toys or jewelry and other accessories.

Learn more about templates.

Steps:

Desktop

1. From your Shopify admin, go to Products.
2. Click the product that you want to add a page reference to.
3. In the Product metafields section, click Size chart page reference, and then click Select pages and select the Size chart page.
4. In the Theme template section, select the Size chart product page template that you created in step 2.
5. Click Save.

iPhone

1. From the Shopify app, go to Products > All products.
2. Tap the product that you want to add a page reference to.
3. In the Product metafields section, tap Size chart page reference, and then tap Select pages and select the Size chart page.
4. In the Theme template section, select the Size chart product page template that you created in step 2.
5. Tap Save.

Android

1. From the Shopify app, go to Products > All products.
2. Tap the product that you want to add a page reference to.
3. In the Product metafields section, tap Size chart page reference, and then tap Select pages and select the Size chart page.
4. In the Theme template section, select the Size chart product page template that you created in step 2.
5. Tap ✓ to save.

You can repeat these steps for as many products as you need.