Each page layout within grid view has an associated Components section. Components provide access to a group of widgets that are relevant to that layout.
Accessible via an expandable menu at the bottom of the screen, widgets can be dragged to any of the layout’s regions and rearranged as required. Note: When creating a Progress Tracker section on your page you must either use an empty region, or create a new region. Refer to Use the Progress Tracker for further details.
Some widgets also contain elements. They represent one part of the overall widget structure and can be accessed via an element library within the following widgets’ settings:
Cart Shipping Widgets
Gift Card
Header
Product Details
Related Products
Refer to Add, remove, and rearrange widgets in a layout for further details on widgets and elements.
The following table outlines each of the grid view widget types accompanied by a brief summary. It also details the page layouts that contain each of the widgets, and any associated elements.
Widgets | Widget Summary | Layouts containing the widget | Elements contained within the widget |
|---|---|---|---|
Add Product to Wish List | Enables the shopper to add a product to their wish list. | Product Layout | |
Cart Shipping | Enables the shopper to select a shipping option and associated values such as tax on the cart page. | Cart Layout Cart Layout with Shipping | Rich text Shipping address Shipping options Shipping title |
Cart Summary | Enables the shopper to view a summary of the products added to their shopping cart. | Checkout Layout Checkout Layout with Gift Card | |
Category Content | The Category Content widget displays images, collection descriptions and collection long descriptions for a selected category. | Collection Layout | |
Collection | Displays items grouped together as a collection. | Home Layout Collection Layout Product Layout Cart Layout Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Collection Navigation | Enables the shopper to navigate to a collection of items. This widget specifically provides category navigation for larger catalogs. | Home Layout Collection Layout Product Layout Cart Layout Cart Layout with Shipping Checkout Layout Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Collection Navigation | Enables the shopper to navigate to a collection of items. This widget specifically provides category navigation for smaller catalogs. | Collection Layout Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Customer Address | Enables the shopper to enter their shipping and billing addresses. | Checkout Layout Checkout Layout with Gift Card | |
Customer Address Book | Provides the shopper with the ability to look-up and select saved shipping addresses. | Checkout Layout Checkout Layout with Gift Card | |
Customer Profile | Gives the shopper access to their personal details | Profile Layout | |
Footer | Provides a consistent footer throughout the web store, giving access to common links. Generally includes the privacy policy, contact information, shipping links, sign-ups, social links and copyright information. | Home Layout Collection Layout Product Layout Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Guided Navigation | Search refinements are displayed based on the entered ‘search’ term. The Guided Navigation widget allows the shopper to refine their search based on the search results. | Collection Layout Search Results Layout | |
Gift Card | Enables the shopper to use a gift card as payment for their cart items. | Checkout Layout Checkout Layout with Gift Card | Gift Card Fields Rich Text |
Header – Basic | Provides a consistent header throughout the web store, giving access to common links. | Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout | |
Header | Provides a consistent header throughout the web store, giving access to common links. Generally includes the store logo, sign-in/register links and shopping cart access. | Home Layout Collection Layout Product Layout Cart Layout Cart Layout with Shipping Checkout Layout Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | Cart link Language Links Login/ Logo Rich Text Search |
Hero | The Hero widget is used for displaying marketing images. | Home Layout Collection Layout Product Layout Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Login/Registration | Enables the shopper to either log in or register their details during checkout. | Checkout Layout Checkout Layout with Gift Card | |
No Search Results | Enables the shopper to clearly see that no search results were found. | No Search Results Layout | |
Notifications | Provides the shopper with notifications related to their actions - for example, confirmation and validation messages. | Home Layout Collection Layout Product Layout Header Layout Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Order Confirmation | Enables the shopper to see order confirmation details upon placing an order. | Order Confirmation Layout | |
Order Confirmation | Enables the shopper to see a summary of their order upon placing an order. | Order Confirmation Layout | |
Order Details | Provides the shopper with details related to their order including date, status, product details etc. | Order Confirmation Layout | |
Order History | Provides the shopper with a summary of all previous orders. | Shopper Profile Layout | |
Order Summary | Enables the shopper to review their order from the cart page before proceeding to checkout. Additionally they may have an option to checkout with PayPal. | Cart Layout Cart Layout with Shipping Shopper Profile Layout | |
Order Summary | Enables the shopper to review their order from the checkout page and then place their order. Additionally they may have an option to checkout with PayPal. | Checkout Layout | |
Overlayed Guided | Search refinements are displayed based on the entered ‘search’ term. The Guided Navigation widget allows the shopper to refine their search based on the search results. This widget is optimized for mobile display. | Collection Layout Search Results Layout | |
Page Not Found | Displays a message to the shopper that the page they searched for has not been found. | Error Layout | |
Payment Details | Enables the shopper to select their payment type and enter their card payment details. | Checkout Layout Checkout Layout with Gift Card | |
Payment Gateway Options | Provides the shopper with a list of payment gateway options for checkout. | Checkout Layout Checkout Layout with Gift Card | PayU Gateway |
Product Details | Displays the details of a product to the shopper. This can include: image, description, variant detail, quantity, stock indicator. This widget also allows the shopper to add an item to their cart and share on social media or email. | Product Layout | Add to cart button Alternate image selector Back Description Image Inventory status Long description Name Price Product quantity Rich text Variant options |
Product Listing | Displays a product collection typically returned by a category selection and/or search results. | Collection Layout Search Results Layout | |
Product Recommendations | Provides specific product recommendations displayed to the shopper which are automatically generated based on browsing behavior. | Home Layout Collection Layout Product Layout Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
Progress Tracker | The Progress Tracker widget is used to add steps to your checkout flow, guiding the shopper through the checkout process. | Checkout Layout | |
Promotion | Enables the shopper to apply a promotional coupon to their order. | Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card | |
Related Products | Provides the shopper with related product recommendations, as defined by the merchant. Note: Only one instance of this widget should be included in the layout as multiple instances can display redundant recommendations. | Product Layout | Related products title Related products carousel |
Review Order | Enables the shopper to review their order before placement. | Checkout Layout Checkout Layout with Gift Card | |
Search Results | Displays search results – in a similar way to product listing. | Search Results Layout | |
Shopping Cart | Enables the shopper to view the items added to their shopping cart. The shopper can also use this widget to amend the cart details. | Cart Layout Cart Layout with Shipping | |
Web Content | The Web Content widget allows the merchant to display HTML content. | Home Layout Product Layout Cart Layout Cart Layout with Shipping Checkout Layout Checkout Layout with Gift Card Order Confirmation Layout Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - hipping Layout Error Layout Search Results Layout No Search Results Layout Wish List Layout Profile Layout | |
About Us Web Content | Displays your store’s background information. | Article - About Us Layout | |
Contact Us Web Content | Displays your contact information. | Article - Contact Us Layout | |
Privacy Web Content | Displays your privacy information. | Article - Privacy Layout | |
Returns Web Content | Displays your returns policy information. | Article - Returns Layout | |
Shipping Web Content | Displays your shipping information. | Article - Shipping Layout | |
Wish List Canvas | Enables the shopper to view the items added to their wish list. | Article - About Us Layout Article - Contact Us Layout Article - Privacy Layout Article - Returns Layout Article - Shipping Layout Wish List Layout | |
Wish List Content | Enables the shopper to add some details around their wish list. | Wish List Layout | |
Wish List Header | Displays the wish list header details to the shopper. | Wish List Layout | |
Wish List Invitation | Enables the shopper to send an invite to a family member/friend to view their wish list. | Wish List Layout | |
Wish List Welcome | Displays the wish list welcome message to the shopper. | Wish List Layout |
