Hide product title and price on collection page

Store Design

Topic summary

A user running the Craft theme wants to hide product titles and prices on collection pages while keeping product images clickable.

Initial Solutions & Issues:

  • Multiple CSS-based solutions were proposed targeting .collection.page-width .card__heading and .collection.page-width .price__regular
  • Early attempts either broke product links or created large empty spaces under images

Final Working Solution:
The issue was resolved by adding CSS code to the base.css file (Online Store → Theme → Edit code → Assets → base.css):

.collection .product-grid .card__content {
  position: absolute;
  opacity: 0;
  z-index: 3;
}

Key Requirement:
The solution needed to hide text elements without making images unclickable or leaving excessive whitespace.

Status: Resolved. The user confirmed the final CSS approach successfully hides titles/prices while maintaining clickable product images.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I’d like to hide the title and price on collection pages, how do I do that? I’m using the Craft theme.

Website is still pretty empty, but this is an example page: https://illulief.nl/collections/printable-allerlei

Thanks!

2

Hey @illulief

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1692340825673.png
Moeed_0-1692340825673.png1119×772 94.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

That worked, but now it won’t link to the product anymore :slightly_smiling_face:

4

Hey @illulief

Apologies, please remove the previous code and add this new code.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hello @illulief

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.collection.page-width .card__heading {
    display: none;
}
.collection.page-width .price__regular {
    display: none;
}
6

That works also, but now there’s a huge empty space under the image…

Scherm­afbeelding 2023-08-18 om 08.40.53.png
Scherm­afbeelding 2023-08-18 om 08.40.53.png464×888 132 KB

7

That worked, but now it won’t link to the product anymore

8

Hello @illulief

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.card__content {
    display: none;
}
9

that did nothing :confused:

10

Hello @illulief

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.card__content {
    display: none !important;
}
11

That worked, but the link to the product is gone again.. I think maybe what I want isn’t possible? :slightly_smiling_face: The reason I want it gone is because it’s HUGE.. maybe you can help me make it smaller?

12

Hi @illulief

Please use this code to hide product price and title also not make image unclickable.

.card__content { opacity: 0; height: 0; padding: 0 !important; }
1 Like
13

Hi @illulief

This is David at SalesHunterThemes.

Thank you for your question.
You can try follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

.collection .product-grid .card__content {
    position: absolute;
    opacity: 0;
    z-index: 3;
}
14

Yes, thank you so much :grinning_face_with_smiling_eyes: