Open Top bars from the Site Builder menu to view the top bars list. Top bars hold named storefront content that is not a page, such as the header, the footer and the welcome popup. Top bars is an entry in the Site Builder menu, alongside Client pages, Menus, index.html Settings and Templates.

Top bars list

Control	What it does
Name	The column contains each top bar's name.
Edit	Opens the detail screen of the top bar in that row.

Actions and paging

Control	What it does
Reorder	Disabled with no rows selected.
Sync	Sync appears on the list and on both tabs of a top bar record.
Rows per page	Selector for the number of rows per page.

Top bar record

A top bar record has two tabs, Details and Editor.

Details tab

The Details tab toolbar contains Delete, Cancel and Save.

Field or control	What it does
Name	Name is required and appears as a selector or text field. The name decides which set of editor components is offered on the Editor tab.
Save	Save is disabled when the record first opens.

Editor tab

The left panel lists Fields, the component categories and Outline. The welcome popup editor leaves out blocks designed for full-width page layouts, because they would break the layout inside a dialog.

Editor toolbar

When the editor opens, redo, Switch to XL viewport and Zoom viewport in are disabled.

App bar palette

The editor of a top bar that holds the app bar offers three component categories: Basic, Page Layout Sections and App bar pieces.

Category	Components
Page Layout Sections	App Bar.
App bar pieces	Active User Display, Cart Icon, Categories Toolbar, Header Menu, Header Toolbar, Image Link, Language Selection Dialog, Mobile Header, Notification Icon, Order Mode Selector, Profile Icon, Search Dialog, Subheader Categories Menu.

Welcome popup palette

The editor of a welcome popup top bar offers a single Basic category.

Welcome popup settings

These settings appear on the Editor tab of a welcome popup top bar.

The welcome popup is a one-time message designed in the site builder and shown to logged-in customers as a modal on the storefront. Logged-out visitors never see the popup. Closing the popup with Escape, a click outside it, its close icon or any of its action buttons counts as dismissing it. A dismissal is stored against the customer's account, so the popup stays dismissed on their other devices.

Control	Input	What it does
Enabled	Yes and No radio options.	Works as an on/off switch that is independent of the popup content and version. Setting it to No hides the popup.
Version — bump to show once more to everyone	Number field with a minimum of 1.	Raising the version shows the popup once more to everyone, including customers who already dismissed it. Lowering the version does not show the popup again to customers who dismissed a higher version.
Delay before showing (seconds)	Number field with a minimum of 0.	The popup opens after this delay, which starts once the page has settled. Navigating to another page during the delay cancels the pending popup.
Route scope — comma-separated path prefixes (empty = all routes)	Text field that takes comma-separated path prefixes.	An empty field applies the popup to all routes. The route is checked when the popup is about to open, not when the page loads.
Audience cutoff — only accounts created after this date	Date field.	Only accounts created after this date see the popup.
Start date (optional)	Optional date field.	Together with the end date, it defines an optional window in which the popup can show.
End date (optional)	Optional date field.	Closes the optional window that the start date opens.
Page Styles	Style properties written inside the ampersand block, which needs no other selector.	Also controls the popup size. The width, min-width and max-width properties size the desktop dialog, and the height, min-height and max-height properties size the mobile bottom sheet. The same value applies to both, so set only the properties you want to change from the defaults of 480px wide on desktop and 85vh tall on mobile.

Top bars screen