Site Builder has five areas: Client pages, Menus, Top bars, index.html Settings, and Templates.

Your choices here shape how the storefront looks and how its pieces fit together, and a block you add can only show what the feature behind it already supplies, so it cannot introduce its own business logic, change who may do what, or mark an outside process as complete.

The main navigation menu lists five areas: Client pages, Menus, Top bars, index.html Settings, and Templates. A Sync button appears on every Site Builder screen.

Client pages lists the pages that belong to the client's storefront. The list is divided into tabs. The tab names correspond to the names in the Menus list. A page requires a menu, so the tabs group pages by the menu they belong to. The list has the columns Name, Menu Item Translation, Page Title, and Path. The screen has an Add Page action, and each row has an Edit action. Selecting Edit on a row opens the page record.

A page record has four tabs: Details, Page Editor, Sidebar Left, and Sidebar Right. The Page Editor tab opens a component palette and the page settings. Its toolbar carries Toggle left sidebar, Toggle right sidebar, undo, redo, viewport switches for SM, MD, and XL, and zoom controls.

The component palette includes categories such as Apps, Auth, Basic, Documents, Dynamic Product Details, Form, Pages, Profile, and Widgets. The page settings include Page Title, Allowed roles (any match grants access), Display Default Breadcrumbs, and Automations may send shoppers here.

The Menus list shows the client's menus. The list shows each menu's Name and Translation. The names of these menus match the tabs on the Client pages screen. The Translation column holds a translation key for each menu's label.

The Top bars list holds the client's named top bar records. Top bars hold named content that is not a page, such as the header and the footer. Opening a top bar record shows a Details tab and an Editor tab. The Editor tab shows a component palette and settings for the top bar. It has the same sidebar toggles, undo and redo, viewport switches, and zoom controls as the page editor. For an application bar, the component palette groups components into Basic, Page Layout Sections, and App bar pieces.

Top bars also include a welcome popup, kept as its own record next to the header and footer, whose one-time announcement you design in Site Builder with existing blocks. A top bar's editor carries trigger fields including Version — bump to show once more to everyone, Delay before showing (seconds), Route scope — comma-separated path prefixes (empty = all routes), Audience cutoff — only accounts created after this date, Start date (optional), and End date (optional). These are the welcome popup's trigger settings: whether it is on, its version, a delay, the routes it covers, an audience cutoff date and optional start and end dates. Each user sees the popup once, and the dismissal is recorded on the server, so a user who dismisses it on one device does not see it again on another. Raising the version makes every user see the popup once more, and switching it off hides it immediately without a version change. The audience cutoff keeps existing customers from seeing a welcome message on launch day, because only accounts created after that date see it. Logged-out visitors never see the popup, and it appears as a centered dialog on desktop and as a bottom sheet on mobile. Anyone can read what the popup shows, even blocks you limit by role or activation, so leave out prices for particular customers and features you have not announced.

index.html Settings opens as a form rather than a list. The form holds a list of script entries, each with a Type selector and a field for a pasted script tag, and it offers Add, Remove, and Clear the list. Each entry takes a pasted script tag with a src attribute, and the server validates the host and attributes. The form also has a Select Media button. The form has Cancel and Save buttons.

Templates offers three templates: Fashion, Electronics, and Beauty. Each template has its own Apply button.

The header's categories bar offers a connected template in addition to the menu, list, and burger templates. In the connected template, each parent category opens its subcategories in a panel directly beneath it, and the template is designed for exactly two category levels. After you select the connected template and publish, the storefront header renders it.

Several storefront blocks, including the document and brand list blocks, take the address of their data from a catalog of sources instead of from fixed code. This lets an implementer point those blocks at a different source without a developer. An unavailable catalog, or one with no sources the block can render, leaves the block on its current address.

A product page can be composed from separate blocks inside a container that holds the data source. The blocks inside it display fields from the container's response without fetching their own data.

A page requires a menu, and the Client pages list groups pages under tabs named like the menus. A page becomes an addressable page in the storefront navigation. Build content as a client page when it should be a page in navigation, and as a top bar when it is named content that is not a page, such as the header and footer.