Changing your Ecwid store design on your Wix site

Last updated

You can change the design of your store on Wix by using your own color scheme, hiding certain elements and modifying different elements. See the guide below to customize the design of your store on a Wix website.

In this article:

Selecting colors for your store

The Ecwid app for Wix allows you to select the colors for your store background, text, links and buttons.

  1. Go to your Wix HTML Editor → Pages
  2. Open the page where your store is located
  3. Click anywhere on your products, click Settings in the menu that appears:

Settings menu on Wix


  1. In the settings pop-up open the Design tab:

Open Design tab in Settings


  1. Scroll to Theme Color Picker:

Theme color picker


  1. Click on drop-downs next to Background, Text, Links, Buttons, Product Price and Product Panel to select the colors for each of the items:

Select color on Wix


  1. Select the color and click OK
  2. If you changed something and do not like the result, you can always click Restore color defaults and start over:

Restore color defaults


Changing image sizes

  1. Click Manage Store in the Settings popup or go to your Ecwid Control Panel → Settings → Design
  2. Scroll to Theme Options → Image Preferences:

Theme options, Image preferences


  1. Select the size and proportion of the product images for your catalog
  2. The changes are saved automatically.


Hiding storefront elements

  1. Click Manage Store in the Settings popup or go to your Ecwid Control Panel → Settings → Design
  2. Scroll to the Appearance section:

Options in the appearance section


  1. Disable the elements you want to hide
  2. The changes are saved automatically.

Changing elements with ready CSS codes 

You can change the look of your store with the help of CSS codes. The codes are located in our Knowledge Base in the Customizing store section.

  1. Go to the Customizing store section
  2. Find the article for the element you want to change
  3. Copy a piece of CSS code from the article
  4. Click Manage Store in the Settings popup or go to your Ecwid Control Panel → Settings → Design
  5. Scroll down to Customize the Look of Your Store → Create Your CSS Theme
  6. Click Create Theme:

Click Create theme


  1. If you already have a custom CSS theme, add to it the code you copied from the article
  2. If you do not have a theme yet, click Add New CSS Theme:

Add new CSS theme


  1. Paste the code copied from the article to the large white field:

Paste code the the large white field


  1. Activate the new theme:

Activate the new theme


  1. Save the changes:

Save your custom CSS theme

Only one CSS theme can be active at a time, so all further CSS codes should be added to the same active theme.

Developing a custom design

If you want to have a totally custom design for your store, you can opt for ordering a custom theme that will be developed specifically for you. You can hire a developer to have this done.

Ecwid Customization Experts offer advanced customization options. They can help you change the layout of blocks on the page, add new elements, create a custom design for buttons and much more.

If you need a unique custom design for your store or need multiple style changes, we can help. Please complete this form: Custom design for Ecwid store We will be glad to help you with designing your Ecwid store.
Back to top
Has the article answered your question?