Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Information popup (Size guides)

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.

For multiple product guides, you can create unique info popups for different products by using metafields.

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.

NOTE

Pages are a Shopify feature. To learn more, see Shopify's Pages manual.

For multiple product guides, you can create unique info popups for different products by using metafields. 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.

Show info popup next to variant selector

Product option info popup for "Size guide"
Product option info popup for "Size guide"

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.

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".

    "Size" product option in admin
    "Size" product option in admin
  4. Select an Icon to display next to the info popup link.

    (Optional.) Upload a Custom icon image to display next to the info popup link. We recommend a .png image with the minimum dimensions 50px x 50px and a transparent background.

  5. Enter Link text for the link that opens the info popup when clicked (e.g. "Size guide").

  6. Click the Select page button to choose the page you have created for the popup content.

    You can display unique info popups for different products by using metafields. Learn how to create and insert metafields for info popups below.

  7. Click Save.

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.

Steps

In your theme editor (Customize):

  1. Select a Products template to edit.

  2. In the Product overview section, click (+) Add block and select Information popup.

    Click on the block to open the block settings.

  3. Select an Icon to display next to the info popup link.

    (Optional.) Upload a Custom icon image to display next to the info popup link. We recommend a .png image with the dimensions 50px x 50px and a transparent background.

  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.

    You can display unique info popups for different products by using metafields. Learn how to create and insert metafields for info popups below.

  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, and the correct page will be used for the info popup when viewing different products on your online store.

See step-by-step instructions to display unique information popups for different products in our Metafields and dynamic sources article.

Product option information popup

Click on the Variant selectors block to find the following settings:

Configuration Settings

Icon

Select from 30+ available icons to display next to the info popup link.

Custom icon image

Upload your own icon image to display next to the info popup link.

We recommend a .png image with the dimensions 50px x 50px and a transparent background.

Option name

Add the exact option name of your product variants to display a popup link next to.

Change the label for the clickable link that opens the popup.

Content

Select the page you have created in your Shopify Admin for the popup content.

Information popup block

Click on the Information popup block to find the following settings:

Configuration Settings

Icon

Select from 30+ available icons to display next to the info popup link.

Custom icon image

Upload your own icon image to display next to the info popup link.

We recommend a .png image with the dimensions 50px x 50px and a transparent background.

Change the label for the clickable link that opens the popup.

Content

Select the page you have created in your Shopify Admin for the popup content.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.