Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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:
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
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
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
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.
Hi there,
thanks for that, I didn't work unfortunately.
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
If this was helpful, hit the like button and accept the solution.
Thanks
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.
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 %}
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
That worked perfectly, thank you so much!!!
Would you be also able to support how to change logo on the homepage only?
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:
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
Worked! Thank you!
@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
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?
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?
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:
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
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?
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
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?
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
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
If this was helpful, hit the like button and accept the solution.
Thanks
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025