Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
i have update my code its working fine animation please check
Hello,
Sure we can help you please share your store access.
Thank you,
Ramesh Jotva
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
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
unfortunately it is a client's account and I cannot give you access.
@KetanKumarwhat do you think about that ?
Thank you in advance
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 */
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
sorry, i can't see my code where do you have to add this?
At the end of the theme.css code folder as you asked me
if possible to to share store details DM so i will check
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);
}
@MaxCosta welcome sir thank you
Possible share shopify admin details i will check and fixed.
@MaxCosta Yes
@NinthonySir do you have any idea for this problem ? These code doesn't work for my request
Thank you in advance,
Max
Dear @MaxCosta
Hope the following suggestions will help you
/* Start */
.grid-product__price {position: relative; bottom: -15px;opacity: 0;}
.grid-product:hover .grid-product__price {bottom: 0px;opacity: 1;}
/* End*/
@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
/* Start */ .grid-product__price {position: relative; bottom: -15px;opacity: 0;} .grid-product:hover .grid-product__price {bottom: 0px;opacity: 1;} /* End*/
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!
This is an accepted solution.
i have update my code its working fine animation please check
perfect !! thank you infinitely
it's my pleasure to help us
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024