Shopify themes, liquid, logos, and UX
I have the header as transparent on the homepage and #333333 on all the other pages. I want to keep the transparent on the homepage but change the header everywhere from #333333 to #000000. How can I do that?
Solved! Go to the solution
This is an accepted solution.
Hey @MLBildeler
Follow these 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.name != "index" %}
<style>
.header-wrapper.color-scheme-3.gradient {
background: #000000 !important;
}
</style>
{% endif %}
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @MLBildeler
Follow these 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.name != "index" %}
<style>
.header-wrapper.color-scheme-3.gradient {
background: #000000 !important;
}
</style>
{% endif %}
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you so much 🙂
Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
To achieve this, you can modify the header styling in your Shopify theme’s CSS. You’ll want to add a conditional statement that applies a different background color depending on whether the page is the homepage or not. Here’s how you can do it:
Go to Online Store > Themes > Actions > Edit Code.
Open the theme.css or styles.css file (depending on your theme).
Look for the section where the header styles are defined.
Add the following code:
/* For homepage header (transparent) */
.template-index .site-header {
background-color: transparent !important;
}
/* For all other pages (#000000) */
.site-header {
background-color: #000000 !important;
}
This will ensure that the homepage header stays transparent, and all other pages will have the #000000 background color. If you're not familiar with making these changes, I’d be happy to assist further and guide you through the process! Let me know if you need help implementing this or have any questions.
wikoyatabdulrasheed@gmail.com
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025