Removing headers from collection list in dawn theme

Store Design
, , , ,

Topic summary

A user needed to hide collection titles from a collection list in the Dawn theme. Their initial CSS attempt made the collection images unclickable.

Solutions Provided:

Multiple developers suggested adding CSS to component-card.css:

  • ZestardTech: Hide titles using .collection__title { display: none; } in base.css

  • EBOOST: Position overlay approach using absolute positioning with zero opacity on .collection-list__item .card__content and .card--standard > .card__content

  • PageFly-Richard: Target specific elements with:

    • .collection-list .card__heading a .icon-wrap { display: none; }
    • .collection-list .card__heading a { font-size: 0 !important; }
    • .collection-list .card__information { padding: 0 !important; }

Outcome:

The issue was resolved successfully. The user confirmed one of the solutions worked, though they didn’t specify which approach they implemented. GemPages requested the collection page link for a more precise solution, but this wasn’t needed as the problem was already solved.

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

I’m trying to remove the collection names from a collection list.

I looked up some old forum discussions and tried adding this to the component-card.css

.card--standard>.card__content {
display: none;
}

&

#shopify-section-template--15905430438056__1663389051150b1907 .full-unstyled-link {
color: transparent !important;
}

But it ends up making the collection images unclickable so I’m not sure what to do.

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.collection__title{
 display:none;
}
3

Hi @Nemat_DC

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. component-card.css
  3. Add code below to bottom of file
.collection-list__item  .card__content,
.card--standard > .card__content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
1 Like
4

Hello @Nemat_DC

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the collection page link?

5

Hi @Nemat_DC ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-card.css->paste below code at the bottom of the file:

.collection-list .card__information {
    padding: 0 !important;
}
.collection-list .card__heading a {
    font-size: 0 !important;
}
.collection-list .card__heading a .icon-wrap {
    display: none;
}

I hope it would help you
Best regards,

Richard | PageFly

6

This worked. Thanks a lot :slightly_smiling_face:

1 Like