How can I change my homepage header without altering other pages?
The solution I can think without needing a developer edit your theme code is as follows.
- From your Shopify admin dashboard, click on "Online Store" and then "Themes".
- Find the theme that you want to edit and click on "Actions" and then "Edit code".
- In the "Layout" folder, click on "theme.liquid" file
- Find the code below.
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
- Then create another line, and place the code below
{% if template.name == "index" %}
<style>
header.header.header--middle-left.header--mobile-center.page-width.drawer-menu.header--has-menu.header--has-social.header--has-account {
filter: invert(1);
}
</style>
{% endif %}
- And Save.
See code placement here
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @Marco211
As what I understand, you want to change the logo to clear, but not change the background which is black? Yes, you can use a PNG image for your logo with transparent background, but I suggest to change the color to white or lighter color, so your logo is visible
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
No, maybe I explained myself badly, I have black as the color of the header icons and the logo I uploaded is black and I would like it to be like this on all pages except the homepage. On the homepage my header is transparent and unfortunately having my black logo and black header icons I can't see anything, so I would like to upload a clear logo to the homepage and I would like the homepage header icons to be white
The solution I can think without needing a developer edit your theme code is as follows.
- From your Shopify admin dashboard, click on "Online Store" and then "Themes".
- Find the theme that you want to edit and click on "Actions" and then "Edit code".
- In the "Layout" folder, click on "theme.liquid" file
- Find the code below.
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
- Then create another line, and place the code below
{% if template.name == "index" %}
<style>
header.header.header--middle-left.header--mobile-center.page-width.drawer-menu.header--has-menu.header--has-social.header--has-account {
filter: invert(1);
}
</style>
{% endif %}
- And Save.
See code placement here
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024