How to change the color of the header on only one page

Charmeclothing · ‎10-23-2024

Hi 🙂

I have this code i got from a previous guy and shout out to him, but now i need some help beacuse i want it to change in theese pages too, but everytime i try to do it doesnt work

Here is the pages i want to change:

https://aa1250-cc.myshopify.com/pages/contact

https://aa1250-cc.myshopify.com/pages/faq

Here is the code:

<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">

{%- if template == "collection" -%}
<style>
.header__inline-menu * {
color: black!important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const logoImage = document.querySelector('.header__heading-logo-wrapper img');
if (logoImage) {
logoImage.src="https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17...";
logoImage.srcset = "https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 90w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 135w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 180w";
}
});
</script>
{%- endif -%}

Thank you 🙂

Moeed · ‎10-23-2024

Hey @Charmeclothing

Try this code.

{%- if page.handle == "contact" -%}
<style>
.header__inline-menu * {
color: black!important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const logoImage = document.querySelector('.header__heading-logo-wrapper img');
if (logoImage) {
logoImage.src="https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17...";
logoImage.srcset = "https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 90w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 135w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 180w";
}
});
</script>
{%- endif -%}

{%- if page.handle == "faq" -%}
<style>
.header__inline-menu * {
color: black!important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const logoImage = document.querySelector('.header__heading-logo-wrapper img');
if (logoImage) {
logoImage.src="https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17...";
logoImage.srcset = "https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 90w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 135w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 180w";
}
});
</script>
{%- endif -%}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

View solution in original post

Moeed · ‎10-23-2024

Hey @Charmeclothing

Try this code.

{%- if page.handle == "contact" -%}
<style>
.header__inline-menu * {
color: black!important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const logoImage = document.querySelector('.header__heading-logo-wrapper img');
if (logoImage) {
logoImage.src="https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17...";
logoImage.srcset = "https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 90w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 135w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 180w";
}
});
</script>
{%- endif -%}

{%- if page.handle == "faq" -%}
<style>
.header__inline-menu * {
color: black!important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const logoImage = document.querySelector('.header__heading-logo-wrapper img');
if (logoImage) {
logoImage.src="https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17...";
logoImage.srcset = "https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 90w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 135w, https://cdn.shopify.com/s/files/1/0901/9798/3573/files/Etoile_Elegante-4-removebg-preview_1.png?v=17... 180w";
}
});
</script>
{%- endif -%}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

How to change the color of the header on only one page