Code + location for changing background colour on specific pages

[ellasoroka]

Hi, our company is using the Focal theme and we would like to change the background colours for different categories of the shop.

The main sections are below and we want to have four different colours in total. Ideally we would also change the corresponding brands within these categories to the same colour as the overarching them.

I'm having trouble locating where to do this on individual pages, instead of the entire website, as well as working out how to get the background colour to change across the whole page, just leaving the header logo the same. 

Modern gifting - one colour

Home decor - one colour

Beauty & Wellbeing - one colour

Kids - one colour

Can anyone advise? Thanks!

[BSS-Commerce]

Hi @ellasoroka ,

If you can provide the image and store URL along with the password, I can provide a solution to your wishes.

[ellasoroka]

Hi, sure the URL is:

https://sorokalondon.co.uk/

Password - could you request access then we will grant permission?

What image do you need?

The colour palette we want to use is as follows:

Home  -  orange #fa622a

Beauty + Wellbeing - pink #faced7

Modern Gifting - yellow #efdb24

Kids - blue #c2f4fd

Thank you!

[BSS-Commerce]

Hey @ellasoroka ,

You can use the following solution:

In Online store, select Themes -> More -> Edit code

In the theme.liquid file, add the following code before the </head> tag

<script>
    let currentUrl = window.location.href;
    let color = ''
    if (currentUrl === 'https://sorokalondon.co.uk/') {
        color = '#fa622a'
        document.getElementById("main").style.backgroundColor = color;
        document.querySelectorAll(".section__color-wrapper").forEach(i => {
            i.style.backgroundColor = color
        })
    } else if(currentUrl === 'https://sorokalondon.co.uk/collections/all-modern-gifting'){
        color = '#efdb24'
        document.querySelector("body").style.backgroundColor = color;
    } else if(currentUrl === ''){ //put Beauty & Wellbeing URL in ''
        color = '#faced7'
        document.querySelector("body").style.backgroundColor = color;
    } else if(currentUrl === ''){ //put Kids URL in ''
        color = '#c2f4fd'
        document.querySelector("body").style.backgroundColor = color;
    }
    // else if (currentUrl === '') { //put URL in ''
    //     color = '#c2f4fd'
    //     document.querySelector("body").style.backgroundColor = color;
    // }
  </script>

 

Since your store doesn't have the URL for the Beauty + Wellbeing page and Kids page yet, I will leave it blank and you can add it

Click Save to save changes.

Result:

Because your store doesn't have a Beauty + Wellbeing page and a Kids page yet, I can't be sure the colors will be the same as you want. Additionally, you can add cases to change any page you want.

Hope my answer helps you @ellasoroka !

[ellasoroka]

Hi, thank you so much for this. I can't seem to find a </head> tag  in the code though. I found one with just 'head' but I entered the code before it and the colours didn't change. In the example, there are more lines too. I'm looking in the theme.liquid layout. 

Also, is it possible to have a code that changes all the background colours of the sub-category pages too? Eg. the pages that are under all of the homeware like table ware, bowls & plates, cups & mugs.

Thank you in advance!

[BSS-Commerce]

Hi @ellasoroka ,

If your theme has a theme.liquid file, this file must definitely have a </head> tag. You can press Crtl + F and enter </head> or </head > or < /head> or < /head > into the search box as follows:

We're sorry to tell you that there is currently no way to change the background color for all sub-category pages as you desire. You will have to add it manually for each page.

Code snippets with // at the beginning of the line are comment syntax in Javascript. You can delete them or keep them to add more meaning to the code. To change the background color for a page, add the following code before the </script> tag

else if (currentUrl === '') { //put URL in ''
     color = '' // put color code in ''
     document.querySelector("body").style.backgroundColor = color;
}

For example, if you want to change the background color of the Tableware page to #faced7, you can add the following code before the </script> tag.

else if (currentUrl === 'https://sorokalondon.co.uk/collections/tableware') { //put URL in ''
     color = '#faced7' // put color code in ''
     document.querySelector("body").style.backgroundColor = color;
}

Hope my explanation will help you. @ellasoroka