> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# 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](https://support.bigcommerce.com/s/article/Page-Builder#styles), [Widgets](https://support.bigcommerce.com/s/article/Page-Builder#builder), and [Layers](https://support.bigcommerce.com/s/article/Page-Builder#layers).

## 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](/developer/docs/storefront/stencil/themes/foundations/customizability).

## 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](/developer/docs/admin/widgets-and-scripts#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](/developer/docs/admin/widgets-and-scripts). You can add custom configuration settings to your widget's Page Builder UI by including the `schema` property in the [Create a Widget Template](/developer/api-reference/rest/admin/content/widgets/widget-template/create-widget-template) request.

For settings that you can pass as JSON objects into the `schema` property of the [Create a Widget Template](/developer/api-reference/rest/admin/content/widgets/widget-template/create-widget-template) endpoint, see [Widgets UI Schema](/developer/docs/admin/widgets-and-scripts/input-reference/schema).

To learn more about using third-party widgets with Page Builder, see [Third-Party Widgets](/developer/docs/storefront/stencil/content/widgets).

For step-by-step tutorials on creating and managing widgets, see [Widgets API Tutorials](/developer/docs/admin/widgets-and-scripts/guide).

## Layers

The **Layers** tool helps merchants organize existing widgets on the current page.

## Related resources

* [Cornerstone Theme Manual](https://support.bigcommerce.com/s/article/Cornerstone-Theme-Manual)
* [Page Builder](https://support.bigcommerce.com/s/article/Page-Builder)
* [Widgets API](/developer/docs/admin/widgets-and-scripts)