Hide/Reveal Price and Title on product cards

sggallery · ‎03-03-2024

Hello!

I'm currently using the spotlight theme and would like to make the title and price of products hidden until you hover over the image. Upon hovering, the title and price would show on top of the image.

I've tried other codes provided for similar questions but have not had any luck. (Also very new to shopify and not well-versed in backend code, so could be user error.)

Thanks!

Dan-From-Ryviu · ‎03-03-2024

Hi @sggallery

I'm Dan from Ryviu: Product Reviews Q&A.

You can do that by adding this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
@media (min-width: 768px) {
.card--standard>.card__content { opacity: 0; }
.card--standard:hover>.card__content {
opacity: 1 !important;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎03-03-2024

Hi @sggallery

I'm Dan from Ryviu: Product Reviews Q&A.

You can do that by adding this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
@media (min-width: 768px) {
.card--standard>.card__content { opacity: 0; }
.card--standard:hover>.card__content {
opacity: 1 !important;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

sggallery · ‎03-04-2024

Thank you so much!

I would like for the title and price to show up on the image, instead of underneath. Is this possible?

PageFly-Theodor · ‎03-04-2024

Hi @sggallery ,
This is Theodore from PageFly - Shopify Page Builder App.

To hide product titles and prices until hovering over the image in your Spotlight theme, follow these steps:

Go to Online Store > Themes > Actions > Edit code (Spotlight theme).
Open the product-card.liquid file in the Assets folder.
Add the provided CSS code and save your changes.

Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

sggallery · ‎03-04-2024

Thanks for your response! A few questions below. (I'm very new to this all, clearly 😊 )

Are you replying to my original question, or the follow up question on how to get the product title/price to reveal on top of the image instead of underneath?
The CSS code you mention -- did you mean to paste one in your reply, or are you referring to the code provided by Dan-From-Ryviu?
Lastly, I'm not seeing the "product-card.liquid file" in the assets folder. Here's what I'm seeing below: