Using stacks on your web store enables you to group related widgets in to a distinct set of steps which can then be used for functional, navigational, or display purposes. Specifically, they are the Progress Tracker, Vertical tabs, and Accordion stack options that are available via the Components tool. You can also create a Popup stack that allows you to provide a summarized view of a product.
Add a Progress Tracker
You can use the Progress Tracker to add steps to your checkout flow. Adding progress tracker steps enables shoppers to be guided through the checkout process in a series of easy to follow stages, right up 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 Design page and click the Layout tab.
Navigate to the Checkout Layout by using the filter options.
Select the Checkout Layout and click the Grid View icon.
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 only the region itself remains.
Or
Add a row (which contains regions) 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, which automatically activates that step.
Once added, you can go to the Stack Templates section of the Code tab to make edits.
Add vertical tabs
Adding vertical tabs to your web store enables shoppers to view a menu of associated categories as a vertical display. They can be used to vertically stack associated information in any layout and provide a means of avoiding too much screen content, and excessive scrolling.
Note: Account-based users can use vertical tab stacks as a dedicated section for the Shopper Profile, including, account details, address book, update password, and so on.
To add vertical tabs:
Open the Design page and click the Layout tab.
Navigate to any layout by using the filter options.
Select your preferred layout and click the Grid View icon.
Locate the relevant section where you want to add vertical tabs and click to highlight an existing region.
Either:
Click on an existing region and ensure all widgets are removed so that only the region itself remains.
Or
Add a row (which contains regions) 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 Vertical Tabs and drag to the empty region.
You will see a default set of vertical tabs containing three steps. You can customize these steps as required, or you can configure the settings.
To customize the vertical tabs, click the:
Add Step ‘+’ button on the far right of the vertical tabs 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 the vertical tab settings:
Click the Settings icon to display the configuration options.
Enter a name or notes, as required, and click Save to confirm your settings.
Drag and drop the required widgets from the Components menu to each of the steps.
Widgets can be dragged on to the currently active step. You can also drag a widget to the name of another step, which automatically activates that step.
Once added, you can go to the Stack Templates section of the Code tab to make edits.
Add accordion stacks
Adding accordion stacks to your web store enables shoppers to view a menu of associated categories as a progression of steps. They can be used to stack associated information in any layout and provide a means of avoiding too much screen content, and excessive scrolling.
To add accordion stacks:
Open the Design page and click the Layout tab.
Navigate to any layout by using the filter options.
Select your preferred layout and click the Grid View icon.
Locate the relevant section where you want to add accordion stacks and click to highlight an existing region.
Either:
Click on an existing region and ensure all widgets are removed so that only the region itself remains.
Or
Add a new row (which contains regions) 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 Accordion and drag to the empty region.
You will see a default set of accordion stacks containing three steps. You can now customize the steps as required, or you can configure the settings.
To customize the accordion stacks, click the:
Add Step ‘+’ button on the far right of the vertical tabs 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.
To configure the Accordion settings:
Click the Settings icon to display the configuration options.
Enter a name or notes within the About tab.
Select the text alignment and colors for each of the steps within the Settings tab.
Click Save to confirm your settings, otherwise cancel.
Drag and drop the required widgets from the Components menu to each of the steps.
Widgets can be dragged on to the currently active step. You can also drag a widget to the name of another step, which automatically activates that step.
Once added, you can go to the Stack Templates section of the Code tab to make edits.
Add popup stacks
Adding popup stacks to your web store enables you to manage and configure content to be displayed as a screen that opens, or pops-up, in front of the one you are currently viewing.
Popup stacks contain a Main sub-region, and a Popup sub-region. These can be used by shoppers, for example, when they click a button and a log in/registration details page opens as a popup screen, or, when they are viewing a list of products and they click to open one in a summarized quick view popup screen.
To add popup stacks:
Open the Design page and click the Layout tab.
Navigate to any layout by using the filter options.
Select your preferred layout and click the Grid View icon.
Locate the relevant section where you want to add a popup stack and click to highlight an existing region.
Either:
Click on an existing region and ensure all widgets are removed so that only the region itself remains.
Or
Add a new row (which contains regions) 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 Popup Stack and drag to the empty region.
You will see two default sub-regions; Main, and Popup.
Open the Main sub-region. You can add a widget to the Main sub-region which triggers the display of the widget in the Popup sub-region. In order for this to happen, you must:
Drag and drop the required widget from the Components menu to the Main sub-region.
Open the widget’s Settings icon to display the configuration options, and open the About tab.
Click the Go to Widget Code button.
The Template window opens within Code view, displaying lines of HTML code.
Locate where in the template you wish to place the link that will launch the popup. An example of the link you may add to the code is shown below:
<a href="#" data-toggle="modal" data-bind="attr: {'data-target':$popupId}">Launch Popup</a>Click Save to confirm your settings, otherwise click Cancel.
Open the Popup sub-region and:
Drag and drop the required widget from the Components menu to the Popup sub-region.
Open the widget’s Settings icon to display the configuration options, and edit as required.
Note: Quick View Popup Stack
An out of the box instance of the Popup Stack, known as the Quick View Popup Stack, is located within the Collection and Search Results layouts and enables shoppers to see a summarized view of a product. From there, they can then expand to view the full product details, if required.
For details on how you can create other instances of the Quick View Popup Stack, refer to the Developing Widgets guide.
The Quick View Popup Stack is automatically provided with the following widget instances:
Product Listing widget within the Main sub-region of the Collections layout.
Search Results widget within the Main sub-region of the Search Results layout.
Product Quick View widget within the Popup sub-region for both the Collection and Search Results layouts. This widget instance is an instance of the Product Details widget for the selected product.
