How do I change site header colour and text colour on a specific page only

Topic summary

Goal: Change the header background to black with white text only on a specific product page (Impulse theme), and later have that page’s hero video extend behind the header.

  • Initial solution placed custom CSS/JS in theme.liquid under the , but it affected the entire site. A revised snippet targeted only the specified product page, resolving the page-specific color change.

  • The requirement expanded: make the product page’s hero video cover the navigation/header (like the homepage). A modified code snippet achieved the effect but again applied site‑wide.

  • A final revision constrained the video/header overlay to the single product page, restoring site-wide defaults elsewhere. The requester confirmed success.

  • Implementation details: edits were made in theme.liquid (under ). Code snippets and screenshots guided placement; however, the exact code is not visible in the transcript and is central to the solution.

Outcome: Page-specific header color change and hero video overlay accomplished; issue resolved with no remaining open questions.

Summarized with AI on December 28. AI used: gpt-5.

Hello there!

I’d like to change the header background colour to black and the text to white.

ONLY on this specific https://digitalmemorybox.co.uk/products/memory-capsule page.

I am on the Impulse theme.

Can somebody please tell me how I’d do this?

Much appreciated.

Hey @DigitalMemoryBx ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


Screenshot is for reference only, the correct code to paste is the one shown above.

Thank you for your reply.

This has worked but has also changed it on the whole site.

I’d like for it to change on this 1 page only (link below)

https://digitalmemorybox.co.uk/products/memory-capsule

Oh, Just remove that code and replace it with this. Instructions are the same.


Thank you so much! That’s worked.

Is there a way to make my hero video on the https://digitalmemorybox.co.uk/products/memory-capsule page to cover the navigation bar/header? So the video goes up into the header.

I’d like the video to go into the header like I have with the image on my home page: www.digitalmemorybox.co.uk

Thank you,

DMB

Can you replace the entire code with this? It’s the same code, but modified to fit your new requirement.


Perfect mate thank you. Sorry about that change. Really appreciate it.

Actually this has changed it every page on the site rather than just the https://digitalmemorybox.co.uk/products/memory-capsule page.

Just change it to this @DigitalMemoryBx ,


Thank you very much! :slightly_smiling_face: