Hello,
I’m running empire theme and have certain products and collections assigned to their own templates. I want those templates to display a different logo and header/navigation menu color than the “default” templates. I was able to figure out the code to change the logo in those templates but not the colors. Can anyone assist?
Thank you
Hey @altitudehobbies
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Here’s an example of one of the custom template pages: DJI Matrice 400 Series — Altitude Hobbies
I want to change the darker blue in the header to 1A2733. And the lighter blue in the nav bar to 3E5C73
Depends on how many templates you have.
If not many, then one option is to add a “Custom liquid” / “Custom code” section to those templates in template area and paste code like:
<style>
body .site-header-main {
background-color: #1A2733;
}
.site-header-wrapper .site-navigation {
background-color: #3E5C73;
}
</style>
If there are too many custom templates to update manually, you can add similar section in “Footer group” but use a conditional, like:
{% if product.tags contains "special-header" %}
<style>
body .site-header-main {
background-color: #1A2733;
}
.site-header-wrapper .site-navigation {
background-color: #3E5C73;
}
</style>
{% endif %}
I only have a few custom template so I can do the CSS section. That code didn’t work however. It is giving me an error
I pasted that into the static-header.theme file and it is changing the nav bar but not the header itself. That is staying blue
Chatgpt suggested this:
{% assign alt_templates = “contact-to-buy-drone,drone-high-end-autel,drone-end-misc-brand,drone-highend,drone-low-end-autel,drone-lowend,droneaccessory-highend,droneaccessory-lowend,altitude-drone-collection” | split: “,” %}
{% if alt_templates contains template.suffix %}
.site-header {
background-color: #000000 !important; /* change this */
}
.site-header a,
.site-header .icon {
color: #ffffff !important; /* change this */
}
.site-navigation {
background-color: #000000 !important;
}
{% endif %}
This worked also for the nav bar but not the header (where the logo is located). It seems the header is controlled by another set of code but I can’t figure out where.
OHHHH! I see. Thank you! That worked. I really appreciate it!
The point of using a section in Template area vs editing theme code is that code in “Custom liquid” section will only apply to the pages using this particular template while theme code edit applies to all pages, so need some conditionals.
However, Footer group is the same for all templates*
Adding a “Custom liquid” section to the Footer group is ultimately the same as pasting the code into layouts/theme.liquid, but better because it does not make theme version updates difficult.
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
What would I add to that code to change the “primary button background” color also?
I believe this should be enough, but do check other elements you need:
button.live-search-button,
.slideshow-slide__button--primary,
.button-primary {
background-color: red;
border-color: red;
}
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
That doesn’t seem to be changing anything. Do I input it in with the other code or make a new custom liquid entry?
hey @altitudehobbies,
You can add the CSS code to customs CSS section in “Theme Editor”-
.live-search-button {
background-color: #dc349a;
}
There you can place the color code “#dc349a” to any color you prefer.
Check the below screenshot-
Thanks!
