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 Design to customize the look of the store.


Category Page


These options apply to the pages that display a single category, often referred to as the product grid. Full descriptions of each option are displayed on the dashboard for reference.


Image size

Select the image size to use for each product image. Large images help represent products in detail. Small images let you display more products in the Product List.


Image aspect ratio

Select an orientation for the product images. Landscape orientation is best for products with horizontal images. Portrait orientation is meant for vertical images. Square is for images of equal proportions, which is ideal for small merchandise.


Darken image backgrounds

Enable this option to slightly darken the background of images to make them stand out against the store's background and style them the same way for all products.


Product Card details and layout

Choose which product details to display on the Product List and how they are positioned in the Product Card. Product name, price, SKU, and 'Buy now' button can all be displayed or turned off. 


Category name position

Choose where to display category names or hide them completely.


Product Page Options

These options apply to the pages that display a single product, additional images, product info, and the 'Add to Cart' button. Full descriptions of each option are displayed on the dashboard for reference.


Product Page layout

Choose the layout for the information displayed on the product's page.


Image Gallery thumbnails

Choose the layout for thumbnails of images uploaded into the products' Image Gallery.

Sidebar

Choose items displayed in the sidebar of the product's page. Drag and drop the items to re-arrange the order of their appearance in the sidebar.


Storefront navigation & colors

These settings determine which navigational and sorting options are available when browsing your store. 


All of these options are optional, but it is strongly recommended to use the Color Adaption option feature. The Color Adaptation technology automatically repaints your store to match the colors of your website. Writing CSS is needed for any other style customizations. 

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



Themes and In-depth customization

As mentioned above, there is a full CSS editor for any style customizations that are not accomplished by the Color Adaption feature. To add custom styles to a UXiCommerce store:

  1. First click Create Theme to start your new, unique theme.
  2. On the next page, click Add New CSS Theme and give it a name.
  3. Add the custom CSS necessary, then Save
  4. Click Activate in the top right corner to activate the new theme on your site!