How to change CSS for a specific URL pathname?

Hi there,

on a specific slug www.example.com/account/login I need to change the background color of the header, but only on this specific page. I tried to write some JavaScript, but it is not working. This is the code:

if (window.location.pathname === "/account/login")
  document.getElementsByClassName("header-wrapper").style.backgroundColor = "red!important";

What is wrong with the code?

Thanks for help!

  1. Look at the doc for getElementsByClassName and what it returns (array-like object).

  2. I don’t believe you can set !important when you dot-on-to the CSS property directly.

You can set it if you assign it to the style property.

document.getElementById('text').style = 'background-color: red !important';

Or you can use setAttribute or setProperty.

document.getElementById('text').setAttribute('style', 'background-color: red !important');

document.getElementById('text').style.setProperty('background-color', 'red', 'important');
1 Like

@lasjorg Thank you for your answer :slight_smile:

I added an Id to the header-wrapper and tried all three method (property, setAttribute, setProperty) and none of them are working…

This is the code:

if (window.location.pathname === "/account/login")
   document.getElementById('header-wrapper__js').style = 'background-color: red';

Btw I am adding custom JavaScript inside a Shopify theme by adding a new file with the name of custom-javascript.js. The JavaScript file includes only these two lines of code. Maybe it is not working because of the JS file, but it is inside the folder and it should work…

It feels really frustrating that I am not able to add a simple javaScript code after all the hard work I put into learning JS :slightly_frowning_face:

EDIT: I edit this post by mistake… I am already a bit out of control haha…

The code you have should work, but I can’t really help you with the implementation details as I haven’t looked much at Shopify. It might need a .liquid file extension. Did you add the JS inside theme.liquid or what?

Add a console.log to the JS and see if it works or not.

Edit: also make sure the file is loaded at the bottom of the body or wrap your code in a DOMContentLoaded event, or try using defer on the script element.

https://www.youtube.com/results?search_query=shopify+custom+js

1 Like

The issue was that I did not link the .js.liquid file with the theme.liquid file, just like you suggested. I though I can simply add a JavaScript file but this is not working.

Thanks again for your help!

I run again into some issue, because the Shopify store adds product slugs automatically. Always when a product is added a new slug will be created and therefore I need to set a style to the header-wrapper__js in this case it is background-color: red

My question is:

Is there any syntax in JS to add all upcoming slugs after /products/* ?

Just like we know from the CSS selector * to declare everything.

if (window.location.pathname === "/products/***ALL-AUTO-GENERATED-SLUGS***")
   document.getElementById('header-wrapper__js').style = 'background-color: red';

Highly appreciate your answers!

I guess you can use .test() or .match() and a regex.