Collection List Images in Dawn theme are only clickable on part of image

[KimberliMae]

Hi,

I have collection lists on the homepage of the Dawn theme that are clickable, but only on a small part of the image. The customer would have to know to click in the very middle of the image, otherwise if you click anywhere else on the image nothing happens. 

Is there a way that I can make the entire image clickable to the collection page?

[Dan-From-Ryviu]

Hi @KimberliMae 

Could you share your store link to check? 

[KimberliMae]

My store is https://aerimae.com

[Dan-From-Ryviu]

Please add this code to your theme.liquid file before </head> tag

<style>
#shopify-section-template--21495066296608__3a6a01f8-0aec-4fab-983e-08d8f54a015f .card--card.card--media>.card__content {
    height: 100%;
    top: 0px !important;
}
#shopify-section-template--21495066296608__3a6a01f8-0aec-4fab-983e-08d8f54a015f .card__content .card__heading a {
position: absolute;
top: 0px; 
bottom: 0px;
left: 0px;
right: 0px;
}
</style>

[KimberliMae]

This worked for one of my collection lists, but not for the other one. Is there a way to make it so all collection card images are clickable? Thanks!!

[Dan-From-Ryviu]

Hi, if you want to make it works for all then please update code to this

<style>
.card--card.card--media>.card__content {
    height: 100%;
    top: 0px !important;
}
.card__content .card__heading a {
position: absolute;
top: 0px; 
bottom: 0px;
left: 0px;
right: 0px;
}
</style>

[KimberliMae]

Hmm, now none of the Collection Images are clickable (except for the very middle part where there appears to be an invisible button), and all the product titles are on top of the product images on the home page and in collection pages. 

[KimberliMae]

So I plugged the code into Chatbot GPT and the suggestion that it provided worked. I am posting here for anyone else who may be looking for a similar solution.

The following is pasted from ChatbotGPT 4.0:

The card-collection.liquid snippet you provided already contains the necessary structure to make the collection titles clickable. The <a> tags are already in place around the collection titles, with their href attributes correctly pointing to the collection URLs.

If you want to make the entire card clickable, not just the title, you need to adjust the structure slightly. Here's a suggested modification:

1. Wrap the Entire Card in an Anchor Tag: You can modify the snippet to wrap the entire card content (including the image and text) in an anchor tag.

   • Locate the opening <div class="card-wrapper ..."> tag.
   • Before this tag, start an anchor (<a>) tag with the href attribute set to {{ card_collection.url }}.
   • Close the anchor tag after the closing </div> of card-wrapper.

   The beginning of your modified code would look something like this:

{%- if card_collection != blank -%}
  <a href="{{ card_collection.url }}" class="full-width-link">
{%- endif -%}
<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">

After </div> would look like this:

</div>
{%- if card_collection != blank -%}
  </a>
{%- endif -%}

• Adjust CSS for New Structure:

  • You might need to adjust your CSS to ensure the layout remains consistent after this change. Specifically, you'll want to ensure that the a tag doesn't disrupt the layout and that the hover and click effects are correctly applied.
  • You can add styles to .full-width-link (the class added to the anchor tag) to handle any needed styling adjustments.

• Test Your Changes:

  • After making these changes, save the file.
  • Test the functionality in your store's front end to ensure that the entire card is clickable and leads to the respective collection page.

Remember, modifying theme code can be complex, and it's always recommended to back up your theme before making any changes. If you're not comfortable with these changes, consider reaching out to a Shopify expert or developer for assistance.

[Dan-From-Ryviu]

Awesome.

[ProconMarketing]

Hi @Dan-From-Ryviu, I tried this code and it worked, but it moved my collection list titles to the top of the image.

This is how it should look: 

This is how it looks:

Please help me fix this. 

My link is: https://8ae3b9-27.myshopify.com/

Thanks in advance.

[sahilsharma9515]

Hi @KimberliMae 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[KimberliMae]

Hello,

My store is https://aerimae.com