Change color logo when refreshing page

Store Design

Topic summary

Goal: Change the top-left logo’s color on every page refresh, but only on collection pages.

Update: A responder advises that changing the color of the logo’s strokes isn’t feasible because the logo is already black (implying it’s not easily recolorable via CSS/SVG stroke edits).

Workaround offered:

  • Limit styling to the collection template using a Liquid condition in theme.liquid (placed before the tag).
  • Apply CSS to change the logo’s background color (example shown with green) rather than altering the logo’s stroke color.
  • A screenshot link demonstrates the result.

Scope/Technical notes:

  • The provided snippet targets the logo link element and applies a background color only on collection pages.
  • This approach does not implement per-refresh color changes; it sets a static background color.

Status: No confirmation from the original poster. The request for a randomized color on each refresh remains unresolved; only a static background color workaround has been suggested.

Summarized with AI on December 14. AI used: gpt-5.
1

Hi everyone,

I would like my logo in the top left corner of my website to change color every time I refresh the page, but only on the collection page.

Could anyone guide me on how to achieve this? I’d really appreciate your help!

Thanks so much in advance! :blush:

website : https://www.alfjewelry.com/
password: andrew03

Screenshot_147.png
Screenshot_147.png1070×672 104 KB

2

Hi @thomas93410 ,

Given that your logo is already in black, it is not feasible to alter the color of the individual strokes within it.

In case you want to change the background, you can use this code here:

% if template.name == "collection" %}
{% style %}
a.logo-link.w-inline-block {
    background: green;
}
{% endstyle %}
{% endif %}

Here is the result: https://prnt.sc/AFKrXoVjZZSJ

Please add this code into your theme.liquid, before the tag.

Please let me know if it works!

Best,

Daisy