Changing header text colour and icons on homepage only

Solved

Changing header text colour and icons on homepage only

alant
Excursionist
27 1 16

Hello,

 

Could you anyone support with below please:

 

I want header text and icons colour to be white on homepage only (the rest of the pages it should be black).

I've managed to change the colour of the text, however the dropdown icon and cart remain black. How can I change it?

 

I would also like to change the logo on homepage only to a different design, is there a way of doing so?

 

I would appreciate any support!

 

My store: https://gz8o5qkua4r3oxzd-78805696849.shopifypreview.com

Accepted Solutions (4)

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @alant

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

{% if template.name == 'index' %}
    <style>
 
.header__icon--cart, 
.header__menu-item .icon-caret {
    color: white !important;
}
    </style>
{% endif %}

 

 Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @alant

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

{% if template.name == 'index' %}
    <style>
       .header__heading-logo-wrapper {
            filter: invert(1);
       }
    </style>
{% endif %}

 

Here is result:

BSSCommerceHDL_0-1723890003061.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Oh sorry, Pls replace old code to this new code: 

 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
summary.header__icon.header__icon--menu svg {
    color: white !important;
}
summary.header__icon.header__icon--menu svg,
.list-menu__item.link.link--text {
    color: white !important;
}
}
</style>
{% endif %}

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @alant, Pls replace previous code to new code: 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
  summary.header__icon.header__icon--menu svg,
  #menu-drawer  .list-menu__item.link.link--text {
    color: white !important;
  }
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 18 (18)

Priyanka_
Shopify Partner
84 15 23

Hi @alant 

To change the cart color on homepage only follow the below steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
.header__icon--cart::after{
    color: #fff !important;
}
</style>
{% endif %}

5) Save the changes.

 

Yes, it's possible to use a different logo design exclusively for the homepage. This requires modifying your theme's code files. Feel free to DM me if you need any help with this.

Was I helpful? 

Buy me a coffee 



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

alant
Excursionist
27 1 16

Hi there, 

 

thanks for that, I didn't work unfortunately.

Rahul_dhiman
Shopify Partner
740 143 150

Hello @alant 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

 

.header__icon--cart {
color: white;
}
.header__menu-item .icon-caret {
color: white !important;
}

 

result
7.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

alant
Excursionist
27 1 16

Hi there,

 

Thanks for that! It worked partially, however it changed the colour to white on all sites and I want to change it only on homepage.

Priyanka_
Shopify Partner
84 15 23

Hi @alant 

Add the below code if you want to change the color on homepage template only:

{% if template.name == 'index' %}
<style>
.header__icon--cart {
color: white !important;
}
.header__menu-item .icon-caret {
color: white !important;
}
</style>
{% endif %}
Was I helpful? 

Buy me a coffee 



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

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @alant

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

{% if template.name == 'index' %}
    <style>
 
.header__icon--cart, 
.header__menu-item .icon-caret {
    color: white !important;
}
    </style>
{% endif %}

 

 Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

alant
Excursionist
27 1 16

That worked perfectly, thank you so much!!!

Would you be also able to support how to change logo on the homepage only?

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @alant

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

{% if template.name == 'index' %}
    <style>
       .header__heading-logo-wrapper {
            filter: invert(1);
       }
    </style>
{% endif %}

 

Here is result:

BSSCommerceHDL_0-1723890003061.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

alant
Excursionist
27 1 16

Worked! Thank you!

BSSCommerce-HDL
Shopify Partner
2305 834 907

@alant, No problem. Have a good day 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

alant
Excursionist
27 1 16

Can I have another request please - just realised that on mobile icons of menu and text are still in black. (would like to change as previously to white only on homepage). Would you be able to support?

alant
Excursionist
27 1 16

Can I have another request please - just realised that on mobile icons of menu and text are still in black. (would like to change as previously to white only on homepage). Would you be able to support?

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @alant

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
summary.header__icon.header__icon--menu svg {
    color: white !important;
}
summary.header__icon.header__icon--menu svg,
.list-menu__item.link.link--text {
    color: white !important;
}
}
</style>

Here is result: 

BSSCommerceHDL_0-1723891202927.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

alant
Excursionist
27 1 16

That worked, however it change menu icon to white on all pages - can we keep it white on homepage and black on all the rest?

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Oh sorry, Pls replace old code to this new code: 

 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
summary.header__icon.header__icon--menu svg {
    color: white !important;
}
summary.header__icon.header__icon--menu svg,
.list-menu__item.link.link--text {
    color: white !important;
}
}
</style>
{% endif %}

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

alant
Excursionist
27 1 16

Worked! But now it also changes footer menu to white on the main page so it's not visible - can footer be black on all the pages please?

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @alant, Pls replace previous code to new code: 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
  summary.header__icon.header__icon--menu svg,
  #menu-drawer  .list-menu__item.link.link--text {
    color: white !important;
  }
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Rahul_dhiman
Shopify Partner
740 143 150

Hello @alant 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-menu-drewer.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.menu-drawer__menu-item {
    color: white !important;
}
.menu-drawer__close-button .icon-arrow {
    color: white !important;
}

 

 

result
11.png10.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages