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

[ELYSIAN_CLO]

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 wantMy mobile site

[GemPages]

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?

Best regards,
GemPages Support Team

[ELYSIAN_CLO]

Sorry I forgot about that, password is peocki

[GemPages]

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

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,

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

Best regards,
GemPages Support Team

[ELYSIAN_CLO]

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

[GemPages]

Hello @ELYSIAN_CLO ,

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

Best regards,
GemPages Support Team

[ELYSIAN_CLO]

[GemPages]

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

[ELYSIAN_CLO]

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]

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

[ELYSIAN_CLO]

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]

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

[ryanbrown26]

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]

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]

Check the replies!

[ryanbrown26]

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??