Creating pop up size chart with JPG image

Hello,

I have a JPG image of a size chart that I would like to display as a pop-up on my product pages. When customers click on the “Size Chart” link, I want the image to appear without redirecting them away from the page. Could you please guide me on how to implement this feature?

Thank you!

Hi @Maxvdh not sure but i believe Shopify does allow adding popups. Haven’t used them myself so not sure.

One way I can definitely guide you is with code since I am a developer and that’s what I do.

What theme are you using? Please send any example of how you want it to be. Will definitely give it a try.

One of my client has this on their store. I am not sure that was it code or some app.

Here’s the link

kpsclothing.in

Hi @Maxvdh ,

What theme are you using? please send me the store link, I will check it for you

Hi Max,

If you’re comfortable with coding, the instructions below should guide you.

Since you mention this is a link, I assume that in the product page, and it shows up like this: Size guide

First, you’ll need to change its code into a container rather than a link. Then with CSS, style the text so that it looks like a link. Meaning, it has underlines, a blue color, all that, that depends on you. Then after that, you’ll need to add the image inside the parent container alongside the link, but make the image hidden with CSS. Then with Javascript, write the necessary code so that it will reappear on the page.

Then after that, you should have what you’re looking for. Hope this helps!

If you’re looking to avoid coding it yourself and have someone code it for you, I’d be happy to do this for you for a fee. My price for this service is $20. Let me know if you’re interested and if you have any questions, feel free to ask :slightly_smiling_face:

Hi @Maxvdh :raising_hands:

You already have a JPG size chart image and want to display it as a popup directly on the product page. In other words, when customers click the “Size Chart” link, the image should open in a small modal for quick viewing - without redirecting them away from the product page. You’re looking for guidance on how to set this up. With Easify Product Options, you can achieve this exact flow using the Modal/Popup option.

  • This is the app setting:

You just need to create an Option Set for the product, add a Modal/Popup option, and set the Option label to “Size Chart” (or “Size Guide”) so it shows as a link/button on the product page. Then, in the Content section, simply insert your JPG size chart image- done. When customers click it, the popup will open instantly on the same page.

In the Modal option settings, you can fine-tune the popup to look cleaner and match your design - such as setting a Popup title and adjusting the Popup width so the image fits nicely on screen. If you’d like it to look more polished, you can also go to Advanced settings to add a Modal Image (an icon) and adjust the Image/Icon Size, so the “Size Guide” link appears clearer and more professional instead of being plain text.

Once everything is set up, assign this Option Set to the products you want it to apply to. The result is exactly the experience you’re looking for: customers click “Size Guide” => the popup opens to show the image => They close it and continue selecting a size or adding to cart, all on the same product page.

Whether you’re new or experienced, this app makes product customization a breeze. Easify’s team is always there to guide you and make sure things work perfectly.:smiling_face_with_three_hearts: