How can I remove images from a collection list without changing the text?

Store Design

Topic summary

A Shopify store owner wants to remove images from their Collection List page while keeping the text centered in uniform square boxes. Previous CSS solutions only hid images, leaving formatting issues with stretched or misaligned cards.

Solutions provided:

  • Multiple CSS code snippets were shared to add to the base.css file
  • The working solution targets .collection-list__item .card elements with specific display and padding properties
  • This successfully removes images while maintaining uniform card sizing

Current status:

  • The original poster confirmed the solution works
  • New issues emerged:
    • One user reports description text no longer displays after applying the code
    • Another user asks how to apply this selectively to specific collections rather than all collections

The discussion remains open with these two follow-up questions unanswered.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
7

Hi @CabinetOfCards ,

Please add code:

.collection-list__item .card {
    display: flex;
    position: relative;
    align-items: stretch;
	flex-direction: inherit !important;
}
.collection-list__item .card:before {
    content: "";
    width: 0;
    height: 0;
    padding-bottom: var(--ratio-percent);
}

Hope it helps!

1 Like