How to Add Page Builder Regions to Your BigCommerce Store

Hello, are you guys looking to add page builder fields to your big commerce theme, or get your first page builder fields added to your theme.

In this video, I'm going to show you exactly how to do that.

Before we get started, my name is Kal, I am a developer a store and are just like you.

And I run a private community for ecommerce store owners called E commerce growth on the link at the end of the video, if you're interested, it's free.

And you know, every week I post more videos about e commerce to this channel on YouTube.

And so if you find this one helpful, subscribe, hit the bell.

And you can see more as I come out with more.

Alright, let me share my screen.

And I'm going to show you guys how to do this.

So here's the theme that we're working on.

It's just a Ruth's original theme.

And if I look at the front end, this is how it looks.

So it's very simple.

site right now, let me close this out.

And if I go into the customizer, let me show you how they look.

When you open the customizer, it's on the Design tab by default, switching to the Preview tab.

IDEs hides the view of the widgets.

So you want to stay on the Design tab.

And there's two different ways that widgets are going to show up here in the customizer, there are blue regions here.

These are your regular regions, if you will, or non global regions.

And then there are these purple regions, which are listed as global regions.

So I'll talk about the difference, I'm going to show you how to add more to your themes.

So you can put them wherever you want.

These can be put wherever you want and big commerce so you're not limited by the place that they are in your current theme.

Or if your theme doesn't have them at all.

As long as you're on stencil, you can add them to pretty much any wear on your site.

So you can get really creative with them.

Now I'm going to show you guys for the purposes of this video, how to edit, how to add one here below the newsletter sign up.

How to add one here at the top of my footer bar, and maybe how to add one in here and why you would want to do that.

So let me show you how to do it.

And then we'll talk about, you know how, how it's useful, I guess or how best practices? Yeah.

All right.

So let's go to storefront my themes.

And here's what you need to we need to edit the theme files.

But if you're running an original theme and and customized theme, then there's no option to edit the file.

So what you have to do first is you have to say make a copy.

So we're just going to call this routes copy.

And then when this is done processing, we're going to apply it.

So instead of instead of running the original theme, the untouched theme, we're going to switch to be running this copy, which is an exact copy of the theme that was there.

Because we're making a copy of it right now.

Alright, so let's see here, processing theme.

This does take just a minute or two here.

Alright, so now we have roots copy.

Let's go ahead and click the ellipses and choose Apply.

And we're going to apply the original version.

If you're running cornerstone, you probably want to apply Cornerstone light.

And Alright, so now we're running routes copy original, and we can click Advanced.

And now we have the option to edit the files.

Alright, so once we get into the stencil file editor, it puts us on home dot HTML right off the bat, because it knows this is where most people are editing their theme most of the time.

So if the place that you're looking for is on the home dot HTML, the place where you're you want to install a page builder region, you're already right here.

Now in this situation, I said I was going to install this under the newsletter sign up.

And if I scroll all the way down to the bottom of this theme file, then you can see that there's like recent posts, and then there's a region and then there's no newsletter sign up here on the home.

And it just That's because on this particular theme, unlike some it's putting the newsletter signup into their actual footer.

So this is all considered part of the footer.

So if you were adding a region elsewhere on the homepage, you could add it right here and it's just a matter of figuring out which line you should insert it to.

But in this case, I'm going to open up templates components common and footer HTML to open my footer file.

Now if you're trying to add it to the header file, this would be the header dot HTML is probably the you know the other place you're most likely to be trying to add a page builder region to so opening the footer dot HTML.

You can see that we have this banners function and then we have the Use letterbox right here.

So that is identifying the correct place that we wanted to put this new page builder field in, which I said was underneath the newsletter and above the footer, although it's technically part of the footers above the visual footer, if you will.

Alright.

So here's what we do, we're gonna make a new line where this is going.

And we're going to, we're going to put this in here, I'm just going to paste it.

So I get the syntax, right.

And we're going to have it look like this.

So here's what a normal region looks like is we have three curly brackets to open it, we have three curly brackets to close it.

And then we have region space name equals, and then some quotation marks with a name inside it.

So it has to have the three curly brackets, it has to have region and name separated with a space and all lowercase, it's got to have the equal, it's got to have the quotation marks, but it doesn't have to have is this thing it says header bottom that I paste it in, we can call the region, whatever you like, we could, we could literally call it whatever you like.

And it doesn't matter.

You do want to separate words, with underlines.

Typically, we can't have spaces in here cuz that'll definitely wreck some things.

But let's put in, we're gonna put in two regions, we're going to put in one that is the whatever you like region, and then we're going to put it another one way where we're just going to add this flag at the end of the name.

So the way this looks like is you put hyphen, hyphen, or dash dash, and then global all in lowercase.

So whatever you like, dash dash global.

And if I click save and apply this will take a minute.

You guys can sing a song or something while you're waiting.

Sincil file editor does take a minute, I could cut this out.

But I kind of want you guys to see that.

It does take a minute.

So if you're sitting there waiting for it to apply on your side, you're gonna see the same thing that I'm seeing, which is it takes about, you know, 30, well, 30 seconds, I guess a minute longer than it's supposed to take 30 seconds.

All right.

So let's save.

Now, if we come back to the front end, we don't see anything different yet.

And it's because we added those regions, but we didn't put any actual content into.

So let's go into let me close that out.

We're going to go into the customizer from the backend, when we go to storefront my themes and then just click Customize on your active theme.

This will take 10 seconds to open.

And if we scroll down now, now you can see that we added two more regions.

So we have an additional regular region or a blue one.

And we have a global region, which is purple.

And if we drag something in here, we can say this is in a region, I just I just sorry, I quickly just drag this text field into here.

And I'm gonna drag another text field into the global region, I want to say we just change the text in here to say this is a global, low bow region.

And I'm going to click publish.

So that's updated, it says changes have been successfully published.

If we go back to the front end.

Now this does sometimes take half a minute to a minute to apply on the front end, even after the customizer says it's been applied.

So if you don't see what you put in here, right off the bat, when you refresh, then maybe give it a minute and give it another refresh.

Alright, so at the bottom of the homepage, here, we see the content that we put into the regular region, and we see the content that we put into the global region.

But if we go into like a category, for example, although both of those regions are present, only the content from the global region is showing up.

And just to confirm that in the back end, if I click in here to the apparel category, click back to the Design tab.

So I can see the regions that I can scroll down.

And you can see Yeah, the regions still there.

But there's no content.

And that's because the difference between a regular region and a global region is that the content that you put in it is either the same everywhere that region name appears, or it's different.

So by putting this in a regular region, it means that that region is available wherever it's in the template, but that the content I put into it is only going to show up on that one URL.

So let's just talk for a minute here about why that would be useful.

Let's say you go into a product page.

And let's say you have a message here that you want To put on here saying that this particular item is backordered, right? This is, or let's say, two week lead time on this product.

Right.

So that would be something that you obviously don't want to say that on every single product, but you would want to be able to say that on the individual product.

Now another message that you would want to show on every product would be maybe adding a region underneath your Add to Cart, where you could put like a trust seal or, you know, 100% Satisfaction guaranteed or something like that, that's going to increase, you know, increase conversions decreased by resistance, you would want that to show everywhere, on every product page, right.

So if you put a global region into something like this, that's underneath the add to cart, it's going to show up, not really on every page of the site, but every page where that region is present.

So that would be all of your product pages, for example.

Whereas this, this region that we put down here, which is actually available on every template on the site, because it's part of the footer, you can see this is still showing up here on the product page, you know, and if we change this while we're looking at the product page, then you will see, when this is finished updating, that it changes on the homepage to.

Still saving, it's thinking.

Alright, so let's click over to the homepage.

And you can see, it added those exclamation marks right there.

So, you know, I wanted to showcase that to really have you guys understand the difference between global and not global, because global doesn't necessarily mean that it hears everywhere, it means it appears everywhere that region is.

So if you add a region to someplace that truly exists on every page, like the header or footer, then it effectively is on every page.

Whereas if you apply it for, you know, into the guts of a page that is only within certain templates, like your product View section on your product, then it's only going to show up on those pages, because that's the only place that those regions exist.

Let me show you a couple more things here.

And then I want to, I want to show you something that is going to make all of your page builder fields better.

So I told you, I would also show you a region here at the top of the footer inside it.

So I'm going to do that by going to the very top here of the footer, and just creating a new line and putting a region in here.

I do need to create it with a different name though, because you can't have two regions be the same name.

So I'm going to call this footer, underline top.

So you always want to use underlines within the name.

You always want to use dashes to put in the global flag if you're going to make it global.

And I do want this one to be global, because this is again going to be in the footer.

And I want this region everywhere.

And I'm going to make one more here.

If I scroll down here, you can see we got articles and this one right here where my categories are showing, I'm going to put a new region in here called footer categories.

And I'm going to just comment out the category listing that's in there automatically, which is dynamically showing.

So like in the footer, right now, this shows an exact category structure that matches what I have in the header dynamically.

But let's say we want to manually put the categories that we want there, right? Well, that would be a good opportunity to use a region.

So I just added a region there and I added one at the top of the visual footer.

So I'm going to click Apply.

And I'll show you why.

I wanted to show you guys that give this just a minute to apply.

Mistakes frustratingly long every single time.

It's just just how long it takes.

Alright, so I'm going to come back here to the customizer where I was, and I'm going to just click refresh.

So I can see those new page builder regions.

And I'm showing you this as an extra step, even though I've already showed you how to add regions, because I just want to help you guys, you know, start to visualize how these are important to you.

So looking at the footer, now you can see that I've added two different regions.

And my category menu items here disappeared because I commented those out.

So I have the two new regions and I got rid of my categories that were shown down there.

So I could drag a text region down here.

And let's say, let's, let's put a promotional message here and say, Save 5% In checkout with the code safe, right, and we can change the text color to be white, and maybe decrease the font size a little bit.

You can bold it if you want.

And just to make sure that it looks good, I'm going to add a little bit of bottom margin to kind of separate it from the stuff below.

That looks pretty good.

That's a good way to get an extra message in there.

Now, I want to show you guys how to replace the categories.

And we'll show you two different ways.

First of all, we can come back here to the Page Builder, and drag an HTML field in here.

And I could, you know, manually create an ordered list items here and style them.

Just like that, let me just put in a couple, click Save.

And you can see that they all showed up here.

So this is a good way to make it so that you guys can fairly easily and dynamically update your links here in the footer, you can do this with all the columns, this column, this column, this column, you can really make your whole footer be page builder content if you want, which is really easy to edit on an ongoing basis.

Now, you may find this to be difficult coding wise, or you may not.

But let me show you a different way to do it nonetheless, which is big commerce packages, their page builder with 12 Widgets at the time of this recording.

And, you know, they they are what they are, I think that I feel like they're missing some things specifically, like responsive controls.

So like in this text widget that we dropped in here, we set it to 22 pixels, but maybe you want to make it smaller on mobile, so it doesn't look overly large.

Maybe you want to make it like 18 pixels on mobile instead of 12 instead of 22.

They don't give you a way to do that.

So I think these widgets are good, but they're a little bit simpler, which is why my company put together a an app called Epic page builder widgets, and you can get it more than half of the Widgets at the time of this recording are free within this app.

And let me click publish.

And I'll show you what it looks like once you install it.

Obviously, you just go to that app store and you install it like you would any other app.

And once you get it installed, it'll show up here in your apps folder.

It'll say epic page builder widget app.

And you can come in here and turn on whichever widgets that you want.

These are the ones that are paid to upgrade currently.

But you can see there's a whole bunch of them in here.

And I don't even have the paid one installed on the store.

But I want to show you one of them if I go back into the customizer.

One of them is called Custom menu.

So if I scroll down here, I could drag custom menu in here.

And now it gives me this nice little thing where I can add links like this.

And you can change the title of each link, right, so link five and where it goes.

And you can make it open in a new tab, which is nice.

And then you can click these three dots up here to go to settings and let's just make them white, let's make them let's make them like gray on hover, you can change the alignment, you can change the spacing.

Right.

So let's do five, let's make it a little bit smaller, make it 16.

But you can see here that we can change the size of these on on mobile and tablet, which is really nice and unbold this and now it really looks a lot like what we had here, you know, for other columns.

And so you can use this custom menu function to about all of your menus like that.

And there's a lot of other widgets, you know, you saw that come with this, you know, one of the one of the most popular ones is the accordion, which is you gotta pay to get that one.

But this hero masthead is really nice.

Because it creates a thing that looks like drag it in there creates a thing like this that looks great on top of your category pages or whatever adds a background image lets you put a title and whatnot in here and this is fully customizable as well.

And another one that's really popular just you know, and again, these are just in the free ones is an alternating widget and alternating banner here where you can put one in here, let's just duplicate this.

And then we can come in here to image settings and say right align the second one.

And look at how much look how much better we put on the page in just that little amount of time.

So once you get the regions in here, you can see there are all kinds of stuff that you can do.

I, you know, we have more widgets coming out, we've added a ton of widgets to what you can do with big commerce.

But even if you never get our app, there's a lot that you can do just with their text widget just with their custom HTML widget.

And, you know, if you have trouble getting more regions on your page, consider reaching out to somebody like us, we can easily do it for you.

But yeah, so hopefully this gets your mind running on what you can do with page builder regions.

And, you know, if you found this helpful, click the like button, and be sure to check out our community of storeowners which is right appeared https://joinecommercegrowth.com.

It's a free community.

And if you need help with your store, hit us up at Epic design labs calm and keep in mind, I am putting these videos out every week.

So if you're stuck on something, leave me a comment on one of our videos.

And maybe that'll be what I talk about next week.

I appreciate your time you guys and I'll see you next time.

Thanks