Change product link color in recommended products based on collection?

srdjank
New Member
2 0 0

Hey guys,

Wondering how best to tackle this.

I have a client with a store that has 5 collections - each collection has its own colour logo, colour menu item, and colour product links.

Those all work great.

The problem I'm having is getting the same colour scheme to work with the Recommended Products section.

I've tried using collection.handle, but it doesn't seem to work for Recommended Products, because it doesn't seem like they have the collection within them.

However, it works great for the product links within a collection.

Here is the code I have in product-thumbnail__product-info.liquid:

 

{%- if collection.handle == 'mens' -%}
<a href="{{ product.url | within: collection }}" class="product-thumbnail__title black">{{ product.title }}</a>
{%- elsif collection.handle == 'hair-care' -%}
<a href="{{ product.url | within: collection }}" class="product-thumbnail__title purple">{{ product.title }}</a>
{%- elsif collection.handle == 'sun-care' -%}
<a href="{{ product.url | within: collection }}" class="product-thumbnail__title orange">{{ product.title }}</a>
{%- elsif collection.handle == 'body-care' -%}
<a href="{{ product.url | within: collection }}" class="product-thumbnail__title blue">{{ product.title }}</a>
{%- else -%}
<a href="{{ product.url | within: collection }}" class="product-thumbnail__title">{{ product.title }}</a>
{%- endif -%}

 

Like I mentioned above, this works great for the links on the collection page. But on the product page, it doesn't work for the Recommended Products section.

Anyone have any idea how best to handle this?

Much appreciated!

0 Likes
iDoThemes
Explorer
72 15 31

You should have access to the product object in recommendations which has the collections object too:

https://shopify.dev/api/liquid/objects/product#product-collections

You can do some logic there to check which collections the recommended products belong to.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor

Theme Developer -- Drop me a line
0 Likes