How can I hide product titles from the product grid in the Dawn theme?

Store Design

Topic summary

Issue: Users want to hide product titles in the Dawn theme’s product grid (on collection and catalog pages) while maintaining clickable product images.

Initial Solution: Add CSS code to the base.css file:

div#ProductGridContainer .card__heading {
    display: none;
}

This successfully hides titles but creates an unintended consequence.

Problem: Multiple users report that hiding titles using the provided code breaks the clickable link functionality on product images, preventing customers from accessing product pages.

Alternative Approach: One user suggests using Custom CSS with font-size set to 0px instead:

.collection .card__heading {
    font-size: 0px !important;
}

Status: The discussion remains unresolved. The core issue of maintaining clickable images while hiding titles has not been definitively solved. Several users are still seeking a working solution that preserves both the hidden titles and functional product links.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I am using Shopify dawn theme. In my catalog page, I have all the products on my store displayed using a functionality ‘Product Grid’ to display Products with images and title. Same is on collections page.

I would like to hide the title from the Product grid. It is not a UI customizable option and I cant figure out the code.

Thanks in advance

1 Like
2

Hi @Sunshine10

To hide the product title in your collection, please follow the instructions below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
div#ProductGridContainer .card__heading {
    display: none;
}
1 Like
3

Oh my God, worked like a charm. I spent so much time trying to figure it out. Thank you so much.

1 Like
4

Is there a way to hide the title but still allow the user to click on the image and go to the product page? I hid the title by pasting the above code into the custom css section on the product grid.

1 Like
5

Hey @made4Uo

Followed the steps and edited the base CSS, it seems like by inputting the code into the editor it removes the link connected to the image and text to go to the products page entirely (after successfully getting rid of the text). I was wondering if there’s a fix for this or is the link embedded into only the text alone.
Id like to have my customers to be able to still click the image to get to the product.
Thanks :slightly_smiling_face:

1 Like
6

Hello, did you receive any solution from this?

7

I was also looking for this solution!

I am a Shopify amateur so please keep that in mind but (hopefully) worked out the below for myself and cross fingers it appears to be working.

I entered the below into the Custom CSS for my product grid

.collection .card__heading {
font-size: 0px !important;
}

8

I added the code according to this method and hid the title, but I still can’t access the product link when clicking on the picture. How can I solve this problem?