Basic UXi® Commerce Set Up

The UXiCommerce add-on can be added to any UXi site. First, login to both  the UXi Commerce dashboard at and the UXi® dashboard.

Step 1: Activate the add-on.

 To start, activate the UXiCommerce add-on by navigating to the add-ons page and clicking Add.

Step 2: Publish a Shop page

 Now that the add-on is active, create a page that'll be used to display the UXiCommerce categories, cart, etc.

Simply publish a new page to display the store by clicking Add New > Page from the top of the dashboard. Title it something like Shop or Our Online Store. A layout will be added later.

Step 3: Connect to the UXiCommerce account.

 Now that the add-on is active and the shop page has been published, connect to the UXiCommerce account so product product inventory can be displayed on the site.

  1. Navigate to UXi® Commerce section of the dashboard and enter the account number that's found in the bottom left corner of the UXiCommerce dashboard.
  2. Enter the newly created page as the Shop Page in dashboard step 2.
  3. If you'd like to display a shopping cart link in the mobile header of the site, Enable the Mobile Header Cart Link in step 3.

Step 4: Customize a layout for the Shop page.

 View the new page using the Front End Editor and create a new layout titled something like 'UXiCommerce' or 'Shop'.

*This layout will be used to display all aspects of the UXi® Commerce store:
  • Categories / sub-categories & products
  • Single products
  • Shopping bag
  • Checkout (if checkout is on-site)
  • User account

The widgets added to the new page layout are determined by what the store needs.

Some sites will not need  the same widgets.  Here are a few situations to consider.

  • A store that only has one category may not need the category menu or search widgets.
  • If no two column layouts are used on the site, maybe the horizontal category menu is best.
  • If the store's inventory has little or no artwork, maybe the table view is best.

A full run-down of the widgets and their options is below.

Product Grid

Display the store's categories / sub-categories.  From here uses will click into the single products, and eventually the shopping bag and checkout.

Widget Options

Category View: How products will look in the standard Category page view. 

Search Results View: How products will look in the search results from the product search widget.

Both these options should be set to Grid. The others have been deprecated by the software providers. This option display products in a grid, with thumbnails, titles, and pricing info.

Max Categories Per Row: In all display options, categories are displayed above the products.  Use this option to select how many category images will be displayed per row.

Grid View Settings

Max Columns: How many columns will be displayed when Grid View is used

Max Rows: How many rows will be displayed per page when Grid View is used

For "Max Categories Per Row" and "Max Columns".

The maximum amount of categories OR products that can be shown per row depends on how wide the container is.

When using the UXi® Commerce product grid in a:

100% Row: the maximum per row is 4.

75% Row : maximum per row is 3

66% Row : maximum per row is 2

Product Search

Display a basic search bar that will allow users to search for products.

Product Categories

Display a simple menu of the store's categories & sub-categories.

Widget Options

Title: Enter a title to display above the widget.

Title Size: Select a headline size from the site's global font styles.

Title Margin: Enter a custom bottom margin for the title if needed. If nothing is entered, widget will use default margin settings.

Category Direction:

  • Vertical: Display the menu items vertically.
  • Horizontal: Display the menu items horizontally.

Shopping Bag

Display a dynamic link that will show users how many products are in the bag and link them directly to view them.

Widget Options

Mini: Display a basic text link to the cart. (Items in cart will display in parenthesis)

Full: Display a shopping bag graphic that users can drag-n-drop products to.

Navigation Links

A link to the Shopping Bag can also be added from the navigation. Any site with the UXi® Commerce add-on active will have specialized links available in the menus dashboard.

A link to the shopping bag should be included in all layouts.

For a good user experience, the link to the shopping bag should be available at any time for the user to checkout. This can be done with a Shopping Bag widget or a UXi® Commerce navigation link. In most cases, adding the UXiCommerce Shopping Bag link to a navigation menu is the best option. Feel free to change the link label to something like 'Cart' title if needed.

When users add items to their shopping bag, the link will display the number of products in parentheses.

If a Shopping Bag link or widget is not included in the layout of any given page, one will automatically display at the bottom right corner of the browser any time are product(s) in the shopping bag. This will be the users' only method to view their cart and checkout.

UXi® Commerce setup video

UXi® Commerce Setup from Madwire Media on Vimeo.

Once these steps are complete, its time to move on to adding UXiCommerce general settings!