How to create a "more info" popup widget on product page

How to create a "more info" popup widget on product page

sibouss
Excursionist
51 0 4

I would like to replicate this information widget from https://www.linjer.co/en-ca/products/diamond-curved-bar-necklace-14k-gold-jemma (refer to screenshot below)

 

I'd like to make it so it says "Compare to ${{insert product price 10x the amount of my product} Estimated for Natural Diamonds"

 

I'd also like to create the "i" icon where users can click on it and have a pop up with more information that I could design.

 

Any help would be appreciated or recommendations if this can be done via an app that already exists. My website is 578f0e-a2.myshopify.com

 
Screenshot 2024-07-02 at 6.44.23 PM.png

Replies 7 (7)

sahilsharma9515
Shopify Partner
1266 165 244

Hi @sibouss if you just want to add this text in then this can be done with the help of custom coding and metafields, you don't need any app for this as this can be done without the third party app.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


sibouss
Excursionist
51 0 4

yes I know how to add text, the hard part is the "info" icon with the popup that I dont know how to create

sibouss
Excursionist
51 0 4

as well as to do the automatically calculation of 10x the product price for whichever product page your are on

sahilsharma9515
Shopify Partner
1266 165 244

Hi @sibouss to add the info icon and popup you need to add the svg icon in front of the text.

You can find the base code here: https://codepen.io/hajududat/pen/VqpxgG

 

without looking into the code files I will not be able to provide you the exact code.

 

Also for automatic calculation you need to add the javascript code on the theme files.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


sibouss
Excursionist
51 0 4

could you please implement it for me?

sahilsharma9515
Shopify Partner
1266 165 244

Hi @sibouss Yes I would love to implement the same for you, you need to provide the access of your store so that I can implement it on your store.

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


sibouss
Excursionist
51 0 4

you can send a collaborator request