Solved

HowTo: Shopify Tooltip Help Icon Integrated in product options?

JoshuaRouillard
Tourist
12 1 2

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.


Accepted Solution (1)

Bunty
Shopify Partner
133 39 82

This is an accepted solution.

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

View solution in original post

Replies 3 (3)

Bunty
Shopify Partner
133 39 82

This is an accepted solution.

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
12 1 2

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

EasifyApps-Zoe
Shopify Partner
582 14 40

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 🤗.

 

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

 

EasifyAppsZoe_0-1688204603590.png

EasifyAppsZoe_1-1688204696039.png

EasifyAppsZoe_2-1688204710037.png

 

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 🙌!

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support