# Information popup
{% hint style="danger" %} Theme retirement | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}
If you are selling products with specific details customers need to know, like clothing sizes, you can add an **Information popup** to your product pages to display popup charts and product guides.
The **Information popup** appears as a clickable link next to a **variant selector** (e.g. size, color, material).
{% hint style="info" %}
**Note |** For multiple guides for different products, see the steps for [**creating unique info popups**](#use-metafields-to-display-unique-product-guides) for different products by using metafields. See the steps at the end of this guide.
{% endhint %}
## Create pages for popup content
The **Information popup** displays content from a **Page** created in your Shopify admin. Use Shopify's page editor to [create tables](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#insert-tables-with-the-rich-text-editor) with images, links, and other rich text to display in the popup modal.
Add as many pages as you need for unique product guides to tell customers about sizes, materials, or any other details they need to know before purchasing your products.
{% hint style="success" %} **Shopify** | Pages are a Shopify feature. To learn more, see Shopify's [Pages](https://help.shopify.com/en/manual/online-store/pages) manual.
{% endhint %}
## Show info popup next to variant selector
Once you've created a page for your popup content, you can add an **Information popup** link next to one of your [Product options](https://help.shopify.com/en/manual/products/variants) (for example, *Size* or *Material*).
When clicked, the popup will appear on top of the product page with your info popup content.
{% hint style="info" %}
**Note |** The Information popup will appear on any product with the same product option name (e.g. "size"). For multiple product guides, you can [create unique info popups for different products](#use-metafields-to-display-unique-product-guides) by using metafields.
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Products** template to edit.
2. In the **Product overview** section, click on the **Variant selector** block.
3. Enter the exact **Option name** that matches one of your product variants set up in your Shopify admin. For example: "Size".
4. Enter **Link text** for the link that opens the info popup when clicked (e.g. "Size guide").
5. Click the **Select page** button to choose the page you have created for the popup content.
6. Click **Save**.
## **Use metafields to display unique product guides**
You can display unique info popups for different products by using **metafields**. Once you create page content for multiple info popups (e.g. different size charts), you can link those pages to specific products by adding metafields in your Shopify admin.
Then, in the theme editor, insert that metafield as a dynamic source to automatically display the correct information.
Watch the video tutorial or follow the written instructions below.
> For a general introductions, see our [Dynamic sources and metafields tutorial](https://help.fluorescent.co/context/general/adapting-your-theme/dynamic-content-with-metafields).
{% embed url="" %}
### **1. Add 'Page reference' metafield**
First, you need to add a **Page reference** metafield to your product pages. This field will store the specific page you want to link to each product in your Shopify admin.
{% hint style="warning" %}
Make sure you've [created pages with your info popup content](#create-pages-for-popup-content) before following these steps.
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Click the **Variant selector** or **Information popup** block to open the settings.
2. Click the **Connect dynamic source** button next to the **Content** option in the **Information popup** settings. Then click **+ Create Metafield**.
> Alternatively, go to **Settings > Custom data** in your **Shopify admin**.
3. Click the **Products** tab.
4. Click the **Add definition** button in the top-right.
5. Add a **Name** to the metafield that describes what it will be used for so you can remember and find it easily. For example: "Size guide".
6. Click the **(+) Select content type** button and select **Page** under **Reference**.
7. Click **Save**.
### **2. Link pages with popup content to products**
Once you've added the **Page reference metafield** to your products in the Shopify admin, you can now enter the specific pages you want for the info popup by going to your **product inventory** in the Shopify admin.
STEPS
In your **Shopify Admin**:
1. Click **Products** in the admin sidebar. Open the product(s) you want to add the info popup page.
2. Scroll down to the **Metafields** section on the product page and click on the metafield you created and click **Select page**.
3. Repeat these steps to update the **Page reference** metafield for each product.
4. Click **Save**.
### **3. Insert page metafields in theme editor**
Now that the product **Metafields** you created link to the correct **pages** for your popup content, you can insert that metafield into the theme editor as a **Dynamic source**.
STEPS
In your theme editor (**Customize**):
1. Click the **Variant selector** or **Information popup** block to open the settings.
2. Click the **Connect dynamic source** button next to the **Content** option.
3. Select the **Metafield** that you created (e.g. "size guide").
4. You can now view or preview your different products to ensure that the correct **Information popup** content appears on each product page.
5. Click **Save**.
***
> **Related links**
>
> [Product template](https://help.fluorescent.co/context/product-pages/product-template)\
> [Using metafields](https://help.fluorescent.co/context/general/adapting-your-theme/dynamic-content-with-metafields)