Small Tooltip Next to Product Variant Headers

caseymac
New Member
1 0 1

I've searched far and wide, but just cannot find a solution or an app for what I want. 

I would like to place a small icon (a small circle with an 'i' in it for "Info") next to some of my product variant headers. When a customer hovers over the icon, it will pop up a box describing the variant in more detail. The description will be mostly text, but could possibly include a small thumbnail square photo around 200px wide/high. 

An example of my product page is here: 
https://caseymacphoto.com/collections/prints/products/colorado-sand-dunes

Imagine next to FRAME was the 'i' icon when hovered over described in more detail what the customer could expect. 
Appreciate all insight in advance! 


KetanKumar
Shopify Partner
16169 1773 5957

@caseymac 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

try this

https://codepen.io/fabriceleven/pen/KdveeO

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Mircea_Piturca
Shopify Partner
1475 42 301

Hi @caseymac 

You can try a custom code approach and display that tooltip on the variant input label. This can work well if you have just a few products. But scaling this to multiple products will be a problem.

I can recommend an app that may help (I am the app developer). Please see: https://apps.shopify.com/dynamic-variant-description

The approach would be to define a custom description for each variant. When the customer changes the variant, the description will change. You can provide more details for each individual variant this way. It is a different approach but may work well in your case. There are few demos on the App Store listing provided.

Please let me know if you have any questions. Happy to help out.

Finally—Add variant descriptions to your products
0 Likes