Information popup
Product page
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 with an icon either next to a variant selector (e.g. size, color, material) or as a moveable block that you can position on your product page.
Note For multiple guides for different products, see the steps for creating unique info popups for different products by using metafields. See the steps at the end of this guide.
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 ↗ 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.
Shopify | Pages are a Shopify feature. To learn more, see Shopify's Pages ↗ manual.
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 ↗ (for example, Size or Material).
When clicked, the popup will appear on top of the product page with your info popup content.
Note The Information popup will appear on any product with thee same product option name (e.g. "size"). For multiple product guides, you can create unique info popups for different products by using metafields.
Add info popup as moveable icon link
Once you've created a page your popup content, you can display an Information popup link with an icon anywhere in the right-column of the product form.
When clicked, the popup will appear on top of the product page with your info popup content.
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 introduction, see our Dynamic sources and metafields tutorial.
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.
Make sure you've created pages with your info popup content before following these steps.
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.
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.
Related links
Last updated