A Tag not covering entire collection card in collection list - Dawn Theme

Store Design
, ,
1

Hello, I am having an issue with my collection list. I set the display for .card__heading to none because I did not want the collection name to display below the image, because the image has the name in it. Doing this has caused the A tag on the card to not cover the entire card, so you must click the top half of the card for it to actually work (shown in screenshot below). I want to make the entire card clickable. I have tried wrapping it in an A tag, but for some strange reason, the A tag is unable to wrap around the card.

My site: website - scroll about halfway down to find the collection list. Dawn Theme.

RamenGlow_0-1684695373055.png
RamenGlow_0-1684695373055.png784×436 81.3 KB

2

To make the entire card clickable in your collection list, you can modify the code of your theme. Here’s a general approach you can take:

  1. In your Shopify admin, go to “Online Store” > “Themes”.

  2. Find the Dawn theme you are using and click on the “Actions” dropdown menu.

  3. Select “Edit code” from the dropdown menu to access the theme’s code editor.

  4. In the code editor, locate the file that contains the code for rendering the collection list. It could be something like collection-list.liquid or collection-grid-item.liquid.

  5. Look for the HTML structure that represents each collection item in the list. It might be wrapped in a <div> element with a class like .collection-item or .collection-card.

  6. Find the code responsible for rendering the card’s heading or collection name. This code might include a <h2> or <h3> element with a class like .card__heading or .collection-name.

  7. Remove the display: none; property from the CSS rules targeting the card’s heading element.

.card__heading {
  display: none;
}
3

I want the card heading to be hidden though. I don’t want it shown.