Changing the design of your Ecwid store on Wix

Last updated

Ecwid is professionally designed according to the latest ecommerce trends to look great on any device. When you have installed Ecwid on your Wix website, you can start selling right away. Still you can change the design of your Ecwid store on Wix so that your online storefront exactly matches the overall look of your website.

The intuitive visual editor in the Ecwid app for Wix allows you to change the store fonts and colors, adjust the size and aspect ratio of the product images, quickly alter the layout of product and catalog pages and hide the page elements with no coding.

In case you need a completely custom design, we can provide in-depth customization of the storefront made according to your specs. Order custom design from our experts.

In this article:

Changing the store fonts and colors

The Ecwid app for Wix allows you to select the preferable colors for your store background, text, links and buttons, change the font style and adjust the background opacity to create an online store that perfectly matches the general style of the website.

If you are not sure what color scheme to choose for your store, you can pick the colors that match the color palette of the main website using the 60-30-10 rule:

  • the primary color that covers 60% of the space – the background color;
  • the secondary color that covers 30% of the space and contrasts with the primary color – the color of text;
  • the accent colors that occupy 10% of the space and complement either your primary or secondary color – the color of buttons, links and product prices.

As for the font styles, we recommend to pick no more than 2-3 fonts for the website – one for headline and titles, one for subtitles (optional) and one for the body content areas. Too many font styles can make your website look messy and unprofessional. People might have a hard time figuring out what are the important messages you are trying to communicate.

To change the store font and colors:

  1. Open your Wix Website Editor and switch to the page where your Ecwid store is installed (by default, it is Online store page).
  2. Click somewhere in the block with your products and select Settings:

Click Settings

  1. Switch to the Design tab in the pop-up menu:

Open the Design tab

  1. Choose the preferable font in the Font Style section:

Select the font

  1. Select the page background color in the Color picker block and adjust the opacity, if needed:

Set the opacity and color

  1. Set the colors for Text, Product prices, Links and Buttons in the corresponding color pickers:

Select the colors

  1. If you are not happy with the color changes you have made, you can always revert them back by clicking on Restore color defaults:

Restore color defaults

You can check the result of your work in the Preview mode. When you are done editing the fonts and colors, remember to Publish your website to apply the changes.

Changing design of product list

Product lists are pages where the items assigned to the same product category or the store home page are displayed. You can customize the way how your products are displayed on the listing pages in the Ecwid app for Wix.

For example, you can control the size and the aspect ratio of the product images (thumbnails). Large images are usually great to showcase every essential detail of your products, medium-sized pictures is a good balance for most of the products, whereas small images allow to fit more products per page. The small images will suit well if your products are better presented by the description, rather than the image, e.g. the auto parts, various appliances, etc.

The aspect ratio patterns allow you to adjust the listing pages for the horizontally or vertically aligned images. You can also darken the thumbnail backgrounds to make the products more prominent on the page.

Try changing the alignment of text in the product cards or the visibility of the product names, prices, and Buy Now buttons, if you want to create a more airy look of the product listing pages.

On the opposite, you can choose to show the product names, prices and Buy Now buttons and allow your customers to add items to the Shopping Bag right from the catalog pages.

As you try different settings, you can live preview the result without having to reload the page or publish the website. If you are not happy with the result, you can always restore the default look.

To customize the look of the product listing pages:

  1. Open your Wix Website Editor and switch to the page where your Ecwid store is installed (by default, it is Online store page).
  2. Click somewhere in the block with your products and select Settings:

Click Settings

  1. Switch to the Product list tab in the pop-up menu:

Open the Product list tab

  1. Change the Thumbnail size and Aspect ratio:

Select the thumbnails size and ratio

  1. Enable the option to Darken the thumbnail backgrounds:

Darken thumbnail background

  1. Adjust the Alignment of text and buttons in the product cards:

Set the product card alignment

  1. Enable the option if you want to display a Border around the product cards:

Show or hide the product card border

  1. Choose whether you want to always show, show on mouse hover or hide the Product Name, Price, SKU, Buy Now button and Additional Product Images (Gallery images) in the product listing pages:

Select the options to show

You can check the result of your work in the Preview mode. When you are done editing the design of the product listing pages, remember to Publish your website to apply the changes.

Changing design of product pages

Product pages are pages that contain the detailed information about a product – its description, a gallery with additional images, price, stock level, variation choices and more.

You can customize the look of product pages in the Ecwid app for Wix by changing the page layout and the visibility of the elements in the sidebar.

There are several page layout options you can choose from:

  • 2 columns with product description on the right – a default option that looks great with high-quality images and a brief description;
  • 2 columns with product description below the image – a classic layout ideal for products with lengthy descriptions;
  • 2 columns with product description on the left – a mirrored layout for products that are better represented by their description rather than the graphical image;
  • 3 columns – a content-rich layout that can fit in as much information on a single screen as possible and works best on wide screens.

To change the look of the product pages:

  1. Open your Wix Website Editor and switch to the page where your Ecwid store is installed (by default, it is Online store page).
  2. Click somewhere in the block with your products and select Settings:

Click Settings

  1. Switch to the Product tab in the pop-up menu:

Set the product page layout

  1. Select the preferable layout in the Product details layout section:

Product details layout

  1. Choose how you want to display the gallery images in the Product gallery layout section:

Gallery layout

  1. Define which product details you want to show in the Sidebar content section:

Sidebar content

You can check the result of your work in the Preview mode. When you are done editing the design of the product details pages, remember to Publish your website to apply the changes.

You can also add a Shopping Cart icon and a Product Search bar to your website pages. The Shopping Cart allows your customers to check its content and quickly proceed to checkout from any page of your website. With the help of the Search bar the store visitors will easily find what they are looking for without having to browse through the store’s pages.

Related articles

Adding your Ecwid store to Wix website
Adding categories to your Ecwid store on Wix
Free extensions for Ecwid stores on Wix

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message