Code + location for changing background colour on specific pages

ellasoroka
Tourist
3 0 0

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!

Replies 5 (5)

BSS-Commerce
Shopify Expert
3477 462 524

Hi @ellasoroka ,

 

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

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ellasoroka
Tourist
3 0 0

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
Shopify Expert
3477 462 524

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>

 view - 2023-11-22T162450.624.png

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:

view - 2023-11-22T162553.906.pngview - 2023-11-22T162603.960.png

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 !

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ellasoroka
Tourist
3 0 0

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
Shopify Expert
3477 462 524

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:

view - 2023-11-27T092542.480.png

 

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;
}

view - 2023-11-27T093437.459.png

Hope my explanation will help you. @ellasoroka 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency