Show name on Hover

Solved
Highlighted
Excursionist
20 0 4

Hello,

 

Id like to make Name show on Hover please. The theme doesn't offer it, only does for price.

 

Heres the link:https://vivorosa.com/collections/newarrivals

 

Thank you!

Highlighted
Shopify Partner
9527 1200 3352

This is an accepted solution.

Hello, @waleed-kbt 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.ProductItem__Info {
opacity: 0;
transform: translateY(10px);
transition: all 0.35s ease-in-out;
}
.ProductItem:hover .ProductItem__Info {
opacity: 1;
transform: translateY(0);
}
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
Highlighted
Excursionist
20 0 4

Thank you so much for your help

0 Likes
Highlighted
Shopify Partner
9527 1200 3352

@waleed-kbt 

Thanks 

If helpful then please Like and Accept Solution.

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
Highlighted
Excursionist
20 0 4

Hello,

 

Any chance i can unhide the name on the mobile version? 

 

Thank you!

Highlighted
Shopify Partner
9527 1200 3352

Hello, @waleed-kbt 

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 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
Highlighted
Excursionist
20 0 4

vivorosa.com

 

The first code you sent worked on both desktop and mobile version, however id like to be only for desktop if possible. 

 

Thank you

Highlighted
Shopify Partner
9527 1200 3352

This is an accepted solution.

@waleed-kbt 

Thanks for update 

yes, please add this code only desktop

Thanks for your post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (min-width: 641px) {
.ProductItem__Info { opacity: 0; transform: translateY(10px); transition: all 0.35s ease-in-out; } 
.ProductItem:hover .ProductItem__Info { opacity: 1; transform: translateY(0); }
}
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
Highlighted
Excursionist
20 0 4

Thank you very much

Highlighted
Shopify Partner
9527 1200 3352

This is an accepted solution.

@waleed-kbt 

Thanks for update and support.

 

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