Work with layout components

Each layout has an associated component library that provides access to a group of layout-specific widgets and/or elements and stacks.

Choose your preferred layout from the Layout tab, and select the Grid View configuration option to display it in a structured grid. 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 via 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.

Note: When adding multiple collections to the Collections layout, you may see an error displayed if the collection IDs exceed the maximum field length of 255 characters. In order to avoid this limitation, you can clone the layout, and add any additional collections to the new identical layout.

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. See Upgrade deployed widgets for more details. Clicking the Go to Widget Code button within the About tab takes you directly to that widget’s code.

Add widgets to a layout

To add widgets to a layout:

1. Click the Design icon and display the Layout tab.
2. 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.
3. 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.
4. The new widget instance can be added above, below, or as part of the selected region’s location.
5. Click the highlighted region’s row header to display the toolkit.
6. 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.

7. Open the Components section at the bottom of your screen to select a widget type.
8. 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.

9. Click Create New Widget Instance to confirm.

   OR

   Click the Clone Widget icon to the right of the widget name.

10. 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:

1. Click the Design icon and display the Layout tab.
2. 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.

3. Double click the relevant widget to open. You can also open by clicking 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.

4. Click the Layout option to display the elements.
5. Open the Element Library section at the bottom of your screen to select an element
6. 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 also adjust the widths of the regions and you can also remove elements using the trash can or the individual element ‘x’ icon.
7. Save your choices and preview, or cancel to keep the existing panel layout.

Configure image elements and company logo

You can add images to your storefront via the Image element, including your company logo. Access to the element is provided via any widget that contains an Element Library.

To configure an image element, or company logo:

1. Click the Design icon and display the Layout tab.
2. Use the filter options to locate your preferred layout instance, and click 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.

3. Highlight your preferred widget, or, in the case of configuring your company logo, highlight the Header widget. You can also add a new widget, rather than using pre-loaded widgets.
4. Double click the widget to open. Clicking the Settings icon located on the top right corner of each widget will also open it.

   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.

5. Click the Layout option to display the elements.
6. (Optional) Delete the Logo element if you wish to upload your company logo.

   Note: When adding your company logo, you must delete the pre-loaded logo element and replace it with a logo image.

7. Open the Element Library section at the bottom of your screen.
8. Drag the Image element to the row.
9. Click the Image element title to open the configuration options page.
10. 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.
11. Click Done to save and exit.