From the Layout tab, choose your preferred layout, and select the Grid View configuration option to display your chosen layout in a structured grid. Each layout has an associated component library that provides access to a group of layout-specific widgets and/or elements and stacks. Accessible via an expandable menu at the bottom of the screen, the Components menu’s widgets and stacks can be dragged to the layout’s grid and rearranged as required.
Within Grid View you can access each individual widget’s settings from the Layout Settings 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.
Widget and stack settings can include the following menu tabs:
Layout - provides access to sub-component elements.
Settings - provides access to the general widget configurations.
About - provides general information including the widget instance version and an indication of whether the latest version is in use. Refer to Upgrade deployed widgets for details on upgrading to a new version. Clicking the Go to widget code button within the About tab takes you directly to that widget’s code.
Add widgets to a layout
Open the Design page and click the Layout tab.
Using the Home Layout as an example, select the Home Layout default instance, and click the Grid View icon - this is where the structure of your page is defined.
Locate the relevant section of the grid where you want to add a new instance of a widget and click to highlight an existing region.
The new widget instance can be added above, below, or as part of the selected region’s location.
Click on the highlighted region’s row header to display the toolkit.
Create a new row above, or below, your current selection.
OR
Use the cursor selection arrows on either side of the region’s edges to re-size it into a new position within the existing region.
Note: The Grid View region defaults to a maximum width of 12 columns. When a Grid View row contains more than one region, the combined column width must total 12.
Open the Components section at the bottom of your screen to select a widget type.
Select the widget type and drag it to the new row, or within an existing row if relevant.
When dragging a widget instance from the component library to your page layout, you are prompted to create a new version of that widget. If the widget already exists on the page layout then you can also clone the widget to create another copy.
Click Create New Widget Instance to confirm.
OR
Click the Clone Widget icon to the right of the widget name.
Name the new widget instance, and click Save to confirm.
Rearrange/remove widgets in a layout
Locate the row region containing the widget you want to rearrange, or remove, within your chosen layout’s Grid View section.
To rearrange widgets, drag them to rows, between rows or alongside other widgets within a row.
Note: Rows consist of 12 columns and can be resized into a number of region widths that total 12 by dragging the cursor selection arrows at the edges of the row. You can also click the Adjust Widths icon from the row header to open the Region Widths dialog and enter the row columns manually.
To remove a widget, highlight it and click the ‘x’ icon. You will see a message confirming you’ve removed that particular widget instance. Once the widget has been removed, you can then delete that entire row by highlighting it and clicking the trash can icon.
Rearrange/remove elements
Several widgets contain elements which you can add, rearrange and remove to achieve the look you want for your chosen widget.
Elements are the sub-component parts that make up the overall widget structure. They can be accessed via an element library within several of the widgets’ settings:
To access the elements:
Open the Design page and click the Layout tab.
From the Layout tab, highlight your preferred layout instance and open using the Grid View icon. Note: When you have multiple instances of layouts, using the search box to filter for your preferred layout may avoid excessive scrolling.
Double click the relevant widget. You can also click the Settings icon, located on the top right corner of each widget.
A new window opens displaying a combination of the Layout, Settings, and About menus, depending on which widget you have opened.
Note: The About menu contained in each of the widget settings enables you to go directly to that widget’s code by clicking the Go to widget code button.
Click the Layout option to display the elements.
Open the Element Library section at the bottom of your screen to select an element.
Drag and drop your chosen element. You can resize and rearrange elements, depending on where you want them to be displayed in the widget. Clicking the row header will open the Row Controls options where you can add rows above or below the current row. You can adjust the widths of the regions and you can also remove elements using the trash can or the individual element ‘x’ icon.
Save your choices and preview, or cancel to keep the existing panel layout.
Configure image elements
All widgets containing elements provide access to the Image element which enables you to add an image.
To configure an image element:
Follow steps 1-5 in Rearrange/remove elements.
Drag the Image element to the row.
Click the Image element title to open the configuration options page.
Configure the image element by naming it, selecting where to retrieve the image from, entering a hyperlink which is navigated to via the image, and adjusting the appearance settings.
Click Done to save and exit.
