Can I automatically change the header color on my website?

Store Design
1

Hi guys,

I would like to have a header like the site below:

www.akuwoodpanelen.nl

Is this possible on Shopify?

My webshop link is: www.mywoodpanels.com

Thanks in advance!

@GemPages you can maybe help me?

2

Hello @MYWOOD ,

I can’t access to the sample website

GemPages_0-1671937078314.png
GemPages_0-1671937078314.png1919×730 20.7 KB

Could you re-check the domain of sample website to see if it is correct?

Best regards,
GemPages Support Team

3

Ohh im sorry, it should be www.akuwoodpanel.nl

4

Hello @MYWOOD ,

It’s GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671964048196.png
GemPages_0-1671964048196.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1671964636701.png
GemPages_1-1671964636701.png1919×907 77.4 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

5

No sir it didn’t work. I tried but it doesn’t change…

6

Hello @MYWOOD ,

Could you please share the screenshot of the code that you added to your theme code?

I checked your website but I can’t find that code.

Best regards,
GemPages Support Team

7

Hi @MYWOOD

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets ->base.css

#site-header:hover {
    background-color: #fff !important;
    margin: 0 !important;
    max-width: 100% !important;
}
#site-header:hover .header__menu-item>span {
    color: #000 !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

8

I’m sorry mate, i’d put it in the wrong section. It worked!!

Awesome, you’re a machine!!

9

I’ve got an additional question to this.

Is it maybe possible to use this only on the main page? Either war is it possible to edit the colour changes to the cart and account icon?

10

Hello @MYWOOD ,

If you want to use the code only on the main page, you could please try adding the below code:

{% if template == "index" %}

{% endif %}

Best regards,
GemPages Support Team