How can I customize the Store design?

You can adjust what your store will look like by selecting widgets and layout of your E-Commerce Store.

This can help you improve the presentation of your products.

Add Store Widgets

To move or delete store widgets on any page of your site, click and drag them like any other widget. 

To add a new store widget, in the left panel click eCommerce, then click Add Store widgets.

To customize an individual widget, right-click the widget in the site, and select Edit Design.

Edit Store Design

The store design can be edited using the Global Design settings in the Design tab or by clicking the Main Store widget to access specific designing options.

To access the global design settings, in the left panel, click Design

To access the design editor, right-click the Main Store widget and click Edit Design

General

1. Right-click the Main Store widget, and click Edit Design
2. To set the initial screen for the store widget, click General, and select a page from the Main Store drop-down. You can choose to set the main store or one of your categories to display as the first page of your store widget

Categories and Products

The Design Editor allows you to edit the layout of the Categories and Products page.

1. Right-click the Main Store widget, and click Edit Design
2. Click Categories or Products to change the layout and text styling for the different areas of text, such as category/product titles, price and SKU. The spacing between items and element behavior (hover effects) as well as the number of products displayed on a page can be toggled in this menu

Single Product Page

The Design Editor also lets you edit elements on the single product pages. To check options follow the steps below.

1. Right-click the Main Store widget, and click Edit Design
2. Click Single Product Page

Cart & Checkout

You can configure the design of the cart & checkout title, subtitles, and link style.

1. Right-click the Main Store widget, and click Edit Design
2. Click Cart & Checkout

Customize Breadcrumb Style

Enable breadcrumbs on store pages and set their style as you like making it easy for customers to see where they are in the store.

Change Default Text Labels

To change the default text labels in your Store:

1. In the left panel, click eCommerce, and then click Manage Store.
2. On the Store Manager panel, click Apps, and then click Install StoreFront Label Editor.
3. Click + Add Custom Label
4. Search for the label you want to change, and click Find This Label
5. Type a new name for the label in the field provided on the right

Reorder Products in a Category

To change the order in which the products in a category appear:

1. In the left panel, click eCommerce, and then click Catalog
2. Click Categories, and then click Category products
3. Click and drag the products in the category to the desired order

Product Filters

Product filters can be added to your store so customers can easily find just what they are looking for. Enabling customers to find products this way moves them quickly from search to buy.

Filters can be set up by price, inventory level, promotions, keywords, product options and attributes.

This can be especially useful if your inventory is large and varied.

You can set everything up in minutes. Optimal filters are pre-configured and enabled for your store based on the number of products, available product options and attributes, enabled promotions, product stock levels and more. You can add/remove filters manually to create the experience you want to provide for your buyers. Filters update as you add, remove or update products in the store and as products are sold and inventory changes. Your buyers see the most updated filters every time they visit.

Enable Product Filters

1. Go to the Store Control Panel.
2. Click Settings, and then click Product Filters.
3. Click Enable Filters.
4. Select the filter you want to present.

For further information or to speak to one of our Support Agents, simply click on the link here and submit your message via the Help button on the bottom right-hand corner.