Impulse theme 7.6.1 | hide prices on collection pages

Store Design
, ,
1

Hello,

I would like to hide the prices on the collection pages and when the images is hovered over they are revealed.

www.zenniam.com

any help to change this would be great.

many thanks,

Amy

2

Hey @Zenniam_Amy ,

To hide prices on collection pages and reveal them when an image is hovered over, you’ll need to modify the CSS and possibly adjust your collection page template in the Impulse theme. Here’s how you can achieve this:

Follow these Steps:

  1. Online Store

  2. Themes

  3. Edit code

  4. Find the file where your theme’s CSS is located (usually in Assets/theme.css or Assets/theme.scss.liquid).

  5. Add the following code at the bottom of the file:

/* Hide prices by default */
.collection-grid__item .price {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Reveal prices on hover */
.collection-grid__item:hover .price {
  visibility: visible;
  opacity: 1;
}
  1. Ensure Prices Are Correctly Targeted:
  • Check if your theme uses the price class for the price element. If not, inspect your page using the browser developer tools (right-click the price, then select Inspect) to find the correct class. Replace .price in the code above with the appropriate class.

If you want the price to appear in a specific position (e.g., under the image or overlayed), you might need to adjust the CSS further. Let me know if you need help with that!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

3

Hi @Zenniam_Amy , to do that, please follow our instructions:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find theme.css file

Step 3: Paste this code at the bottom of the file

.collection-grid__wrapper .grid-product__content .grid-product__price {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.collection-grid__wrapper .grid-product__content:hover .grid-product__price {
    opacity: 1;
    visibility: visible;
}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you :heart_eyes: