How can I display product prices on hover in my ecommerce site?

Store Design
1

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

2

Hello,

Sure we can help you please share your store access.

Thank you,

Ramesh Jotva

3

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

4

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

5

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

@KetanKumar what do you think about that ?

Thank you in advance

1 Like
6

@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 */
1 Like
7

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

1 Like
8

@MaxCosta

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

1 Like
9

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

Sans titre.png
Sans titre.png1619×845 40.3 KB

10

@MaxCosta

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

11
  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);
}

12

@KetanKumar done

13

@MaxCosta welcome sir thank you

14

@jotvark I’m so sorry but your code doesn’t work… :confused:

15

Possible share shopify admin details i will check and fixed.

16

@jotvark unfortenaly, I can’t…

do you have a code to add in my assets ?

17

@MaxCosta Yes

18

@Ninthony Sir do you have any idea for this problem ? These code doesn’t work for my request

Thank you in advance,

Max

19

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.
20

@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