How To Have a Link To an Image Popup On Product Page?

Store Design

Topic summary

A user wants to add clickable text on their Shopify product page that triggers an image popup (rather than navigating to a new page). They reference an example from another store but cannot find documentation on implementing this feature.

Solution provided:

The implementation requires two components:

  • A custom popup element to display the image
  • Custom code to trigger the popup on text click

Step-by-step process:

  1. Add popup code: Navigate to Shopify > Online Store > Customize, switch to Product template, add a Custom Code section with HTML/CSS for the popup (replacing the image source with desired URL)

  2. Add trigger link: Edit the Product Description in HTML mode and insert an anchor tag that triggers the popup when clicked

Note: The conversation includes code snippets and screenshots (some text appears reversed/encoded). For simpler alternatives, the responder suggests searching the Shopify app store for “Size Chart” or “Size Guide” apps if that matches the use case.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hey, I want to be able to add some text on my product page that when you click it, an image pops up. (See attatched photos) I can link the store below but when the text was clicked, an image popped up instead of changing the whole page. I would want to do it like that. The store in the pictures did it but I can’t find anything about it online so please tell me if you know how this can work. I would prefer it to be exactly like the other one. Thanks! https://paintyourpet.com/products/3d-customized-ugly-pet-pillows

2

I can’t see any attached photos. Please try attaching them again or describe the issue so I can assist better!

3

467013284_1171302517964482_743093463064048192_n.jpg
467013284_1171302517964482_743093463064048192_n.jpg480×1039 46.5 KB

462646940_596438632896663_781487659529422729_n.jpg
462646940_596438632896663_781487659529422729_n.jpg480×1039 52.4 KB

4

To meet the need for adding text to the product page that, when clicked, opens a popup instead of redirecting to a link, you require:

  1. A pre-existing popup to display the image.
  2. Custom code to trigger the popup when clicking on the text.

This requires custom coding across multiple sections to implement.

However, if your goal is to create a button that shows a Size Chart or similar guide, you might consider searching for apps using keywords like “Size Chart” or “Size Guide”.

Let me know your specific requirements, and I’ll help you further!

5

How would I do either of those?

6

@truemonkeman To meet your need, the process can be quite complex. However, I’ll guide you through creating a simple demo.

I hope this helps you to some extent :sweat_smile: :sweat_smile: :sweat_smile:

Goal 1: Add a Popup Containing an Image

  1. Log in to Shopify > Online Store > Customize (https://prnt.sc/frbCl4va0rvv)
  2. Switch to the Product template. (https://prnt.sc/SzWhmft4ViET)
  3. Add a Custom Code section.
  4. Copy and paste the following custom code, replacing the src in the tag with your image link:
  5. Save your changes.

  

    
![Popup Image|1600x900](upload://e9f0wtGXguBRQhpSnKHJ3BD03i7.jpeg)

Goal 2: Modify the Text Link in Your Product Description

  1. Go to Products and edit the desired Product Description. (https://prnt.sc/txSR2TXUCtDO)

  2. Switch to Edit HTML mode in the description editor.

  3. Copy and paste the following tag, replacing the text as needed:

  4. Save the Product Description.

Click to view image

Result:

ecoboostify_0-1734711962755.png