How to make a link that will open a pop up with a picture on every product page

Aleksandra
New Member
1 0 0

Hi all,

I am not technical person and I searched this forum but haven't found the answer :(

On every product page I would like to add a text/ link "See our return policy" that will open a pop up window with picture with return process.  I want to have it just under price information.

Can someone help me how to import that image and then which code should i write where to have it working?

Thank you in advance!

Aleksandra

 

Replies 6 (6)
Alex23
Shopify Staff (Retired)
521 1 106

Hey, Aleksandra!

I'm Alex, with the Shopify team!

No problem at all! First, what you'll want to do is upload that file to your Shopify admin. To do so, head in your admin to Settings > Files, and click on Upload files. There's more detail on that in our guide right over here!

Once done, you'll be able to use the URL you now see associated with that file to create your popup. There's instructions on there to add it as an image on your product page, but no problem if you'd prefer to have that as a link instead. There's more on that in our guide to using the Rich Text Editor, right over here. You can select it to open in a new window when adding your link!

If you'd prefer a popup rather than an entirely new window, that can be done, though it does involve a little more work with code. Click on the HTML view (there's more on that over here), and use the following code with that image URL:

<a href="YOURURLHERE" 
  target="popup" 
  onclick="window.open('YOURURLHERE','popup','width=600,height=600'); return false;">
    YOUR TEXT HERE
</a>

Hope that's helped! Please feel free to let me know, and you can always give us a call or start a live chat at any time. We're open 24/7 for your convenience and always happy to assist!

Cheers,

Alex | Shopify

Alex | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

A_A1
Tourist
3 0 4

Hi Alex,

I am getting a new window instead of a popup.

goforbrokedenim
New Member
1 0 2

I was following this tutorial and I am also getting a new window instead of a pop up. How can I fix this?

GregA
New Member
1 0 2

A popup is a new window are you wanting a modal window. When a modal window opens, it opens inside the current page. ... With popup windows, users can often miss them because they don't grab the user's attention. When users click the browser window, the browser window comes to the front and the popup window hides behind it. 

terendesigns
New Member
2 0 0

Hey,

Just stumbled upon this and successfully added in the popup. Is there anything unique or specific to make it a modal window? Super new to coding here but would like to have a mini window popup instead of taking the whole page and from my understanding that's a modal? 

 

Thanks!

Musette
Tourist
14 0 2

Wonderful info. Thank you. 

 

For those who want a smaller box, you may adjust the width and height. Here is what I did.

 

I followed Alex's instructions and pasted in the code. You see, I need a pop-up to be initiated ONLY when a customer clicks on a link. All the Shopify, third-party apps tend to pop up when the customer comes to my page.

 

Anywho, I changed the height to 300 but had too much space from top to bottom BUT my width looked great. So, and this is not intuitive, I changed the width to 500 and now my pop-up message looks great! Though it does appear as a new window and I would love it to appear as a true pop-up.

 

https://novatto.com/products/30-inch-single-bathroom-vanity-cafe-mocha-handles-nobv-30cm Click on "Product Guides" tab > California Proposition 65 to see how the pop-up worked.