Basic UXi® Commerce Set Up


First, login to both  the UXi® Commerce dashboard at https://my.uxicommerce.com/cp/ and the UXi® dashboard.
  1. From the UXi Dashboard, Activate UXi® Commerce add-on by clicking the UXi® Add-on's tab, then clicking Add next to UXi® Commerce.
  2. Create 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'
  3. Next, go to UXi® Commerce section of the dashboard and enter the account number in dashboard step 1.

    The account number is available in the footer of the UXiCommerce dashboard.


  4. Enter the newly created page as the Shop Page in dashboard step 2.
  5. To display a shopping cart link in the mobile header of the site, Enable the Mobile Header Cart Link in dashboard step 3.
  6. View the new page using the Front End Editor and create a new layout titled something like 'UXi® Commerce' 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 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.

  • Grid: Display products in a grid, with thumbnails, titles, and pricing info
  • List: Display products in a basic vertical list with smaller images
  • Table: Display products in an HTML table with no images





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


List / Table View Settings

Products Per Page: How many products will be displayed per page when list or table view is used.




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.



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

The Shopping Bag widget described above can be used, OR a UXiCommerce link can be added from the navigation.  Any site with the UXi® Commerce add-on active will have specialized links available in the menus dashboard.



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.


Adding the UXi® Commerce CSS Theme

Navigate to /Mad360 Design/UXiCommerce Starter Kits/Update/ and copy the stylesheet to a new css document. 


Use the Color notes section as a reference of how to find & replace:
/*=============================*/
/*== COLOR NOTES */
/*=============================*/

/*Primary Buttons: FF6600

/*Primary Buttons Hover: FF9900

/*Text Links & Secondary Buttons: 25AAE1
/*Text Links & Secondary Buttons Hover: 5BBAE7

/*=============================*/



In this case, find uses of FF6600 and replace with a new hex value to replace the orange color in the primary buttons with a new color matching the UXi® site theme. Then do the same for the hover state of the buttons, text links, and their hover states. Save this file locally, then add it to the store:

On the UXi® Commerce dashboard, click Settings > Design and create a New CSS Theme. Give it a name like 'UXiCommerce' and copy and paste the CSS from the Starter Kit. 

The stylesheet should include links and buttons matching the UXi site theme, now it's time for any remaining updates the stylesheet for border colors, backgrounds, and any other customizations.



UXi® Commerce setup video


UXi® Commerce Setup from Madwire Media on Vimeo.