How to Move Widgets Around in BigCommerce Page Builder

Hey there, are you guys trying to figure out how to move widgets around the big commerce page builder? And you can't figure it out? You're sitting there thinking, what do I have to do just delete this thing and recreate it.

Don't worry.

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

Before we get started.

My name is Kal, I'm a developer, a store owner.

And I run a free private community called E commerce growth for store owners just like you and me.

And every week, I post more ecommerce videos here on YouTube.

So if you find this one helpful, subscribe and hit the bell.

Now you can see even more.

Alright, I'm going to share my screen.

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

Okay, I'm in the big commerce page builder.

I'm sure you guys know how to get to it.

But I'll I'll get out of it, and then go back into it just to make sure that you guys know.

So in the backend of your big commerce store, go to storefront my themes and then customize.

And it'll bring you right to the page builder.

Now, when you when you hover over fields in here, it highlights them, if their page builder widgets, you you've already been putting content.

And I'm going to make that assumption because you're trying to figure out how to move through the content that you put in.

And here's the trick.

There are three tabs over here, there's the widgets tab, which exposes the Page Builder widgets, there's the layers tab.

And then there's the theme Styles tab.

So theme styles is where you set the options that are preset within your theme, you know, like the color of the headers like that.

But this little button right here, everybody kind of glosses over.

And if you click it does this and you're like, what is that? Well, your page builder widgets, the whole page builder system is made up of three different layers, you have the regions, which are defined in your theme.

So these are the things the the spots that you can put widgets into technically, whether you put a widget or layout into here, if you if you put a widget into any of these fields, it creates a layout and then puts the puts a column into that layout, and then the widget into the column.

And you may not realize that all of this stuff is being done.

But let me just show you here.

So within this header, bottom global region, which is right up here, if I drag a piece of text into it, look at all this stuff that just got added here, when you see it in the Layers menu, so it added within the header bottom global region, it added a layout, it added it automatically assumed that there's only one column in that layout.

And then it put the text widget that I had embedded into that column, right.

And you can from the Layers menu, you can click to, you know, to see the settings on each of these layers, you can I guess you can't click on the region, but you can click in the layout, and you can click in the column.

So if for example, let's let me just take this out.

And let's say that instead of me having done that you dragged in a layout, and it automatically says that it's two columns.

And let's say that you put text in this column, and you put an image in this column, right.

So now we have the region, we have the layout container in there.

And the layout container is where we determine how many columns there are, and like the width of the columns, for example.

So we can do something like that.

And then you have the two columns, and each column has its own information, including this padding that it puts in automatically, which I find annoying, I reduce this to zero in most of my designs.

Well, we can see we have two columns.

And then we have two images in between there.

But you can't just drag this image widget into this column, right.

And so that's why you guys are frustrated.

And that's why you're watching this video.

Right? Here's how you do it from the Layers menu.

When you hover over these, you'll see that it highlights the stuff on the you know in the Page Builder.

So you can you can double check to make sure that you're highlighting the right thing.

And you can take this image, click here on the little six dot handle grabby, thingamabob, drag it down and to the next column, and you just moved it.

So let's say we wanted above the text now now we can move it above the text just like that.

And you realize that although this system is a little bit cumbersome, it's not as bad as you were thinking.

Right? So let's say we wanted to go back to the to the layout, which is above it and add a third column.

Look at that.

We did it.

We want to go back to two columns.

Now keep in mind if we get rid of that third column, it goes back to two columns, meaning that third one disappeared.

So what that means If we had this text that was in that third column, and we went to two columns, that takes us now, God.

When you get rid of that, that block, it's going to delete the the content of the widget.

Anyway, maybe I'm getting a little too deep here, I want to show you guys now that you can see that you can drag things around, you can drag it from, you know, one column to another, then you start to see that, you know, it's not as bad as you thought, number one, but it is a little bit chaotic in that.

How do you tell what's what? Right now, obviously, you can, you know, you can hover over these and watch the items that are being selected behind it, right? So I can tell this is column two, because it's let's call them two, and this is column one.

But it's a little bit tough, especially once you start dragging this stuff up and down.

Because you know, you came to this video to figure out how do I move it around, once you start moving it around, you'll realize, wow, there's a lot of stuff I could move it to.

Right.

And if and if you can, if you're just dragging this up and down, then it can get a little bit chaotic, especially because it's hard to drag it all the way from the top to the bottom.

At least on a Mac, maybe it's a little bit easier on a PC or something.

But this is like a vertical scroll within a vertical scroll if I'm moving stuff up and down.

So I want to show you guys just a couple of tricks.

First of all, I want to point out that the way that your regions are named in this case, it says header, bottom global header, bottom home carousel, home below carousel, you know, you might you may be on a different theme.

And it may show some crazy stuff or some stuff that is not descriptive at all.

I want to show you guys where these titles come from of the regions, they come from the actual theme, right? So this is, this is the cornerstone theme that I'm running.

And it shows you right here I've selected or highlighted where a region is.

And this is what regions look like I have a whole different video on how to put regions in regular regions versus global regions.

But this is all it is, right? This is this is what puts that little droppable spot into the template that shows up in the Page Builder.

So all this says is Region Name equals blank, right home, in this case home below care.

So now every region has to have a unique name, unless it's a global region, then it can be the same named region across multiple templates.

But there's no law saying that the name that the guy that made your theme used is going to make any sense when you go to use it.

Right.

So I could have named this, you know, snickerdoodle one.

And what's going to happen is it's going to show up here saying snickerdoodle one, which doesn't make any sense.

Now, in this case, you know, I've named things in a way that kind of makes sense had her bottom had her bottom global, you know, home below menu.

But you know, that can probably be improved on you know, but I just wanted to show you this to show you that, number one, if the names don't make sense, they could be changed if you really wanted to.

And number two, why they're named that at all right, so this, these names are pulling from the theme.

Now when when I dragged this in here, when I when I drag the column in there, and it created the layout and the column and I dragged the image into it, then it created these elements here, which are not part of the theme.

But you can see that if I click into layout right here, it has a name field.

So I could actually name this something called like let's just call this left, right banner.

And you can see that when I name this layout, it shows up in here.

It can't name columns.

And you can't name individual widgets, but you can name the layouts in it.

And the reason I think this is important is because you know if you just leave all these saying layout, you know layout layout, layout layout, it's really hard to figure out which is which.

And although you can hover over them to figure out in the moment, which is which, you know, as you're dragging them up and down, you're going to lose track of which is which and so just pro tip, go in here and label the name of each of your layout.

So let's call this you know the hero banner.

Right Alright.

And then down here I have another layout.

So we're gonna call this original amberlite Right, and let's click what's kind of nice is you can click on each of these layouts.

And you can see that it scrolls into view.

So we're going to call this hero camper light.

Here we see this.

So here we have a couple.

So I have like one column, and it has kind of a couple different rows.

And I'm just gonna call this pack light, Euro pack light, right now.

You know, I had somebody else request this video, and I thought it was, you know, a good one for me to shoot because I had just put this hero page together and realize that I had put all of my homepage heroes into my header widget regions, which makes no sense.

And actually have a region down here on the page, you can see that doesn't go edge to edge.

And I actually wanted all of my regions to be all of my widgets to be in this block right here, right? So I want to identify which block that is.

And I'm going to move all of this stuff down to it right here in front of you guys.

So the way to, for me to easily identify which region this is, I'm going to just drag a layout widget into it.

And so you can see that it went into the home column upper.

And so that's definitely where I want to get all of my stuff to.

So let's do this together.

We have.

So we have this layout right here that I named hero PAC light, which is the lowest layer that I'm showing on the page, and it's got some columns.

And you know, I showed you guys that you can drag.

You can drag widgets into other columns or rows or whatever, right, which is pretty cool.

But you can also drag an entire layout.

So you can see when I hover on the widgets six dot handle six dot handle, when I when I hover on the column, no handle, but when I hover on the entire layer, you know, which in this case, just contains one column, the layer itself is draggable.

So remember, I wanted to drag all I want to move, move all this stuff to the home column upper.

So what I'm going to do is take this handle, drag it to home column lover, and now it's in the right spot.

So now I need to go to my next layout and drag this one to the home column upper.

Now you can see when I did that it dragged it to the bottom position and home column upper and I wanted it to be above the pack light.

So I'm going to just drag it until it goes above the backlight, just like that.

So now I got to have my layouts in there.

Now I'm going to scroll up here.

So here's the next layout, which is going to this time is going to include a three column layout, right, so I had extra columns here just to create some spacing on the side.

So by dragging the layout, just like that, now it's in the right spot.

And you can see it dragged all of the columns at once.

All right, keeping on going here.

So next I have the hero banner.

And I think I do want to drag that down here too.

So I'm going to drag that down here as well.

So now all of those widgets, you can see where all the empty widget fields were.

I'm going to come up here and delete this whole thing that I've put in here just for the video.

So now if I click Preview, we'll get that everything is in that nice.

Nice if you could see my hands.

That's a nightmare.

Everything is in that nice hemmed in column, which is what I intended the whole time.

So now it's all in the right spot.

Hallelujah.

You can move stuff between page builder fields, you can move entire layers.

And you can see if you just take the one extra step of naming your layers, it becomes massively easier.

Now if you try this without naming your your layers, then you'll probably see why took a couple minutes of my time to show you that you can name the layers to make it easier and it does make it easier.

Alright, so I guess we're all done here.

So you can move things around.

You can move widgets, you can move layouts, it's super easy.

Be sure to check out our widget if you haven't already, which is the epic page builder widgets.

It adds all these extra widgets to your screen.

There's so many good ones in here.

The hero masthead is really good.

I don't know it's hard to pick a favorite baby but that one is just so useful as like a hero for your category pages and whatnot.

got that and especially the the accordion, the accordion is really good.

Because you can you can put that on really every page, I'm gonna do another video about how you know just using the accordion is a great a great tool for SEO.

I don't want to give it away but alright, so check it out.

And if you found this helpful, hit the like button.

Be sure to join our free community of store owners at joinecommercegrowth.com We put them on the screen here.

If you're looking for a dev team to work with you on your store, reach out to us at Epic design labs.

And you know, I'm always looking for new ways to help you guys out I'm posting lots of videos.

So shoot me a message here or leave me a comment below the video.

Let me know what you're struggling with.

And maybe that'll be my next video.

Thank you, guys, so much and I'll see you next time