Urgent - Show the price on hover

[MaxCosta]

Good morning all,

I have a big design problem on my Shopify site.

I wish the prices of my products would only appear when you hover the mouse over them.(on de

I'm talking about the "Featured Collection", on home page and collection pages.

Exactly like on this site:  https://www.eliou-eliou.com/

Here is the overview of my current site : https://a852kxbbwvis7di3-47455862950.shopifypreview.com

If you did not understand or if you have questions, do not hesitate! thank you in advance

[jotvark]

Hello,

Sure we can help you please share your store access.

Thank you,

Ramesh Jotva

[MaxCosta]

Hello, thank you for you feedback.

My website adress : https://a852kxbbwvis7di3-47455862950.shopifypreview.com

He's not online for the moment

thank you in advance

[jotvark]

Hello sir,

Yes i know but without access i can't fixed your issues.

May I send collaborator account access on your store from my partner account.

Thank you,

Ramesh Jotva

[MaxCosta]

unfortunately it is a client's account and I cannot give you access.

@KetanKumarwhat do you think about that ?

Thank you in advance

[KetanKumar]

@MaxCosta 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (min-width: 768px) {
.grid-product__price {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.grid-product__content:hover .grid-product__price {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
}
/* This code apply to desktop because mobile device hover convert to click so doesn't good thinks make your do you understand this */

[MaxCosta]

Thank you @KetanKumar for trying help me but it doesn't work.

I copied the code as you asked me but nothing changes on my site: https://a852kxbbwvis7di3-47455862950.shopifypreview.com

[KetanKumar]

@MaxCosta 

sorry, i can't see my code where do you have to add this?

[MaxCosta]

At the end of the theme.css code folder as you asked me

[KetanKumar]

@MaxCosta 

if possible to to share store details DM so i will check

[MaxCosta]

@KetanKumardone

[jotvark]

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

a.grid-product__link .grid-product__price {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
a.grid-product__link:hover .grid-product__price {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}

[jotvark]

@MaxCosta welcome sir thank you

[MaxCosta]

@jotvarkI'm so sorry but your code doesn't work... 😕

[jotvark]

Possible share shopify admin details i will check and fixed.

[MaxCosta]

@jotvark  unfortenaly, I can't...

do you have a code to add in my assets ?

[jotvark]

@MaxCosta Yes

[MaxCosta]

@NinthonySir do you have any idea for this problem ? These code doesn't work for my request

Thank you in advance,

Max

[MS-WEB-DESIGNER]

Dear @MaxCosta 

Hope the following suggestions will help you

• From your Shopify admin, go to Online Store > themes
• Locate your current theme and then click Actions > Edit code
• After that in the Assets folder, click to open your theme.scss.liquid file
• Go to the very bottom of this file and paste the following code

/* Start */
.grid-product__price {position: relative; bottom: -15px;opacity: 0;} 
.grid-product:hover .grid-product__price {bottom: 0px;opacity: 1;} 
/* End*/

• Save and check your theme by refreshing it.

[MaxCosta]

@MS-WEB-DESIGNER Thank you very much for your answer, it works !! Is it possible to leave this only on dekstop? and deactivate it on mobile? 

I would also like to remove the seller's name "Grigri Beads" from the Featured Collection of my Home page (And Collection Page).. do you think this is possible? I want to keep it only on product page

My last problem that I can't solve is setting the price (only) in color # EA731C.

If you think you can help me with this, it would save my life ...!

Thank you in advance

[MaxCosta]

/* Start */
.grid-product__price {position: relative; bottom: -15px;opacity: 0;} 
.grid-product:hover .grid-product__price {bottom: 0px;opacity: 1;} 
/* End*/

@MS-WEB-DESIGNER 

Please guys How can I make this code effective only on desktop? 

I want the prices to be simply displayed on the mobile version.

My website : https://93pz2de4x1u8o6zs-47455862950.shopifypreview.com

thank you in advance!

[KetanKumar · Accepted solution]

@MaxCosta 

i have update my code its working fine animation please check

[MaxCosta]

perfect !! thank you infinitely

[KetanKumar]

@MaxCosta 

it's my pleasure to help us