Ingredient info on text hover for a beauty product brand

mybrightbody
New Member
1 0 2

Hi there! I have an indie beauty brand and would like to add in a feature where, when customers hover on an ingredient on our ingredient lists, it displays more information about the purpose and benefits and the EWG safety rating. You can see an example of what I'm talking about here with Hairstory.

I was hoping to find an app for this but it looks like I'll need to hire an Expert. Any guidance?

KetanKumar
Shopify Partner
23396 2354 8619

Hello, @mybrightbody 

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

Please share your site URL,
So I will check and provide a solution here.

 

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 Partner | 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
simplealchemyco
Tourist
6 0 1

I am looking for this exact solution as well. 
My Shopify store is: https://simplealchemyco.com/ (it's published, but not available for shopping yet). Any input would be much appreciated! Thank you!

KetanKumar
Shopify Partner
23396 2354 8619

@simplealchemyco 

please provide a preview URL and screenshot of where do you need it.

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 Partner | 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
simplealchemyco
Tourist
6 0 1
Sure thing!
Preview URL:
https://simplealchemyco.com/?key=31fd44b8fb6324170ef47b180f21337094a83903d57ffc4fc56b56c3500a2f37

We need this feature on all of our product pages, in the ingredients tabs
(pictured in screenshot). I was able to use HTML to create a text-on-hover
on one ingredient yesterday, but I deleted it after failing to successfully
edit the style. It was always black text on a gray background. We need it
to be Cream (#FAF6ED) text on a Charcoal (#302E2A) background, similar to
the Hairstory example provided earlier:
https://www.hairstory.com/products/new-wash/new-wash-original/, and
preferably with the same font (Source Sans Pro) as the rest of our body
text.

Thanks so much for your help!

0 Likes