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 https://my.uxicommerce.com/cp/ 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 Shop 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, create a Shop that'll be used to display the UXiCommerce categories, cart, etc, then connect to the UXiCommerce account so product product inventory can be displayed on the site.


  1. Next, 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. To display a shopping cart link in the mobile header of the site, Enable the Mobile Header Cart Link in dashboard 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 '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 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.

  • 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.


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


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.



Step 3: Adding the UXi® Commerce CSS Theme


Now the UXi site is set up for basic shopping functionality, Click the Store Dashboard link to log-in to the UXiCommerce dashboard.


Once there, navigate to Settings > Design to customize the look of the store


Color Adaptive Mode

First, enable the Color Adaptive Mode setting to let the UXiCommerce store utilize the colors and styles already created in UXi. 

This setting will use colors already set up in UXi's Front End Editor:

  • Background colors based on the row background color from the Shop page layout in the Row Editor
  • Text colors based on the Fonts menu in the Fonts Editor
  • Link colors based on site-wide link colors in the Design Styles Editor


Appearance

Use these options to customize how your store looks to your customers.

Show “Sign in” link on storefront displays the sign-in link at the top right of the product grid allowing users to edit account info like billing addresses, etc.


Show product SKUs on storefront displays the SKU in the right column of the product details page


Show breadcrumbs (categories and sub-category navigation) on storefront displays the breadcrumb menu telling users what category they're viewing.


Show “Sort by” and “View as” options on product lists allows users to re-sort the products by price, alphabetical order, etc


Show quantity field on product details allows the user to enter a quantity of their item purchase in the right column of the product details page.


Show “In Stock” label on product details displays an 'In Stock' message to the user in the right column of the product details page


Show number of items in stock on product details displays the available stock number in the right column of the product details page. This option is only available if a Quantity In Stock value has been added to the product.


Design & Appearance


  1. Click the Create Theme button to view the theme editor.
  2. Navigate to /Mad360 Design/UXiCommerce Starter Kits/Color Adaptive Theme/ and copy the stylesheet to a new css document.
  3. Copy / paste the UXiCommerce Color Adaptive CSS Theme.
  4. Customize CSS theme as needed.

    Many of the UXiCommerce elements will inherit colors from the UXi front-end editor. Be sure the site is properly set up with global colors and the CSS work should be minimal.
    • Add or adjust border widths. Many elements have been given 0px solid #BFBFBF; border by default. 
    • Adjust text colors or sizes.
    • Add new styles like box-shadows, custom hover effects, etc
  5. Save a copy of the CSS file used locally. This may be needed for revisions.




UXi® Commerce setup video


UXi® Commerce Setup from Madwire Media on Vimeo.