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.

Warning: You must include the Main Store widget on some page in your site once in order for products from the product gallery widget to link to the store. Otherwise, customers will receive a 404 error when they click on a product.

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


  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


Note: Up to a total of 100 categories and subcategories may be displayed in your store.
For example, if you have 10 categories and each of those 10 contains 50 subcategories, only 2 categories will be displayed with 50 subcategories in each.


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
Note: The hover background color and frame color cannot be changed from white.


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.

Note: Product Filters are only available for the Advanced Store.


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.enable_filter.png
  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.

Was this article helpful?
2 out of 4 found this helpful

Articles in this section

See more
Kickstart your Business
You can start your business using our amazing products, features, and tools.
Follow us on Twitter
Get the latest news and updates first