HowTo: Shopify Tooltip Help Icon Integrated in product options?

JoshuaRouillard
Tourist
5 0 0

Hey all!

I'm a freelance web designer and I'm trying to implement my code into Shopify but I'm not sure where to place it.
It even disappears from the webpage sometimes when I try.

Can someone take a look at my code and give me an idea of where I can place it?
The code: https://codepen.io/joshuarouillard/pen/zYwdJVr

I want this icon to be next to the "Magnification:" Option on this page - https://sureoptix.com/products/loupes

I know this question will help a ton of web developers/other Shopify clients.

This is on the debut theme.


0 Likes
Bunty
Tourist
102 24 60

What you have asked for requires quite of a lot of effort for someone to explain this to you. I'll just give you some bullet point answers to set you in the right direction

  • You are using the Debut theme, go to the store, click on Themes->Actions->Edit code and find 'product-template.liquid'
  • Find 'bcpo' in the code, it is likely to be a loop, so you will need to conditionally identify when it is a 'Maginification' variation type
  • This is where you will copy the code between the '<div class="wrapper">' element (including)
  • You can add the css here but I would suggest you follow best practice and add the css in theme.scss.liquid and also change the classname before you do so, to avoid any overlap

Hope this helps

JoshuaRouillard
Tourist
5 0 0

There's no value for 'bcpo' in product-template. Could you possible fork my code and write your own variation I could import over??

0 Likes