I would like to add a whats the difference button, when clicked it pops up a paragraph. This is the image for reference. I would like it to be on the far right side.
Hello @LUCENARA ,
Here are the steps to add the button and you can change the styles and move the inline css to external files according to your needs:
1. Upload the Image to Shopify Files- Go to Shopify Admin > Content > Files
-
Upload your image (yourimagename.png)
-
Copy the file URL (you’ll use it below)
2. Edit Your Theme Code
Go to:
Online Store > Themes > Actions > Edit Code
Locate: product.liquid, main-product.liquid, or product-template.liquid
(whichever your theme uses for product pages)
My product page is main-product.liquid and I have added it below Buy buttons
3. Add the Button and Popup HTML
4. Add the JavaScript
Scroll to the bottom of the same file (or paste into theme.js, depending on your theme) and add:
I have added it to Theme.liquid before closing of the head tag.
Now, the image will appear, whenever you click the button.
If you stuck somewhere, feel free to message me or reply here.
Hi @LUCENARA
in some themes this could be done by repurposing the “size chart” feature with a specific image and changing the wording in the translation settings.
Or by using collapsible-row sections/blocks though that will lack a “popup” behavior and just be an accordion type of display.
Otherwise it can be an advanced customization to setup properly with custom settings and specific content per product, etc.
If you need this customization then contact me for services.
Contact info in forum signature below
.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.




