Levels of changing store design

Any Ecwid store can be added to every website and you can start selling your products in no time. Its storefront will adapt to desktop and mobile devices automatically, and the store will look great on any screen, just out of the box.

However, you might want to change the basic store design to meet some particular needs of your business. This can be achieved in several ways, from fully-automated settings to custom design themes. This article is an overview of all the options you can use to modify the look of your Ecwid store, sorted by the difficulty levels.

The design settings in Ecwid are listed in your Ecwid admin (Design).

Level 1: Easy

Before you start changing the design of your store, we’d like to point out that Ecwid automatically adapts to the surrounding elements on the page and looks like a natural part of your website. You don’t need to code anything for that — everything will work fine.

In addition, there are several ways to easily and quickly tweak your store’s look. Nothing but clicking buttons is required.

Selling on Instant Site

If you don’t yet have a website to sell on, you can start with the Ecwid Instant Site, a free one-page website for an online store that is provided for free when an Ecwid account is created.

The Instant Site consists of several blocks – a cover image, a logo, an online store itself, the "About Us" and "Customer Feedback" sections, and a block with Contact Details. You can show, hide or customize these blocks to your needs.

Here is the guide about changing the design of your Instant Site.

Selling on your own website

In case you already have a website, Ecwid will easily integrate with it, be it WordPress, Adobe Muse, Wix, Joomla, or any other website builder or CMS. Here’s what you can do to make your store look even better.

Use a matching theme for your site builder

Your Ecwid store is compatible with the majority of design themes provided by third-party vendors for various site builders. Here is a collection of web directories where you can find design themes for your site builder.

For WordPress websites:

For Adobe Muse website:

For Joomla websites:

For Squarespace websites:

For Wix websites:

Browse the themes directly at www.wix.com.

Ecwid + Wix merchants can match the colors of their website and store in the Ecwid Wix application settings.


Enable Color Adaptation

When you add a new Ecwid store to your website, the store colors can automatically match the website style. So the store looks like a natural part of your website. You can do it with the help of the so-called "Color Adaptation".

To switch on the Color Adaptation mode in your Ecwid admin, go to Design → Storefront Navigation and Colors. This will automatically update your store to match the colors of your website. If you want to create a custom design theme and adjust store colors manually, disable the Color Adaptation mode.


If you have installed the Ecwid store on several websites, with Color Adaptation enabled, the store colors will adapt to each of the sites. The store will look good on each website page, no matter what color it is.

Ecwid + Wix merchants can match the colors of their website and store only in the Ecwid Wix application settings.

Use preset Appearance Options

You can enable or disable certain Ecwid storefront elements like the “Sign in” link, product SKU numbers, breadcrumbs (category paths), product quantity fields, and a few others.

Visit the "Appearance" section in your Ecwid admin, on the Design page to see the full list of the elements you can change.

If you are using Instant Site, you can choose from the preset design options on the Website page (Site Appearance -> Edit) and preview the results right on that page.

Wix and WordPress users should use the preset design options within the Ecwid app for Wix or in the Ecwid plugin for WordPress respectively.

Level 2: Medium

If you are looking for more advanced design changes, e.g. changing the color of buttons, texts, and background, displaying branded icons, etc., we can suggest a number of tools that will help you achieve your goals. No worries if you are not experienced in CSS coding, you can have these changes without special technical skills or knowledge.

Use design apps from the Ecwid App Market

There are plenty of applications in the Ecwid App Market that can help you customize the look of your online store. Please see below the two apps for changing your theme colors without any coding required.

Store Designer

Store Designer allows you to edit the colors for buttons, text, and background.

In the preview mode, you can play with colors until you are satisfied with the result before you apply your new design to the storefront.


The app costs $4.99 USD per month with a 7-day free trial.


Decorator is another cool application, similar to the Store Designer app, but with a few more options.

In the Quick-start mode, which is ideal for beginners, you can easily tweak the main aspects of your online storefront. The Full settings mode is meant for more advanced alternations of colors, fonts, button styles and more.


The app is free to install and try for as long as you like, you’ll only have to pay for the custom designs you make. Before making a purchase, you are able to preview the results of your work on your computer.

Both Decorator and Store Designer apps are available on Ecwid Venture plan and higher. If you’re on a Free plan, please, consider upgrading your account to a paid plan.

Use ready CSS tweaks from the Ecwid Knowledge Base

Ecwid Knowledge Base can provide an answer to most of the questions about Ecwid stores. It is constantly updated with new guides that cover the most frequently asked questions and offer ready-made solutions.

If you check the Ecwid CSS Cookbook, you can find various instructions on changing the look of your store. These guides mostly come down to:

  • copying a piece of CSS code from the article,
  • pasting it to the CSS theme in your Ecwid admin in Design.


If you do not have a custom CSS theme yet, go to your Ecwid admin, go to Design, click "Add New CSS Theme", paste a piece of code, click "Activate" and save the changes.

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

Order a ready custom design

In case you can’t find a ready design that would fit your needs, you can opt for ordering a custom CSS theme that will be developed especially for you. You can hire a developer to have this done.

Ecwid Customization experts offer advanced customization options, which are much more than changing the colors or hiding a certain element. For instance, it’s possible to totally change the layout of blocks in the pages, add new elements to the pages, 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.

Level 3: Advanced

If you are a tech-savvy store owner or have a developer available in your team, you can perform deep design changes to your storefront, so that it’s difficult to tell Ecwid from a completely custom shopping cart, with the help of CSS coding and Ecwid JavaScript API.

Develop a custom CSS theme

If you want to design your store on your own, we can suggest creating your own CSS theme -- a set of CSS rules that determines the look of every visual element in the store (the size, shape, color, and place on a page).

You can create your own CSS themes in your Ecwid admin in Design. Before you begin, please check out the instructions for changing specific elements on the storefront.

Building a CSS theme from scratch requires knowledge of web design languages such as HTML and CSS. If you are having trouble with a custom CSS theme, 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.

Use the Ecwid Javascript API

If you are a developer who wants to improve Ecwid storefront, you can build a new CSS theme or an app for the Ecwid App Market. The Ecwid Javascript API allows you to integrate with Ecwid storefront on a deeper level. It provides access to events (page changed, cart changed), entities (product, cart, order), and others.

To get access to the Ecwid Javascript API, please register as a developer in our Developer Portal.

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
23 out of 50 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline