Urgent - Price and title appear only when hovering over product image

ELYSIAN_CLO
Excursionist
39 0 2

Good morning all,

 

I have a big design problem on my Shopify site.

 

As of currently I figured out how to make the price and title to appear only when hovering over product image but the effect is on both desktop and mobile and I only want it on desktop. 

 

On mobile I have to double tap my image in order to get into the product details and I do not want that. 

 

Is there anyway for me to fix this?

 

My website: https://elysianclo.store/

 

Example website: https://aangellenos.com/

 

Example mobile site I wantExample mobile site I wantMy mobile siteMy mobile site

Replies 15 (15)

GemPages
Shopify Partner
5587 1260 1190

Hello @ELYSIAN_CLO ,

 

It's GemPages support team and glad to support you today.

 

Could you please share your store password then I can see and suggest something for you?

GemPages_0-1670290556928.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ELYSIAN_CLO
Excursionist
39 0 2

Sorry I forgot about that, password is peocki

GemPages
Shopify Partner
5587 1260 1190

Hello @ELYSIAN_CLO ,

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1670308732093.png

 

2. Open your theme.liquid theme file


3. Paste the below code before </head>

<style>
@media(max-width: 1024px){
 .product-card-wrapper .card--standard>.card__content .card__information {
   position: relative;
   opacity: 1;
   visibility: visible;
 }
}
</style>

 

For example,

GemPages_1-1670308898684.png

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ELYSIAN_CLO
Excursionist
39 0 2

It didn't work. Also my line 248 where you added the code is different from yours.

GemPages
Shopify Partner
5587 1260 1190

Hello @ELYSIAN_CLO ,

 

Could you please screenshot a picture of the position to that you added the code?

 

Best regards,
GemPages Support Team

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ELYSIAN_CLO
Excursionist
39 0 2

shopify mobile hover code.png

GemPages
Shopify Partner
5587 1260 1190

Hello @ELYSIAN_CLO ,

 

I know why my code can't work. Please fix the code a bit like that:

<style>
@media(max-width: 1024px){
 .product-card-wrapper .card--standard>.card__content .card__information {
   position: relative !important;
   opacity: 1 !important;
   visibility: visible !important;
 }
}
</style>

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ELYSIAN_CLO
Excursionist
39 0 2

Hi, it worked but now clicking on the image won't direct to the actually product page, it would only direct to the other page if I click on the title.

GemPages
Shopify Partner
5587 1260 1190

Hello @ELYSIAN_CLO ,

 

I checked and found that this is the code structure of this theme, the link only covers the title. You need to change the theme's code structure to fix it but it is a bit complicated.

 

However, when I checked directly on my phone, I clicked on the image so the page still direct to the actual product page.

 

Could you please double-check again?

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ELYSIAN_CLO
Excursionist
39 0 2

Hi, 

 

Thank you a lot for your help. I went kinda crazy trying to figure the coding out for it and ended up restarting everything. I reset everything to default and then starting code and customize again and it worked. I'm sure there was an easier way but I did the only way I knew how to.

GemPages
Shopify Partner
5587 1260 1190

Hello @ELYSIAN_CLO ,

 

Your issue has been handled and it sounds good.

 

I hope I can help you more the next time.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ryanbrown26
New Member
4 0 0

Hi, 

Can I please have your assistance in obtaining this similar feature. I was to hide product title and price on website but only have it show on hover. Do I need to change my theme for this or is it an issue of coding??

ryanbrown26
New Member
4 0 0

Hi, 

 

I am currently trying to figure out how to get the price and title to appear only on hover for my website. How did you manage to do this?

 

Thanks. 

 

ELYSIAN_CLO
Excursionist
39 0 2

Check the replies!

ryanbrown26
New Member
4 0 0

Yes, that seems to be just for changing the layout for your mobile phone. I'm trying to get the general concept of hiding price and title for items on website. Can't seem to figure out the codes, or was it a matter of changing theme??