How to Customize Your Store's Design

Overview

The Website Builder allows you to choose the widgets and layout of your eCommerce store. By customizing the design and layout of your store, you can improve the presentation of your products.

Guide

Editing store widgets

To edit store widgets on any page of your Website, just click and drag them like any other widget in the Website Builder. You can add new store widget by clicking Store on the left menu, then clicking "Add store widgets". You can customize individual widget by clicking or right-clicking and selecting "Edit Design".

Editing Store Design

The store design can be edited using the Global Design settings in the Design tab or by clicking the store widget to access specific designing options. To access the design editor, right-click the store widget and click the Edit Design option.

Note: We have deployed a new store design update. You have the option to update your store's Design Editor or continue to use the old store design settings. If you choose to update the widget, a backup of the site will be created automatically. This update will only change the store Design Editor; it will not change any features in your store.

Categories and Products

The Design Editor allows you to edit the layout of the Categories and Products page in the Design Editor. You can change 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) can be toggled in this menu as well.

Single Products Page

The Design Editor also lets you edit elements on the single product pages. Change the padding and alignment as well as change primary and secondary button design options. Changes made to the primary or secondary buttons will affect all store pages. Click the “More design options” link to add more controllers to elements on the product pages such as adding SKUs in-stock labels and breadcrumbs or changing text styles.

Note: The hover background color and frame color cannot be changed from white.

Search Results Page

Change the search result page layout using the drop-down menu.

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. If your inventory is large and varied this can be especially useful.

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.

Note:  Filters will be available to you whether you've upgraded your store or not.

Store Footer

Enable the store footer to show fixed elements on the store page, such as the shopping cart button and the sign in button. This footer will only appear on the store page and will not affect the site footer.

Note: The store footer design cannot be customized.

Considerations

Is my store design editor the new one?

If your store has been created after September 24th or if you have updated the widget already, you will have access to the new design editor.

What if I don’t want to update my widget?

You do not have to update your widget. You will be able to edit your widget using the previous widget editor as well.

What if I reload a backup or use the undo feature?

If you reload a backup or undo while editing an existing store, you will need to re-update the widget. Keep in mind that if you do choose to update a store's design editor, a site backup will be created automatically. 

How can I change the text on my store buttons and labels?

Unfortunately, there is no way to change this in the Website Builder.