You can customize the design of your web store pages via the layout configuration toolbar within the Layout tab, accessible on the top right hand corner of any opened layout.

Understand the UI layout preview

Select the Layout Preview menu option to preview your web store as you make changes to it, without the need to publish live.

Widgets contained within your preview layout are accessible via the widget’s toolkit icon. Here you can name the widget or add related internal notes which do not appear on your live store. Several widgets also contain a configurable Settings menu as well as a Layout menu where the widget’s elements can be customized.

Refer to the Rearrange/remove elements section for further information.

Understand grid view

Select the Grid View menu option to display the layout in a structured grid. Each layout has associated components providing access to a set of widgets specific to that layout. Accessible via an expandable menu at the bottom of the screen, the Components section widgets can be dragged to the layout’s grid and rearranged as required. You can also open each of the widgets and select the Settings icon to display further details such as elements, layout, and general information.

Refer to the Add, remove, and rearrange widgets in a layout section for further information on using the Components section.

Understand layout settings

Select the Layout Settings menu option to open each layout’s configurable settings. These can include notes, default settings and search engine optimization (SEO) information.

Refer to Configure layout settings for further information.

Understand clone layout

Select the Clone Layout menu option to clone, or copy, a new instance of a layout from an existing layout instance. When creating the newly cloned layout you can configure settings such as notes, default settings, and SEO information.

Refer to Create a new layout instance (cloning) for further information.