Create a Popup on The Product Page

Why Add a Popup on Your Product Page?

Popups on product pages are a smart way to deliver extra details right where customers need them without interrupting their shopping flow.

• Enhance the shopping experience: Customers can check important information instantly without leaving the product page.
• Remove buying friction: Details like size charts, shipping info, or return policies appear in one click, reducing hesitation.
• Increase conversions: A smoother, more seamless journey keeps customers focused on completing their purchase.

Popups are most effective when they provide shoppers with the right info at the right time, such as:

• Size chart/fit guide: Fashion retailers can use a size guide pop-up so customers can quickly check measurements without leaving the product page. This reduces returns caused by sizing issues.
• Shipping & returns policy: Beauty brands often display a pop-up with shipping and return details, giving customers clarity before checkout and boosting trust.
• Product materials or ingredients: Luxury watch brands highlight technical specifications in a pop-up, helping shoppers explore details without overwhelming the main product page.
• Limited-time offers or promotions: Retailers frequently launch promotional popups (e.g., “Buy 2 get 1 free” or “Free shipping today only”) directly on product pages to capture urgency and drive faster decisions.

How to Create a Product Page Popup with GemPages?

In GemPages v7, it’s easier than ever to design your own pop-up displayed on a product page using the available Popup Element. Follow these steps:

Step 1: Access GemPages Editor

• Log in to your Shopify admin and navigate to the GemPages Builder App in the Apps section.
• Go to Pages > Products to locate all your product pages built with GemPages.
• Click on a target product page to enter the editor.

Step 2: Add the element and configure your pop-up

• Once you locate the editor, enter “popup” in the search bar to find the Popup element.

• Drag and drop the element to your page. You’ll see its settings panel in the left sidebar.

• Configure the pop-up as you prefer, such as:

1. Resize your popup under the Size section. You can set it to full screen or adjust to the specific width & height.
2. Modify the background color or image in the Background section. For example, you can upload a size-chart image to create a fit-guide popup.
3. Select when your popup appears under the Display condition section.

For full instructions on configuring the Popup element, please refer to this article.

Step 3: Save and republish your page

• In the left corner of the top bar, save your updates and preview to ensure the pop-up displays properly.
• Click the Publish button to make the pop-up live.

Result: