Change the colour of the collection headings for Collection pages only in prestige theme.

[DJLondon1959]

If some one could please help me Change the colour of the collection heading for Collection pages in prestige theme.

Here is a link to my two collection pages at the moment what i would like to do is make the header on this page black.  https://danieljameslondon.com/collections/daniel-heart

and the header on this page white

https://danieljameslondon.com/collections/for-lions-for-life

if possible

Many Thanks DJ

[diego_ezfy · Accepted solution]

Hey @DJLondon1959@DJLondon1959,

I hope you're doing well! Certainly possible.

1. From your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function headerColorChange(){
const url = window.location.href;
const colorDanielHeart = `#000`;
const colorLions = `#808080`

const $header = document.querySelector(`x-header`);
if (url.includes(`collections/daniel-heart`)){
$header.style.backgroundColor = `${colorDanielHeart}`;
}

if (url.includes(`collections/for-lions-for-life`)){
$header.style.backgroundColor = `${colorLions}`
}
}

headerColorChange();


</script>

You can change the hex color as per your wish.

If it helps you please click on the "like" button and mark this answer as a solution.

Thank you.


Kind regards,
Diego

[DJLondon1959 · Accepted solution]

Hi Diego

Thank you so much for helping me out with this problem

You’ve done a fantastic job.

All the best,

Regards Daniel

[diego_ezfy · Accepted solution]

Hey @DJLondon1959@DJLondon1959,

I hope you're doing well! Certainly possible.

1. From your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function headerColorChange(){
const url = window.location.href;
const colorDanielHeart = `#000`;
const colorLions = `#808080`

const $header = document.querySelector(`x-header`);
if (url.includes(`collections/daniel-heart`)){
$header.style.backgroundColor = `${colorDanielHeart}`;
}

if (url.includes(`collections/for-lions-for-life`)){
$header.style.backgroundColor = `${colorLions}`
}
}

headerColorChange();


</script>

You can change the hex color as per your wish.

If it helps you please click on the "like" button and mark this answer as a solution.

Thank you.


Kind regards,
Diego

[DJLondon1959 · Accepted solution]

Hi Diego

Thank you so much for helping me out with this problem

You’ve done a fantastic job.

All the best,

Regards Daniel

[DJLondon1959 · Accepted solution]

Hi Diego

i am not sure if this is the way to contact you but hopefully it is.

Thank you for the last script you sent me it was perfect.

I was wondering if you could please advise me once more is it possible to do the same again.

But this with the footer.

Any help would be amazing

all the best Daniel