Jump to content

Change Colour Themes per Store Category

Recommended Posts

  • 3 months later...

website: andreacarlberg.dk

I used this code for my website and it worked perfectly! But only when previewing the website in the editor. The theme changes when I browse through the categories. But when I visit the website on the actual domain, all of the categories have the same theme. Their theme is different from the theme in the “all products” category, but they don’t have the themes that I assigned them to in the code, and that you see when previewing the page. What could be the cause?

Edited by Andreacarlberg
Added website
Link to comment

Thank you for your reply.

I apologise for not explaining more clearly. The green background is the unwanted color.

"Nyt" category is supposed to have yellow background, "Prints" is supposed to have a light blue background with blue text in the main navigation, "Originaler" is supposed to have the green background with yellow text for the main navigation and "DOF tidsskrift" is supposed to have a brown background with green text for main navigation.

But every category turns up with the green background, even if I completely remove the green theme (Dark 1) from the code. It is af if the green theme is the "Default theme". It is also the color that is "Behind the website" (when scrolling past the bottom, or past the top), and the default theme when adding a new section or page. Why is my website obsessed with this theme?

Even if I change the colors in "Dark 1" completely, the categories show up with the same green background and yellow text.

Please help.

Link to comment


I tested my code and it appears to be working correctly.

I entered these values.

      'red' : 'Lightest 2',
      'green' : 'Light 1',
      'blue' : 'Light 2',

This is how the category pages looked.


One thing to note is that the code does not change all the themes for the whole page. It only changes the theme for the store section of the page.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Hello creedon, thank you for taking the time to help with this.

See, that's the thing. The code works almost perfectly for me in the website editor.

The issue occurs when viewing the published website (when going to andreacarlberg.dk).

As you'll see in my screen recording from earlier, the website behaves differently when using it in the editor and when using the published website.

Have you tested your code on a published website?

I'm looking forward to your response.

- Andrea Carlberg

Link to comment


I have been able to reproduce the issue you are seeing!

I think I can fix the code but it is going to take a different approach and may take several days. Please bump this thread if I don't provide and update soon.

In the meantime you'll want to remove the current code.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

I have updated my cited code in my October 6, 2021 post.

For those interested in the technical issue. Apparently SS currently handles loading the CSS for the various themes depending on if you are in SS Preview vs how it is loaded for an outside visitor.

In the former case SS loads all themes. Which probably makes sense given you could pop into the editor at any time to change a theme.

In the latter case only the themes that are actually used for each page section are being loaded.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...

Hello Creedon.

Thank you so much for the help so far!

The new code and method work perfectly with the themes. Beautiful!

There are a few functions that are missing after adding the code which i hope you can help with.

1. Breadcrumbs are missing from shop categories. I have the options to turn breadcrumbs on or off, but they don't appear on the page.

2. The color of navigation links and icons don't match the theme of the category. Instead they match the color of the main theme for the header (Screenshots included). This is not a huge issue, except when the background color matches the navigation links, so they become invisible. (as on this page: https://www.andreacarlberg.dk/shop/nyt)


Here the navigation links should be green. As you can see breadcrumbs are missing.


Here the navigation links should be brown, but are yellow which makes them invisible.


Here the navigation links should be blue as well.


Link to comment
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.