Solved

Text box on metafield image

stefanensko
Excursionist
43 0 6

stefanensko_0-1712155708383.png

As you can see in the image, i've added image to let people know if the product contain allergen

This is made using metafield

How to add a hover text box to let people know what the image is about?

Example the third symbol is "no caffeine", if you click on it or hover with the mouse i would like to have a box written "no caffeine"

stefanensko_1-1712155832612.png

 

Accepted Solution (1)
Liqiud_xPert_SJ
Shopify Partner
815 101 129

This is an accepted solution.

this will be your code structure and css please update accordingly

 

<div class="allergen-image"> 
<img class="allergen-img" width="auto" height="auto" src="//danicoffeeshop.com/cdn/shop/files/senza_lattosio.svg?v=1712151485"> 
<span>Test</span> 
</div>
<style>
 .allergen-image {
	position: relative;
}
.allergen-image span {
	display: none;
}
.allergen-image:hover span {
	display: block;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}
</style>

 

Result:

2024-04-03 20_17_29-Window.png

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

View solution in original post

Replies 8 (8)

Liqiud_xPert_SJ
Shopify Partner
815 101 129

@stefanensko 

i dont have your store URL but i am suppose to use the structure of HTML, CSS, Hope you will understand how to do that with your own structure.

 

<div class="pro-info">
<img src="image.png">
<span>no caffeine</span>
</div>
<style>
.pro-info{
	position:relative;
}
.pro-info span{
	display:none;
}
.pro-info:hover span{
	display:block;	
}
</style>

 

 

thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
stefanensko
Excursionist
43 0 6

Sorry, my fault

 

www.danicoffeeshop.com

Liqiud_xPert_SJ
Shopify Partner
815 101 129

@stefanensko  never mind any product having these icons?

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Liqiud_xPert_SJ
Shopify Partner
815 101 129

This is an accepted solution.

this will be your code structure and css please update accordingly

 

<div class="allergen-image"> 
<img class="allergen-img" width="auto" height="auto" src="//danicoffeeshop.com/cdn/shop/files/senza_lattosio.svg?v=1712151485"> 
<span>Test</span> 
</div>
<style>
 .allergen-image {
	position: relative;
}
.allergen-image span {
	display: none;
}
.allergen-image:hover span {
	display: block;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}
</style>

 

Result:

2024-04-03 20_17_29-Window.png

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
stefanensko
Excursionist
43 0 6

Perfect, how do i activate this also for touch screen device? If you click on the allergen, appear the text

stefanensko
Excursionist
43 0 6

Another problem

As you can see here

https://danicoffeeshop.com/products/orzo-naturale?_pos=3&_psq=orzo&_ss=e&_v=1.0

hover the first icon, the text isn't on the same line, creating an overlap

theycallmemakka
Shopify Partner
1477 336 360

Hi @stefanensko ,

 

We will have to add custom JS to make this possible. I have made this on my store. Please review it and let me know if this is something you want.

Site:https://mangit.myshopify.com/products/grayscale-camo-hybrid-baggy-pants-in-light-blue

theycallmemakka_0-1712158054833.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com