How to Move Widgets Around in BigCommerce Page Builder

If you’ve been frustrated with trying to move widgets around in BigCommerce Page Builder, you’re not alone. Many users struggle to figure out how to reposition widgets without deleting and recreating them. The good news? It’s simpler than it seems. In this video, I walk you through the process of moving widgets in the BigCommerce Page Builder step-by-step, so you can customize your store layout without any headaches.

Why You Should Watch This Video

In this video, you’ll learn how to:

• Easily access the Page Builder and navigate the interface.
• Understand the key components like widgets, layouts, and regions.
• Move individual widgets and entire layouts with ease.
• Organize your layouts effectively by renaming them, making complex designs easier to manage.

Key Takeaways from the Video

Here’s a quick summary of the video, but for the full experience (and some extra tips), be sure to watch it all the way through!

1. Introduction to Page Builder Widgets (00:02)
   Learn how to access the BigCommerce Page Builder and the common frustrations users face when moving widgets.
2. Navigating to Page Builder (00:56)
   Step-by-step instructions on how to access Page Builder via Storefront > My Themes > Customize and an introduction to the three key tabs: Widgets, Layers, and Theme Styles.
3. Understanding Layers and Layouts (02:00)
   Kal breaks down how Page Builder is structured, explaining the relationship between regions, layouts, and widgets.
4. How to Move Widgets (04:28)
   A practical demonstration of how to move widgets between columns and regions by using the Layers Tab and the six-dot handle.
5. Renaming Layouts for Better Organization (09:41)
   Kal shows how renaming layouts helps you keep track of complex page designs, preventing confusion as you rearrange content.

Watch the Full Video

For a deeper dive into how to manage your BigCommerce store layout, check out the full video above. If you find it helpful, don’t forget to like, subscribe, and hit the bell to get notified of more helpful ecommerce tips.

Full Transcript

(00:02)
“Hey there! Are you trying to figure out how to move widgets around in BigCommerce Page Builder but can’t seem to get it right? Are you wondering if you need to delete and recreate them? Don’t worry, in this video, I’ll 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 Ecommerce Growth for store owners like you and me. I post ecommerce videos on YouTube every week, so if you find this helpful, be sure to subscribe and hit the bell for more.
(00:26)
Alright, let me share my screen and show you how to do this.
Navigating to the Page Builder:
I’m already in BigCommerce Page Builder, but I’ll show you how to get there. In the backend of your BigCommerce store, go to Storefront > My Themes > Customize, and that will take you to the Page Builder.
(00:56)
When you hover over fields, you’ll see them highlight if they’re Page Builder widgets. You’ve probably already added content and are now trying to figure out how to move it. Here’s the trick: there are three important tabs in Page Builder:
Widgets Tab – exposes all Page Builder widgets.
Layers Tab – where you manage the structure.
Theme Styles Tab – where you set theme presets, like header color and other options.
Most people overlook this little button. If you click it, it shows the structure of the Page Builder system, which is made of three layers:
Regions
Layouts
Widgets
(02:00)
Let’s break it down:
Regions are defined in your theme (where widgets can be placed).
Layouts are automatically created when you place widgets.
Widgets are the actual content elements you drag in (e.g., text, images).
Let me demonstrate: In the Header Bottom Global Region, I drag in a text widget, and you can see it creates a layout, a column, and places the widget inside the column. You may not realize all of this is happening automatically, but now you know!
(03:15)
You can manage these layers by clicking on them in the Layers Tab. You can also adjust settings for each layout and column. For example, if I drag in a two-column layout, I can place text in one column and an image in the other. You can even adjust the column widths and padding.
By default, padding is added, which I often reduce to zero in my designs. However, you cannot just drag a widget into any column—this is why you’re here. Let me show you how to move widgets.
Moving Widgets Between Columns:
(04:28)
From the Layers Tab, hover over elements to see them highlighted. To move a widget, grab the six-dot handle and drag the widget to a new position. You can even move it above or below other widgets within the column.
(05:38)
It’s a little cumbersome, but it’s not as bad as you may have thought. Once you get the hang of it, moving widgets around becomes easier. You can move entire layouts, not just individual widgets, between columns and regions.
Naming Layouts for Easier Management:
(07:20)
Now, let’s talk about naming conventions. Each region in the theme has a unique name, but these names might not always make sense. For example, if a region is named “snickerdoodle1,” it’s hard to understand what it represents.
You can rename the layouts in the Layers Tab to make navigation easier. Instead of having them all named “Layout,” you can name them based on their purpose, like “Hero Banner” or “Main Content.”
(09:41)
Renaming layouts will help you keep track of which is which, especially when moving them around. I recommend naming each layout something clear and descriptive to avoid confusion when you’re working on more complex pages.
Practical Example: Moving a Hero Banner
(11:15)
Let me show you a practical example. I’ve built a page where I want all the widgets in a specific region. I’ll drag entire layouts from one region to another, ensuring everything is in the correct spot.
(12:30)
Notice how I can drag the entire layout, including all its columns, and move it to a different region. This is particularly helpful when restructuring your page.
(13:50)
Now, after moving everything into place, I can preview the page, and it’s all in the right spot. Hallelujah! You can move widgets, layouts, and entire layers between Page Builder fields!
(14:24)
To make things easier, always label your layouts. Without labels, it’s easy to lose track of which layout contains which content. Take a minute to name your layouts, and the process will go much more smoothly.
Wrapping Up:
(15:29)
That’s it! You can now move widgets, layouts, and layers around the Page Builder. If you found this helpful, be sure to check out our Epic Page Builder Widgets—they add tons of useful widgets to your BigCommerce store.
Feel free to join our free community of store owners at [JoinEcommerceGrowth.com](join ecommercegrowth.com). And if you need a dev team, reach out to us at Epic Design Labs. Let me know what you’re struggling with, and maybe that will be my next video!
Thank you so much, and see you next time!”