Customizing 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 below the guide to customizing design of your store on a Wix website.

Picking colors for store

The Ecwid app for Wix allows to select the colors for your store background, texts, 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 pop-up with settings 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 the store elements with the help of CSS codes. The ready 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 specially for you. You can hire a developer to have this done.

Ecwid Customization experts offer advanced customization options, that are much more than changing the colors or hiding a certain element. It is possible to totally change the layout of blocks in the pages, add new elements there, 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 fill in this form: Custom design for Ecwid store We will be glad to help you with designing your Ecwid store.
Was this article helpful?
0 out of 0 found this helpful
Questions?
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7