Clickable Product Collection In Cards (Dawn Theme)

Store Design
, ,

Topic summary

Goal: Make the collection label shown on product cards in the Dawn theme clickable to its corresponding collection page.

Process and attempts:

  • Original setup displayed the product’s collection/type via card_product.type.
  • First suggestion wrapped the text in a link to the product/card URL, which incorrectly linked to the current page (e.g., homepage when featured).
  • Next attempt used card_product.collections.first, but failed for products in multiple collections because Shopify’s ordering is not controllable and could point to unintended collections (e.g., Best Sellers).

Final working solution (code-centric):

  • Iterate through card_product.collections, find the collection whose title matches card_product.type, assign its URL to collection_url, then render the type as a link to that URL; otherwise fall back to plain text.
  • Code snippets are central to the resolution.

Styling note:

  • A request to change the link color to #fc7060 was raised; styling resolution was not provided in the final messages.

Status: Functionality resolved with a robust code approach; minor styling question remains open.

Summarized with AI on January 10. AI used: gpt-5.
1

Hello. I’ve adjusted the code in my theme in order to show the product collection in product cards.

AchilleasV_1-1690301890669.png
AchilleasV_1-1690301890669.png281×485 56 KB

How to make the product collection clickable and go to the corresponding category?

2

Could you share your page URL to check?

3

https://chicpawz.com

4

Give me the code you added to display collection title

5
{{ card_product.type | escape }}

On card-product.liquid

6

Without investigating your store code we couldn’t not help you

7

Update the code to this.

{{ card_product.type | escape }}
1 Like
8

It works. But the link points to the page the product is currently (if the product is featured on homepage, it points on homepage). Also, the text is blue, can we make it to #fc7060 like previously?

9

Please try to update code to this and check again


{% assign primary_collection = card_product.collections.first %}
{{ card_product.type | escape }}
1 Like
10

So this code was close but ultimately doesn’t work as intended when the product has multiple categories. Also Shopify’s internal ordering is seemingly random and you can’t influence it, so it can go to best sellers collection etc.

I troubleshoot it with ChatGPT and with your help this code works correctly.

{% assign collection_url = nil %}
{% for collection in card_product.collections %}
  {% if collection.title == card_product.type %}
    {% assign collection_url = collection.url %}
    {% break %}
  {% endif %}
{% endfor %}

  {% if collection_url %}
    
      {{ card_product.type | escape }}
    
  {% else %}
    {{ card_product.type | escape }}
  {% endif %}
1 Like