Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

DJLondon1959
Tourist
6 2 1

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

 

Accepted Solutions (3)

diego_ezfy
Shopify Partner
2969 571 916

This is an 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

 

View solution in original post

DJLondon1959
Tourist
6 2 1

This is an 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

View solution in original post

DJLondon1959
Tourist
6 2 1

This is an 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 

View solution in original post

Replies 3 (3)

diego_ezfy
Shopify Partner
2969 571 916

This is an 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
Tourist
6 2 1

This is an 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
Tourist
6 2 1

This is an 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