Can I make my logo green on certain pages?

Hi there,

I'm hoping for my logo to show green on these pages if you could help me?

https://www.plantologyflorist.co.uk/workshops

https://www.plantologyflorist.co.uk/sustainability

https://www.plantologyflorist.co.uk/shop-gifts-homeware/flower-press (and all my other individual product pages)

Many thanks

Do you want just the logo to appear green, or the logo and text?

Changing the logo would take a little more work, but this styling (added to the header code injection for the pages you need it) will change the logo to black and the navigation links to green.

<style>
.Header-branding img {
  filter:invert(1);
}
.tweak-header-primary-nav-hover-style-plain .Header-nav .Header-nav-item {
    color: #193314;
}
</style>

You can use this forum thread to grab some code to help you change the logo, it'll involve uploading a new green logo to your website via a link or Custom CSS and some CSS.

https://forum.squarespace.com/topic/150723-how-to-change-logo-on-specific-pages-in-71/

Yes the logo and the text.

Thank you for your reply - how do I add only for the pages that need it? And will I have to manually do every individual product page?

22 minutes ago, Ziggy said:

(added to the header code injection for the pages you need it)

Add the code to the header code injection on the pages you need (in the pages settings and under Advanced) including the Store page, adding it to the store header code injection will apply to all of the products.

Thank you. I don't want it to apply to my main store page.. just the individual product pages. Is there a way to allow for this to happen?

For example...

https://www.plantologyflorist.co.uk/shop-flowers – Logo needs to be white on here but then green on the individual products - https://www.plantologyflorist.co.uk/shop-flowers/devonshire-green-bouquet-spring-2021-xb37a-r8xf7-8fcj7

On 10/31/2022 at 6:42 PM, Plantology said:

Thank you. I don't want it to apply to my main store page.. just the individual product pages. Is there a way to allow for this to happen?

For example...

https://www.plantologyflorist.co.uk/shop-flowers – Logo needs to be white on here but then green on the individual products - https://www.plantologyflorist.co.uk/shop-flowers/devonshire-green-bouquet-spring-2021-xb37a-r8xf7-8fcj7

Use this new code

<style>
body.view-item .Header-branding img {
  filter:invert(1);
}
body.view-item .Header-nav .Header-nav-item {
    color: #193314;
}
</style>