Select the Grid View menu option to display your chosen layout in a structured grid. Each layout is associated to a component library which provides access to a group of layout-specific widgets. 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.
Within Grid View you can also access each widget via the toolkit icon which displays on the top right corner when you hover over or select a widget. 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 settings 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.
Using the Home Layout as an example, select the Home Layout default instance, and click Grid View from the layout configuration toolbar. This is where the structure of your page is defined.
Add widgets to a layout
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 you want to add 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 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 the following widgets’ settings:
Cart Shipping
Gift Card
Header
Payment Gateway Options
Product Details
Product Recommendations
Related Products
Web Content
Wish List Welcome
To access the elements:
From the Layout tab, select your preferred layout instance.
Double click the relevant widget. You can also click the Settings icon, located on the top right corner of each widget.
OR
Click the Grid View option and then open the widget 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-4 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.
Use the Progress Tracker
You can use the Progress Tracker to add steps to your checkout flow. Adding progress tracker steps enables customers shopping on your web store to be guided through the checkout process in a series of easy to follow stages until they ultimately pay for their item(s).
Note: The Progress Tracker is only available within the Checkout Layout.
To create the Progress Tracker:
Open the Checkout Layout and select the Grid View option from the configuration toolbar.
Locate the relevant section where you want to add a progress tracker and click to highlight an existing region.
Either:
Click on an existing region and ensure all widgets are removed so that just the region itself remains.
OR
Add a new region above or below using the arrows on the row menu bar.
Refer to Rearrange/remove widgets in a layout for details on adjusting a region’s width settings and removing widgets.
Open the Components menu, select Progress Tracker and drag to the empty region.
You will see a default progress tracker containing three steps. You can now customize the steps as required, or you can configure your progress tracker settings.
To customize your progress tracker steps you can click the:
Add Step ‘+’ button on the far right of the progress tracker to add up to 10 steps. Each step must follow concurrently.
Remove Step ‘x’ button to the right of each step name to remove a step. You must have at least one step.
Step name to open the Step Label box where you can rename each step as required.
To configure your progress tracker settings:
Click the Settings icon to display the configuration options.
Choose your text alignment, background and step text colors, and button labels. You can also select whether you want to allow the user to go back a step by checking the Show “Previous” Button.
Click Save to confirm your settings.
Drag and drop widgets from the Components menu to each of the steps as required.
Widgets can be dragged on to the currently active step. You can also drag a widget to the name of another step, in doing so that step automatically activates.
