Adding a pop-up to your product pages with metafields

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.

If you have an Online Store 2.0 theme, then you can connect most metafields to your theme by using the theme editor. 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, give the metafield definition a name. For example, if you are creating a size chart, then you might want to name the definition Size chart.
5. Click ⊕ Select type.
6. Select Page from the drop-down menu. One page is selected by default.
7. Click Save.

Step 2: Create your product page template

If you have an Online Store 2.0 theme, then you can connect the page reference to your theme by using the theme editor. 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 block 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. Enter a Link label. This is the text that displays what a customer clicks for the pop-up page content. For example, if the pop-up page is a size chart, then you might want the Link label to be Size chart.
7. Next to Page, click the dynamic source icon, and then click to select the page reference metafield that you created.
8. Click Save.

Step 3: Add a page with your product information

You need to create a page with 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. Name your page and create the content that you want to display in a pop-up on your product page.
4. In the Visibility section, set the page as Visible.
5. Click Save.

You can create as many 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. In this case, you can use a different product page template for specific product types. For example, you could create a product template for clothing with the size chart page in your pop-up block, and then you could create a product template for bags where you don't need to add the pop-up block.

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 the page reference metafield that you created, and then click Select pages.
4. Select the page that you created from the drop-down menu.
5. In the Theme template section, select the product page template that you created in step 2.
6. Click Save.

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