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).
- Selling on Instant Site
- Selling on your own website
- Use a matching theme for your site builder
- Enable Color Adaptive Mode
- Use preset Appearance Options
- Use design apps from the Ecwid App Market
- Use ready CSS tweaks from the Ecwid Knowledge Base
- Order a ready custom design
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 as 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.
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 your Instant Site.
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.
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.
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.
You can enable or disable certain Ecwid storefront elements like “Sign in” link, product SKU numbers, breadcrumbs (category paths), product quantity fields and a few others.
Visit the "Appearance" section in your Ecwid admin, in 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 in the Website page (Site Appearance -> Edit) and preview the results right on that page.
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.
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 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.
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.
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 specially 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 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.