HowTo: Shopify Tooltip Help Icon Integrated in product options?

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.

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 ‘
    ’ 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

1 Like

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

Hi @JoshuaRouillard ,

I have an easier solution for you to display tooltips next to your custom option names. By using the free Easify Product Options app, you can effortlessly create unlimited options and add tooltips as needed :hugs: .

Let me walk you through the process of setting up your options with tooltips:

That’s it! With just a few simple steps, you’ll have your tooltips neatly displayed alongside your custom options.

The Easify Product Options app goes beyond tooltips, offering a plethora of other features to effectively create and manage your options. Its user-friendly interface makes customization a breeze, providing you with all the tools you need to enhance your customers’ shopping experience.

Give it a try and explore the full potential of the app :raising_hands: !