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.

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

Widgets

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.

Layers

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.

Theme Styles

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.