This tutorial demonstrates how to add an additional promotion bar underneath the header in the flex theme.
Steps to add this section
- Add the section below to your theme files.
- Modify the theme.liquid file to display the new section in the header area.
Watch video for complete guide.
under-header-promotion.liquid
Transcript
Hey, it's Michael here with Jade Puma. So the flex theme comes with this top bar element which we can put some information in here and notice about free shipping, but we might have other promotions that we also want to have somewhere in the header. So that's what this additional section can do. And we can give it different content on mobile versus desktop, where we have more room. So to add this we first want to come into our code editor and click on edit code, and then you just want to go to the code below this video. If you're on YouTube, there'll be a link to the blog article there. So let's go here and we'll find this code. So you want to come down to the bottom and just click on view raw and grab all that code and then come back into our code editor. And we want to just create a new section. So let's find the sections folder and add a new section. So I'm gonna call this section the under header promotion and save that whatever's in there. You can just paste in the new code
And then once you have that, we can save it. And then the next place we want to go is to the theme, do liquid file. And in here we wanna find the section where the header elements are rendered. So that will be about halfway down. We wanna look for something that mentions headers, and here is the section here. So this is where our header sections get rendered. And this banner is going to work only for the classic and centered header configurations. So if we just come in here under header classic, and we want to write this, and then we want to do render no, that's not it. Sorry, section, because this is a section and it's called under header promo. And then we can put the same one, an extra bracket there. We can put the same one under here. So both the classic and centered header layers have this section and then hit save.
Perfect. And then now when we come into a customizer, we should see this new set new section in our header area. So it's not there yet. Let's give it a refresh. Still not there. Let's go back and make sure it's saved properly. Bingo liquid under head of promo. Oh, I bet you, it was called under head of promotion, right? Not under head of promo promotion. And let's double check that look at our sections and we have, yeah. Under header promotion. So that's why it wasn't appearing. Okay. So now let's look in our customizer and we should have access to this new section in our header. So yeah, here it is header promo, and we can just enable it here and we'll see it sits right up here just below header. And it will appear on every page of our store and we can give it different content on desktop and mobile, and we can include links and adjust the height, the font size and all, any kind of way you want and have different height on mobile, different font, size, and mobile. So have a play with that added to your store if you like. And if you have any questions, contact us here at Jade Puma.