Hello Everyone,
I am enquiring to see if anyone had enabled the use of a Different Brand Logo on various pages for their sites? I have a Sub Brand that I am wanting to change the side design for (different logos and colour themes) but do not know how to change the Header Logo from my Home Page.
Has anyone attempted this before?
Thanks in Advance,
Sam
Hello @SamAlphabet
You want to use different logos and color for different page than you can use page metafields offered by Shopify storefront. but it also needs code setup. So if you are not familiar with code than please hire a developer.
Hi there, @SamAlphabet
You should include a condition. Are you talking about the logo in your header, correct? If so, you should go to Edit code > sections > header.liquid, find code related to your logo and add the following:
{% if product.url %}
// logo for products
{% elsif page.url %}
//logo for pages
{% elsif template == 'index'%}
//logo for homepage
{% endif %}
Not working
Checked with DAWN from 6.0 up to 8.x
Hi everybody, you can do this with a bit of work. If you want to know how it looks you can visit my âdev websiteâ before you are dooing all these changes below.
Here you can see different header menus and logos if youâre clicking a bit aroundâŚ
So, with this guide here you can have:
Different logos on different pages.
Having different Menus on different pages.
Lets start, please SAVE your theme before doing all these changesâŚ
First: Open your theme.liquid and replace this code:
{% section 'header' %}
with this code (as an example, read carefully below):
{% if page.url contains 'music' %}
{% section 'header-music' %}
{% elsif page.url contains 'marketing' or page.url contains 'advertising' %}
{% section 'header-advertising' %}
{% elsif page.url contains 'technology' %}
{% section 'header-technology' %}
{% else %}
{% section 'header' %}
{% endif %}
Now please read carfully:
This code checks the name of your page.url. IF you name a Page in your url e.g. something with music, the header-music will be shown. If you e.g. name a Page with advertising or marketing the header-marketing will be used. If the url contains âtechnologyâ the header file âheader-technology.liquidâ will be used.
URL examples:
https://mystore.myshopify.com/pages/something-with-music
the header-music will be shown.
https://mystore.myshopify.com/pages/best-marketing-ever
the header-advertising will be shown.
https://mystore.myshopify.com/pages/mega-technology-things
the header-technology will be shownâŚ
add so on. Note again: This are only examples, feel free to make your changes who fits for you.
So the first thing to remeber is, that your page.url should contain any of the name shown in the example above.
Next step:
Go to your code-editor and open âheader.liquidâ. Copy the complete CODE.
Add a new section and for our example name it: header-advertising.liquid. Remove the example code after you created the file.
Copy the entire code from header.liquid into this new header-advertising.liquid.
Save itâŚ
Do the same steps 1-4 with a new file called header-music and if you like the same with header-technology.
This are only examples. You can change the names of your header files and the words from your page.url in the code example as you want.
NOW:
Create one or more pages in shopify OnlineStore/Pages who contains the name you defined in your âifâ code you inserted in theme.liquid and give the pages one of your templates you created.
Now CUSTOMIZE your theme (open the editor) and open one of your pages you created before and which is using one of your templates.
If it works you now can see on the left side on top a âHeaderâ Section and you can choice a new MENU-Logo and a Navigation Menu you created as well.
You can repeat this with every template and any page in the editor IF THE PAGE CONTAINS the valid values you inserted with the codesnipped before in theme.liquid !!! If you dont name the pages in the right way and it does NOT CONTAIN the right values it does not work!!
Last step you have to solve:
If all you did above on desktop it should start working.
This all works very well with DAWN on Desktop, but the different menus can not be opened on smaller screens like iPhone add so on, as the this.url id value is not stored and loaded in the DOM Content loader for smaller screens.
To solve this open your global.js file in code-editor and search for: openMenuDrawer(summaryElement (have a look at line 410-415 or something around).
Replace the complete openMenuDrawer section with the following code:
openMenuDrawer(summaryElement) {
this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
// check if the header element is present in the DOM
const header = document.getElementById('shopify-section-header');
if (header) {
document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(header.getBoundingClientRect().bottom - this.borderOffset)}px`);
header.classList.add('menu-open');
} else {
// handle case where header element is not present
}
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
This should also solve the problem for the mobile menu.
Hope you get it run, best,
Stefan
Hi there⌠I posted a solution who worksâŚ
Best, Stefan
Hi Stefan,
When I do this, everything works perfectly! The only issue now is one the specific page, sticky header no longer works, any idea on how I can fix this?
Hi Tuckerkaide, first of all, thank you for your message. Iâve looked into the issue and yes, youâre right, the sticky header isnât working on the subpages. I didnât notice this because I donât use the sticky header myself. I delved deeper into the issue last night and unfortunately, itâs a bit more complex and canât be solved quickly. The problem is that when Shopify loads the page and the first header is loaded, it exists in the DOM of the page. This is achieved through a combination of an event listener and an observer. The header is assigned an ID, in the case of the sticky header, and when the menu is changed, other parts are in the DOM than what would be needed for the new header. Iâll try to take a closer look at the event listener and observer over the next few days to see what can be done. Maybe someone else in the community already knows, in which case theyâre welcome to jump in. Some coding will be necessary. Iâll let you know here as soon as I know more. Stefan
Thanks a lot! & Iâm hoping this can be resolved soon. Really appreciate your response & timeliness.
@StefanBoettjer Your website is very cool! How do you make the background scroll as I scroll up and down your home page? It almost looks like the background is moving! Can I do this on Theme Liquid? I donât really know how to code, I just copy and paste things I find in the forums to help me.
Hi Stefan - This looks interesting and hopefully the solution to my long-standing problem. My question is, the way my shopâs theme is structured, there is no â{% section âheaderâ %}â in the theme.liquid file.
Iâd love to see if there is a good method of adapting your framework to my theme.
Can you solve this for me? I still donât know whereâs the code of the logo in the specific page
Hi Stefan,
Iâm a bit late as this has been more than a year ago, but do you have any updates about this issue? The sticky header not working isnât a big problem for me, but the cart notification (when product is added to cart) stops working on the pages with the customized header as well. If thatâs possible to fix, it would be huge for me. Appreciate your time!
Hi Vredenbrengt,
Yes, itâs been a while. In the meantime, some things have changed in the DAWN theme. The method openMenuDrawer uses this.header and sets it based on a static document.querySelector(â.section-headerâ). This doesnât work when the header is dynamic, as different header types (header-music, header-advertising, etc.) are supposed to be used. I assume, without being able to test it in detail right now, that you need at least DAWN version 10.0 or higher⌠then you could maybe try the following (please make a backup of your theme beforehand)⌠(as mentioned, not tested). Go to global.js and look for this code:
class HeaderDrawer extends MenuDrawer {
constructor() {
super();
}
openMenuDrawer(summaryElement) {
this.header = this.header || document.querySelector('.section-header');
this.borderOffset =
this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
document.documentElement.style.setProperty(
'--header-bottom-position',
`${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
);
this.header.classList.add('menu-open');
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
window.addEventListener('resize', this.onResize);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus) {
if (!elementToFocus) return;
super.closeMenuDrawer(event, elementToFocus);
this.header.classList.remove('menu-open');
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
this.header &&
document.documentElement.style.setProperty(
'--header-bottom-position',
`${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
);
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
};
}
âŚand replace it with this:
class HeaderDrawer extends MenuDrawer {
constructor() {
super(); // Calls the parent class constructor (MenuDrawer) to inherit its properties and methods
}
openMenuDrawer(summaryElement) {
// Dynamically find the currently active header section based on its ID
this.header = document.querySelector('[id^="shopify-section-header"]');
if (!this.header) return; // If no header is found, exit the function
// Determine border offset based on whether the header wrapper has a border class
this.borderOffset =
this.borderOffset || this.header.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom')
? 1
: 0;
// Calculate and set the sticky header's bottom position in CSS
document.documentElement.style.setProperty(
'--header-bottom-position',
`${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
);
// Add the "menu-open" class to the header to visually indicate the menu is open
this.header.classList.add('menu-open');
// Add the "menu-opening" class with a slight delay for animation purposes
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
// Set ARIA attribute for accessibility
summaryElement.setAttribute('aria-expanded', true);
// Listen for window resize events to dynamically adjust sticky header positioning
window.addEventListener('resize', this.onResize);
// Trap focus within the menu for accessibility
trapFocus(this.mainDetailsToggle, summaryElement);
// Prevent scrolling of the body when the menu is open
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus) {
if (!elementToFocus) return; // If no element to focus on is provided, exit the function
// Call the parent class method for general menu close functionality
super.closeMenuDrawer(event, elementToFocus);
// Dynamically find the currently active header section and remove the "menu-open" class
this.header = document.querySelector('[id^="shopify-section-header"]');
if (this.header) {
this.header.classList.remove('menu-open');
}
// Remove the resize event listener when the menu is closed
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
// Dynamically find the currently active header section
this.header = document.querySelector('[id^="shopify-section-header"]');
if (this.header) {
// Update the sticky header's bottom position in CSS
document.documentElement.style.setProperty(
'--header-bottom-position',
`${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
);
}
// Update the viewport height variable for responsive design purposes
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
};
}
It might work after that. If necessary, you may need to add the following at the end of style.css:
[id^="shopify-section-header"] {
position: sticky;
top: 0;
z-index: 1000;
background-color: white;
}
Unfortunately, itâs a bit complicated. Maybe someone else would be interested in diving into the topic if this idea doesnât work. I currently donât have much time to test the code as a whole⌠Good luck, I hope it helps!
Stefan