Remove Collection name/title from homepage collection list

Store Design

Topic summary

A user wants to hide collection titles on their Shopify Dawn theme homepage while keeping collection images (which contain the title text) clickable.

Solution provided:

  • Add CSS code to the base.css file in the theme’s Asset folder
  • Initial suggestion: Set opacity: 0 on .collection-list-wrapper .card__content to hide titles while maintaining clickability
  • Follow-up refinement: Set height: 0 !important to remove the empty space below images while preserving click functionality

Alternative approach (not recommended):

  • Using display: none achieves the desired visual result but breaks clickability

Current status:

  • The solution successfully resolved the original poster’s issue
  • Some later users report mixed results when attempting the same fix
  • One user asks about applying the change only to the homepage rather than all collection pages (unanswered)
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I’am trying to remove the title of the collection list from showing, as i only want the Collection Image to show as it contains the collection name. see below image

my theme Dawn

Store URL: https://bforbaby.sa/

Screen Shot 2022-06-17 at 9.33.16 PM.png
Screen Shot 2022-06-17 at 9.33.16 PM.png1191×1083 257 KB

2

Hi @SAlawadhi ,

One way to do this and still keeping the image clickable is add the opacity = 0. Please follow the instructions below.

  1. In your Admin page, go to Online store > Themes
  2. Choose the theme you want to edit then click Actions > Edit code.
  3. Open the base.css under the Asset folder.
  4. Add the code below.
.collection-list-wrapper .card__content {
opacity: 0 
}
1 Like
3

Hello @SAlawadhi,

You need following simple steps

  1. In your Admin page, go to Online store > Themes
  2. Choose the theme you want to edit then click Actions > Edit code.
  3. Open the base.css under the Asset folder.
  4. Add the code below.
li.collection-list__item .card--standard>.card__content {
    display: none;
}

Output like this:

Screenshot_3.png
Screenshot_3.png1746×729 222 KB

4

Great, it worked. thank you so much

so, not possible to remove the space below and still be clickable!

i also tried the solution by MyCodeMagic below, and it gives the look i wanted, but not clickable which is of no use ofcourse.

5

works perfect as far as look required, but it became not clickable!

6

Hi @SAlawadhi ,

Yes, you can add this code below to your base.css.

.collection-list-wrapper .card__content {
    height: 0 !important
}
4 Likes
7

@made4Uo Perfect. thank you

8

Does this method still work? I have attempted this code but nothing seems to have changed.

1 Like
9

Same there, I tried with no luck!

10

Hi, is it possible to remove it only on homepage? check speedstyle.shop , it removes it from every other page, if you click on phone cases. thank you

11

Perfect! That worked for me. Thanks