(00:01) Introduction
“Hello! Are you looking to add Page Builder fields to your BigCommerce theme, or get your first Page Builder fields added? 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 and store owner just like you. I also run a private community for e-commerce store owners called E-commerce Growth. I’ll share a link at the end of the video. Every week, I post new videos about e-commerce to this channel.
If you find this video helpful, subscribe and hit the bell to stay updated with more!”
(00:31) Setting the Stage
“Let’s jump into it! Here’s the theme we’re working on. It’s the original Roots theme, and this is how it looks right now on the front end—a very simple site.
Now, let’s head into the customizer.”
(01:06) Design Tab vs Preview Tab
“When you open the customizer, it defaults to the design tab. Be careful not to switch to the preview tab because it hides the widgets. Stay on the design tab to access the widgets.
There are two types of regions here:
Blue regions: Regular or non-global regions.
Purple regions: Global regions.”
(01:41) How to Use These Regions
“I’m going to show you how to add more regions to your theme. With BigCommerce, you can place them wherever you want. I’ll demonstrate by adding a region below the newsletter signup, at the top of the footer, and explain why you’d want to use them in different spots.”
(02:16) Editing Theme Files
“To add Page Builder regions, you need to edit theme files. If you’re using an uncustomized theme, there’s no option to edit files directly. You’ll first need to create a copy of your theme.
Go to Storefront > My Themes.
Select ‘Make a Copy’ and name it (e.g., RootsCopy).
Once it’s done processing, apply the copied theme to your store.
After applying, click Advanced and choose Edit Theme Files.”
(03:25) Editing Home.html
“Once inside the file editor, it opens to home.html by default since most people edit this page first. Scroll to where you want to add the region.
In this case, we’re adding a region below the newsletter signup, which is located in the footer. I’ll go to templates > components > common > footer.html.”
(04:47) Adding Page Builder Regions
“Now, we’re going to add a new region to the footer. Here’s how you do it:
Make a new line where you want the region.
Use the syntax: {{{region name="your-region-name"}}}.
Replace your-region-name with any name you’d like, and be sure to use underscores instead of spaces.”
(05:19) Global vs Regular Regions
“If you want to make a region global, add --global to the name. This means the content in this region will appear across all pages where the region is available.
For this video, I’ll create two regions:
A regular region called whatever_you_like.
A global region called whatever_you_like_global.”
(07:00) Customizing Content in Regions
“Once saved, head back to the front end. You won’t see any changes yet because we haven’t added any content to the regions. Let’s go back to the Storefront > My Themes > Customize.”
(07:35) Adding Content to Regions
“Now, you can see the new regions we added:
A regular region (blue).
A global region (purple).
I’ll quickly drag a text field into each region to demonstrate. One will say ‘This is a region’ and the other ‘This is a global region.’ After publishing, you can refresh the page to see the changes.”
(08:55) Understanding the Difference Between Regular and Global Regions
“On a category page, only the content from the global region will show up. The regular region content will only appear on the specific page where it was added. This flexibility allows you to add custom messages to specific products or pages, while global regions display universal content across multiple pages.”
(10:09) Practical Use Cases
“Here’s why this is useful:
You might want a region on a product page that says ‘This item is backordered’—a message that’s only relevant to one product.
On the other hand, a global region might be used for a trust seal or ‘100% Satisfaction Guaranteed’ message beneath the ‘Add to Cart’ button, which you want on all product pages.”
(12:02) More Customization in the Footer
“Let’s add another region at the top of the footer and one for the category listings:
Add a new region called footer_top at the top of the footer.
Replace the dynamic category listings with a new region called footer_categories.
Once saved, you can customize these sections with widgets.”
(14:25) Drag and Drop Customization
“After applying the changes, refresh the customizer to see the new regions. Now, you can easily drag widgets like text or HTML into these regions. For instance, we can add a promo message like ‘Save 5% with code SAVE’ or replace the category list with custom links.”
(16:52) Enhancing Page Builder with Widgets
“BigCommerce comes with built-in widgets, but they’re somewhat basic. That’s why we created an app called Epic Page Builder Widgets, which includes more customizable widgets, many of which are free.
For example, the Custom Menu Widget allows you to easily manage links and customize their appearance without coding. Let me show you how it works.”
(17:59) Using Epic Page Builder Widgets
“Once installed, the app adds several free and paid widgets. One popular free widget is the Custom Menu Widget, which makes it easy to create and manage menus dynamically.
Another popular widget is the Hero Masthead—great for adding banners with custom text and images to category pages.”
(20:32) Final Thoughts
“With Page Builder regions, you have so much flexibility to add content, customize pages, and manage your store’s layout easily. If you need help adding more regions, feel free to reach out!
If you found this helpful, be sure to like the video and join my free community for store owners at ecommercegrowth.com. You can also reach out to us at Epic Design Labs if you need help with your store.
Thanks for watching, and I’ll see you next time!”
