If you’ve been a BigCommerce merchant for a while, you know that the platform has never had a great way for store owner’s to easily control their design. Previously, you could use Marketing Banners, but they were limited. You has to assign them to specific pages, so they couldn’t be displayed sitewide. In addition, you really needed to know HTML in order to create any sort of complex design using them.
Thankfully, BigCommerce listened and introduced Page Builder a few years ago. Let’s review what Page Builder is, where you can use it on your website and how to extend its capabilities.
What is BigCommerce Page Builder?
Put simply, Page Builder is a drag-and-drop visual content editor. It allows you to add widgets (text, images, videos, etc) to different pages on your website. Widgets are added to regions, which can be page-specific or global. The best thing about Page Builder is that it’s responsive by default. This means that your layouts will work on all screen sizes automatically – no special coding required!
Types of Page Builder Widgets
The BigCommerce Page Builder includes several basic widgets that you can use to add content and create layouts:
- Layout widget – used to create columns that you can drop other widgets into
- Text widget – great for adding headings or paragraph text
- Image widget – used to add photos to a page
- Hero Banner widget – allows you to create an image or color banner with a text overlay
- Carousel widget – lets you display multiple scrollable banners with optional text overlay
- Video widget – allows you to add YouTube or Vimeo videos to your page
- Product widget – lets you embed a product listing into your page
- Product Set widget – allows you to add multiple products listings to your page
- Button widget – used to create a button linking to another page on your website
- HTML widget – great for adding custom code, HTML or scripts to your page
- Spacer widget – creates space in between other widgets
- Divider widget – displays a line on the page
In addition to the basic widgets that come with Page Builder, there are several 3rd party widget apps which you can add to your store. These apps are all free to install, but some make you upgrade to a paid plan to get access to all their available widgets.
You can mix and match content in a layout. For example, you can use a layout to create three side-by-side columns. In each column, you can put a heading, an image, text and a button. Or you could put an image in one column, text in the second column and a video in the third column. For most store owners, BigCommerce Page Builder offers enough flexibility to create engaging layouts for their homepage or other content pages.
Where to Use Page Builder
The most obvious place to utilize Page Builder is your website’s homepage. It’s great for promoting different categories, highlighting new or bestselling products, featuring popular brands or advertising sales. But you can use Page Builder in other areas of your website as well.
Most themes include regions at the top of category pages, which you can use to add lifestyle banners that engage shoppers. I’ve also seen clients add product set widgets to these areas to highlight a category’s best-selling items.
Some themes also include Page Builder widgets on the product page. These can be used to promote deals or discounts, share product attributes or statuses like “coming soon” without having to rely on custom fields or special coding.
BigCommerce Page Builder can also be useful in your website’s header and footer areas. It’s ideal for adding a sitewide text banner under your main menu to promote sales or promotions. In addition, you can add widgets to your footer featuring similar sitewide content, value propositions or contact information.
Finally, Page Builder is a wonderful tool for creating custom web pages. Instead of just having plain text on your About Us page, you can use Page Builder to create a more dynamic layout. Add photos of your business, employee bios, store hours, organization seals and more – all in a nice organized layout. You can also use it to create custom landing pages for your marketing efforts.
Learning to Use Page Builder
The best way to educate yourself on the BigCommerce Page Builder is simply to play around with it. Nothing you do will be visible to your customers until you hit the Publish button. So you can drag and drop widgets, testing this out as much as you want without having to commit to the changes. If you don’t like how things look, just click the Discard button or exit Page Builder without saving.
You can also save your work for later. This is a great option if you’re building out a landing page that will take some time. Saving your changes means you can come back to finish your work later – and shoppers won’t see those changes until you ultimately click Publish.
If you’ve tested Page Builder but aren’t quite confident enough to really use it, there’s help available. BigCommerce offers a guide to Page Builder in their knowledge base, which covers all the basics. For more details and examples, along with advanced Page Builder tips and tricks, watch my YouTube video below:
Want a more interactive or personalized training? Sign up for my BigCommerce Page Builder training, a group session offered once a month.