Change Colour Themes per Store Category

Site URL: https://www.khuramanarmstrong.com

Is there a way to change the colour theme by category within the same store?  In our main store the default theme is red (bright 1), but I want one category to present in our blue theme (lightest 2).

Please see Store Category Theme Change.

Let us know how it goes.

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?

@Andreacarlberg

It appears to be working to me.

Without my code...

With my code...

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.

@Andreacarlberg

Thank you for the detailed explanation. I'll see if I can figure out what is going on. It may take me several days to get to it.

If you don't hear back from me soon please bump this thread to remind me.

Hello creedon, thank you so much!

@Andreacarlberg

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.

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

@Andreacarlberg

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.

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.

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)

Screenshots:

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.

@Andreacarlberg

Please follow the third bullet point step in my Quick Install instructions.

Hi guys, 

Does this work for blog post categories?

Is there a way to set a different theme for blog post categories?

Thanks

2 hours ago, FrankSy said:

Does this work for blog post categories?

It is for Store pages only.

Quote

Is there a way to set a different theme for blog post categories?

I responded to your query...