Page Builder Overview
Page Builder is a browser-based tool that offers merchants visual editing and content management capabilities to design their stores. The Page Builder interface consists of Theme Styles (opens in a new tab), Widgets (opens in a new tab), and Layers (opens in a new tab).
Theme Styles
To customize the different style elements of a theme, such as colors, font, and text size, merchants can use the Theme Styles feature of Page Builder.
As a theme developer, you can configure your theme's settings to determine how merchants can personalize your theme. For example, you can modify how merchants can customize colors, fonts, and the number of products to display per feature. For information on how to configure your theme's files, see Theme Styles Configuration.
Widgets
Page Builder's Widgets tool lets store owners create and manage page content for their stores. Merchants can use widgets in the control panel to drag and drop content such as text, images, videos, banners, carousels, and product lists.
Developers can build user interfaces for their custom widgets within the Page Builder platform using a pre-configured schema. While BigCommerce provides the setting, logic, and design, the widget author provides information about the various configurations that make up the widget. BigCommerce uses the same mechanism for all platform-provided widgets.
New widgets are injected into the storefront using BigCommerce's Widgets API. You can add custom configuration settings to your widget's Page Builder UI by including the schema property in the Create a Widget Template request.
For settings that you can pass as JSON objects into the schema property of the Create a Widget Template endpoint, see Widgets UI Schema.
To learn more about using third-party widgets with Page Builder, see Third-Party Widgets.
For step-by-step tutorials on creating and managing widgets, see Widgets API Tutorials.
Layers
The Layers tool helps merchants organize existing widgets on the current page.