Open the in-product route #/top_bars to access the Top bars screen. The Top bars screen lists configured top bars and provides controls to create, edit, reorder, and delete them.
Top bars list
Column or control | Description | Options or state |
Name | This column contains each top bar's configured name. | The list includes a Name column. |
Edit | Select Edit in a row to open that top bar's detail record. | An Edit link appears in each displayed row. |
Row checkbox | Select one or more rows to enable bulk actions. | Each displayed row includes a checkbox. |
Select all | Select Select all to select every row on the current page. | The control is a checkbox. |
Sort by name ascending | The control is available in the list header. | The control is labeled for ascending name sorting. |
Add Top Bar | Select Add Top Bar to open a new top bar record. | The action appears on the Top bars list screen. |
Delete | Select Delete to delete all selected top bars. | The action appears on the Top bars list screen. |
Reorder | Select Reorder to reorder top bars. | In the displayed empty-selection state, Reorder is disabled. |
Sync | Select Sync to push the current build to the storefront. | The action appears on the Top bars list screen. |
Rows per page | Use Rows per page to set the number of displayed rows. | The available options are 5, 10, 25, and 50. |
Top bar detail
Opening a top bar record through Add Top Bar or Edit shows a two-tab detail screen. The detail screen contains the Details and Editor tabs.
Details tab
Field or control | Description | Options or state |
Name | This field identifies the top bar. The field is required. | The available options are Header and Footer. |
Save | The toolbar at the bottom of the Details tab contains Save. | On the displayed detail screen, Save is disabled. |
Editor tab
The Editor tab opens a visual editor with a component palette tailored to top bars. Select a category in the left panel to reveal its components, then drag a component onto the canvas. The Fields and Outline entries are editor modes rather than component categories.
Category or control | Description | Options or state |
Basic | This category contains the listed basic components. | The components are Space, Grid, Flex, Heading, Text, Image, and Action. |
Page Layout Sections | This category contains the listed page-layout component. | The component is App Bar. |
App bar pieces | This category contains the listed app-bar components. | The components are Header Toolbar, Categories Toolbar, Subheader Categories Menu, Image Link, Header Menu, Cart Icon, Notification Icon, Language Selection Dialog, Profile Icon, Search Dialog, Active User Display, and Mobile Header. |
Toggle left sidebar | Select Toggle left sidebar to show or hide the left panel. | The control appears in the editor toolbar. |
Toggle right sidebar | Select Toggle right sidebar to show or hide the right panel. | The control appears in the editor toolbar. |
undo | Select undo to reverse the last change. | The control appears in the editor toolbar. |
redo | Select redo to re-apply the last undone change. | On the displayed editor screen, redo is disabled. |
Switch to SM viewport | Select Switch to SM viewport to preview the canvas at small mobile width. | The control appears in the editor toolbar. |
Switch to MD viewport | Select Switch to MD viewport to preview the canvas at medium tablet width. | The control appears in the editor toolbar. |
Switch to XL viewport | Select Switch to XL viewport to preview the canvas at extra-large desktop width. | On the displayed editor screen, Switch to XL viewport is disabled. |
Zoom viewport out | Select Zoom viewport out to reduce the canvas zoom level. | The control appears in the editor toolbar. |
Zoom viewport in | Select Zoom viewport in to increase the canvas zoom level. | On the displayed editor screen, Zoom viewport in is disabled. |
Sync | Select Sync to push the current build to the storefront. | The action appears on the Editor tab. |
Related