Here's how to add a section to the Flex theme in a Shopify store that you can add to a page to easily document and share your brand guidelines.
Theme edits needed:
- Add page__brand-guidelines section.
- Create page.brand-guidelines template
Code for the Custom Liquid Section
This code is for a section for the Flex theme. If you are using a different theme, you may need to adjust the code accordingly.
Transcript
Hey, Scott Austin here from JadePuma.
In this video, I'm going to show you how to add a section to your Shopify store, where you can document your brand guidelines, and then I'll show you how you can edit that section and add, add, and remove content from that section. So prerequisites for this, the code that I'm providing works in the flex theme. So I'm optimizing this around the flex theme. If you're not using flex you can look at the code and maybe use it, but it probably won't work out of the box, but if you're using flex, it should work out of the box. So let's get started. We're going to the Shopify admin. And what you're going to have to do is you're going to have to add a new section. I name mine page double underscore brand dash guidelines, which kind of follows the flex theme naming convention. All right. So to add a new section, you'll just right here, click on, add a new section.
You'll name it, what you see right here, and then I'm going to provide code on the blog article page where this video is. If you're looking at this video on YouTube, look at the link in the description, it'll take you to the blog article on the JP Puma website, and you'll be able to, from there the code and just copy it and then paste it into this and save it once you've added that section to your theme, you'll be able to, then let's go back out to the front end and I'm going to edit pay or a customize here.
So it's going to open up the theme in the theme, customization straight to that page. And what you'll notice is I've got out a brand guidelines section added, and this is an online store 2.0 section's anywhere section. So if you click on ad section, you'll see, I have now in the list somewhere here, brand guidelines, there it is. So I've already added it, but in this case you could add it. And notice you can add it more than once if you want. So, and I'm just going to take that one and get rid of it. So now you have a brand guideline section you've added it to your page. So let's look at this section and see all the settings behind it. So there's a lot of settings at the section of, cause over here, we have lots and lots of settings over here. So we're going to walk through a few of those.
The first one is just these break lines. You know, this section here, what are we going to, what color are we going to make that text? And what color do we want the backgrounds that's the first two are. And then we've got all these different sections and maybe sections is the wrong world. Let's call them groupings, groupings in this section, like mission and values and we can show or not show that. And we allow that, that toggle for mission and values, tone logos, and then farther down, we have iconography brand imagery show and HDE mood, board show and hide, and then pattern and texture. The one that's one grouping that's not show and hideable is the topography. So the top, the topography will always automatically show up.
So let's go back up to the top. And mission and values is just a text box where you can put in a description about your mission and values. Same thing with tone. It's just a text box. You can make that as long or as short as you want to. Now in the logos, you have the ability to add up a bunch of different types of logos. The first one being your color logo, then a monochrome. If there's a small logo for like mobile only a vertical logo, your inverse logo, the inverse logo's put on a gray background or a black background. And then also your, your icon logo or your FA icon. I also allow you to specify what is the font that you're using for your logo in case you want. And somebody wants to map to that font in something else, like a banner that they're may or something like that.
And the next section below that is the color palette. Oh, so color palette and theme, color settings, or a typography are not ad or removable. They always show. So on the color palette, this section down here of the color palette is automatically pulled from your theme settings, from your flex theme. So if you're using flex, this will all map automatically. These will all just show up whatever setting you set in theme settings for these colors is what's going to show up here now above it. We have the ability to add a color palette and that's done through these blocks here. So you add a block and the block you want to add is color. And you'll see here that in my brand guidelines section, I have 1, 2, 3, 4 color blocks added, and you'll see here, I've got 1, 2, 3, 4 color blocks or four color rows in my color palette.
So each one of blocks maps to a row here and you can see, you can specify what the main color is for that element. And I also like to use in a lot of the, the stores that I build lighter versions and darker versions of that main color as needed for contrast purposes right now, sometimes for example, here on the black one, you know, we're using a one F 2 0 4, 1 black, you notice I don't show a darker or dark is. So if you leave those elements empty, it just doesn't show it. But whatever color you pick and put in here, it'll show you that color in a swatch and then put the hex code for that color below. So this is a great way for or you to, as you're building elements out, be able to look at your color palette really quickly and see all the color choices that you have. And because these are blocks, we can move them up and down and that's gonna change the order that they display in, in this grid layout.
So then the next one below that is typography. This section is all automatically populated based on the flex steam setting. So all, all this content, if you add this section and just turn it on, all this information will show up. So it shows you, you know, what the button and colors look like. It'll show you how different text is used, what the fonts are, the style, the weights, all that good stuff. So this, this becomes really useful when you're on a custom section, for example, and you have the ability to set colors and fonts and weights for a given text on the section, you can go back to here and see, oh yeah, that's right. We're using cabin for most text and I want font size of 16. So it's a good reminder of the settings that you're already using. Now, next below that we have iconography and in the iconography, you know, content at the brand or the content creation at the brand GA guidelines level at the top section level, you can see Icono right up here.
I have the ability to put in a little text, you know, that it describes how we're gonna use icons in this store to, to represent this brand. And then we also have the ability to add blocks. You'll see here, we have an iconography block, so we can add blocks that allow us to give examples of a at iconography. And you'll see, as we add one of those blocks, what it does, it allows us to pick an image or upload an image, and we can show those images. As in examples for, I iconography now kind of similar for the brand imagery. So brand imagery, you could think of things like banners and, and different navigational elements. If we go to our brand imagery, we have the ability to do a little text explanation and you can see here, you know, we're saying images are of proud, happy, engaged Shopify store owners, and then you also can add blocks.
So here I have the block for the brand image and those blocks allow you to give examples or just, you know, supporting documentation for the text that you put in there. Kind of similar thing for the mood board. We're allow we can in our mood board at the section level, we can specify a text description and then we can add sections for the images. And once again, as you know, I said, before, these are blocked, so I can move up and down and that'll change the order they show in. Now, if I move the mood images above, you know, the brand images that doesn't change their placement on this page, you know, the mood board is still below the brand imagery. It's just within the mood board elements within the mood board blocks, changing their order will change how they display in the mood board grouping. And then the last one of these is pattern in texture. So if your brand has patterns or textures that it uses for backgrounds and stuff like that, this is where you can document that information. And if you're not doing any of these elements, like I showed you in the beginning, you can just turn that section off and it won't show on your brand guidelines page. I'm gonna save that, go back out to the front end and just you this page on the front end, all the content that we added, you know, most of us are there already, but as we make changes, they'll show up on the front end really quickly and easily like so, so that's a section you can add to your flex theme to document and share your brand guidelines internally. And you might do that externally with partners.
And I hope that helps. Thanks for watching.