How do I use the Page Builder?
Add sections, configure settings, and preview your changes using the Page Builder. This is the control center of the theme where page templates can be customized for the home page, product page, and more.
The BigCommerce Page Builder feature, was rolled out to stores from 8th April 2020. Unfortunately it doesn't have any available control schemes to fully integrate with themes. We recommend using the built in features of the theme before utilizing Page Builder widgets.
Access the Page Builder
Go to Storefront › My Themes › Customize to launch Page Builder.
Along the left edge of the screen are buttons to:
- Widgets (Page Builder)
- Layers (Page Builder)
- Theme Styles
The Page Builder lets you easily add content (like text, images, banners, videos, and buttons) to your storefront. We call these blocks of content “widgets”. Widgets can be added to several of your store’s pages, including the homepage, product pages, category pages, brand pages, web pages, blog posts, search results page, and the cart page.
To add a widget, drag it from the Page Builder menu on the left and drop it into any of the preset regions.
After you drop a new widget on the page, it appears in the Design area on the right, and the Page Builder menu updates to show the widget’s configurable settings. For widgets with text, you’ll edit the text directly on the page. The widget’s available style settings differ based on the type selected.
You can stack additional widgets by dragging them above or below existing widgets.
This tool helps you see how existing widgets are organized on the current page. It lists the titles of all the available widget regions on the page.
- Expanding a region will show any layouts that are in that region.
- Expanding a layout will show the columns in that layout.
- Further expanding the column will show the widgets in that column.
In the Layers menu, you can drag and drop layouts and widgets to change where they are arranged on the page. Clicking an individual layout, column, or widget will bring up its related settings on the left.
The Theme Styles menu appears to the left of the preview area when you launch Page Builder. This is where you can customize attributes (like color, font, and text size) of several of your theme’s design elements (like the header, logo, navigation, and footer). You can also turn other design elements off/on.
The theme’s elements are grouped based on where they appear on the storefront (like the homepage or checkout page) or what type of element it is (like a button or icon). The actual sections and their names may differ from theme to theme.
The BigCommerce Page Builder documentation is here: https://support.bigcommerce.com/s/article/Store-Design