Basic UXi® Commerce Set Up
First, login to both the UXi® Commerce dashboard at https://my.uxicommerce.com/cp/ and the UXi® dashboard.
- From the UXi Dashboard, Activate UXi® Commerce add-on by clicking the UXi® Add-on's tab, then clicking Add next to UXi® Commerce.
- 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'
- 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.
- Enter the newly created page as the Shop Page in dashboard step 2.
- To display a shopping cart link in the mobile header of the site, Enable the Mobile Header Cart Link in dashboard step 3.
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)
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.
Display the store's categories / sub-categories. From here uses will click into the single products, and eventually the shopping bag and checkout.
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.
Display a basic search bar that will allow users to search for products.
Display a simple menu of the store's categories & sub-categories.
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.
- Vertical: Display the menu items vertically.
- Horizontal: Display the menu items horizontally.
Display a dynamic link that will show users how many products are in the bag and link them directly to view them.
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
/*Primary Buttons: FF6600
UXi® Commerce setup video