How to remove the titles from collections categories?

Technical Q&A

Topic summary

A user seeks to remove collection titles from their Shopify Dawn theme because they’re creating custom graphics with embedded titles. The default titles appear below collection images and need to be hidden.

Initial Solutions Attempted:

  • Adding CSS to hide titles in base.css using .collection-list-wrapper .card__content { position: absolute; height: 100%; opacity: 0; }
  • This successfully removed titles but broke clickability—collection images became non-interactive

Working Workaround Provided:
Since removing titles eliminated the clickable links, a creative solution was offered:

  • Increase the font size of collection titles to ~50px
  • Make text color transparent
  • Position titles absolutely to cover the entire image area
  • This preserves clickability while hiding visible text
  • Cursor changes to pointer on hover, indicating the link remains functional

Current Status:
The workaround maintains both visual preferences (hidden titles) and functionality (clickable collections). A proper developer solution would involve adding direct links to the images themselves, but the transparent overlay method serves as an effective interim fix.

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

I plan on making graphics for each collection that include the title as part of the design. So, I will need to remove the title that is displayed below the collection image. How can I remove them?

aliaameid_0-1708811570438.png
aliaameid_0-1708811570438.png901×421 159 KB

I use the theme Dawn for my website. I’ve already tried out solutions from previous forums regarding this issue but nothing seems to work. The most recent attempt was implementing the following code into the bottom of the base.cc Theme code file. This did not work for me so I removed it.

.collection-list-wrapper .card__content {
  position: absolute;
  height: 100%;
  opacity: 0;
}

Here is the current theme settings for the collections list page for reference:

aliaameid_1-1708811620647.png
aliaameid_1-1708811620647.png271×423 12 KB

Store URL: www.daralia.co

1 Like
2

Hi @aliaameid

Would you mind to share your store URL? thanks!

3

Here it is: www.daralia.co

4

its password protected.

5

Sorry, password is now removed

1 Like
6

Thanks! check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

div#shopify-section-template--19229892739347__main h3.card__heading {
    display: none;
}

And save.

Result:

Made4uoRibe_0-1708815363231.png
Made4uoRibe_0-1708815363231.png1212×779 121 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Hi @aliaameid

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

8

Thank you! That worked to remove the titles, however, now the image is not clickable to lead me to the individual collection list.

1 Like
9

You’re solution does not work because now I cannot click on the individual collection categories…

10

Oh you didnt tell that you like to remain the links. For that you need a developer that can add a link to the image. But I have a silly idea, you can used if you like to.

On this only the text you can add the link for the collections. So what I did, I make it larger the font.

Made4uoRibe_0-1709051322929.png
Made4uoRibe_0-1709051322929.png1104×753 330 KB

I make the font cover the collection images and hide it.

Made4uoRibe_1-1709051379080.png
Made4uoRibe_1-1709051379080.png1052×737 292 KB

the cursor will change into hand that identifies its clickable. And Arrow is not.

i use this code.

.collection-list__item.grid__item h3.card__heading {
    position: absolute;
    top: 20%;
    color: transparent;
    left: 20%;
    font-size: 50px;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!