How do i fully customize the collection list card content?

Store Design
,

Topic summary

Main issue: customizing collection list cards in a Shopify “Whisper” theme. The goal is to place card content inside the image at the bottom-left with a button and text above, and to remove the arrow. Edits to base.css and theme.css had no effect.

Key guidance: styles for collection list cards are defined in assets/component-card.css. Using Chrome DevTools (browser developer tools) reveals the relevant selectors and rules.

Action items:

  • Open assets/component-card.css in the theme editor to adjust card layout and content positioning.
  • Use Chrome DevTools to inspect elements and confirm which classes control the image, text, button, and arrow.
  • Modify or override the specific selectors in component-card.css to reposition content and hide/remove the arrow.

Notes: The user provided a live page link for context; no code snippets were shared. No conflicting opinions appeared.

Status: Partially addressed. Next step is editing component-card.css; further help was offered if positioning/removing the arrow remains unclear.

Summarized with AI on December 18. AI used: gpt-5.
1

Im pretty new to shopify but i have some experience coding html and css but i just can’t figure out how to change theese cards. I tried adding code to the base.css and theme.css but nothing happens. I want the card content on a collection list to be inside of the image on the bottem left corner with a button and the text above. Also how can i get rid of that annoying arrow? Would be nice to know where the css code for the cards & cards content is so i can fully customize them.

Im currently using the Whisper theme.

collection list link: https://clere-fitness.com/pages/mens

2

Hi there!

If you inspect your page using Chrome DevTools, you’ll notice that the styles for your collection list cards are coming from the component-card.css file.

You can find and modify this file by navigating to assets/component-card.css in your theme editor.

Once you locate the file, you’ll be able to customize the card content and layout as you like. If you’re still having trouble with the positioning or removing the arrow, feel free to reach out, and I’d be happy to assist further!