Change logo and link color based on collection?

Solved
srdjank
New Member
2 0 0

Hello there,

A client just approached us with an interesting request. I have never tried this before but I'm wondering if it can be done.

Their site has 6 different collections, and each collection has its own color for all the products in that collection.

They requested that the logo changes to match the color for each collection, as well as the link color for the products.

So when the user is browsing collection 1, the logo changes to the green version, and the link color for the products also change to green. When they are browsing collection 2, the logo changes to the blue version, and the link color for the products also change to blue.

I am quite familiar with PHP but my knowledge of Liquid/Ruby is quite low. Is there an easy/efficient way this can be done without impacting the site load time?

 

Thanks in advance for all your help and suggestions!

0 Likes

This is an accepted solution.

It's fairly simple to achieve this. The easiest way to achieve this is simply getting the current collection's handle and then doing an "if/else" in the header.liquid. 

if current collection is "x", then show logo "x".
if current collection is "y", show logo "y". 

And so on and so forth. You can also add multiple images at the Customize page so your client can choose whichever logo they want and change at any time.

If you need to also add specific CSS for each collection you can simply add a class to the <body> (or elsewhere, wherever you find more convenient), something like "collection--x", then style it accordingly. 

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
LitExtension
Shopify Partner
1228 157 217

This is an accepted solution.

- With logos, you just need to go to header.liquid file and add if/else for each logo corresponding to each collection via handle.

Ex:
{%- if collection.handle == 'A' -%}
// show logo of collection A
{%- elsif collection.handle == 'B' -%}
// show logo of collection B
{%- elsif ....-%}
// show logo of collection N
{%- else -%}
// show default logo
{%- endif -%}


With handle, you can refer https://shopify.dev/api/liquid/basics/handle

With style, you have 2 ways:
1. Add class "collection-{{ collection.handle }}" at body tag, then css according to the class of each collection.
2. You can add if/else like above and get separate style file for each collection

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes