A Comprehensive Guide to Customizing Your Ecwid Store Design

Mar 22, 2017 by Qetzal, Head of Product
A Comprehensive Guide to Customizing Your Ecwid Store Design
Posted Mar 22, 2017 by Qetzal, Head of Product

The Ecwid store is created in such a way that it’s possible to add it to every website and start selling every product type in no time. Its storefront automatically adapts to both desktop and mobile devices, and the store looks great on any screen.

Making your store a natural part of your website gives the impression of a professional business. You might want to change the store design to fit your website style and the specific needs of your particular business. That can be achieved by a number of means, from fully automated settings to custom-created themes.

The majority of them are listed in Control Panel Settings Design. On that page, you can manage your design settings, and in this post, we’ll tell you how to make the most of them.

We broke down all the possible modifications to your Ecwid store design into three levels according to required skills and resources, from quick and easy to deeper and more complex.

Level 1: Fast and Easy

Fast and Easy

Effortless, quick modifications. Nothing but clicking the buttons is required.

Before you start thinking of design changes, here’s the good news: Ecwid automatically builds in the environment and looks as a natural part of your website or a social page. You don’t have to do any coding for that — everything will work fine.

In addition, there are easy ways to adapt your store’s look and feel to your mission without extra effort.

1. Sell on an Ecwid Starter Site if you don’t have a website

The Starter Site is a free one-page website with an online store that Ecwid provides for free when you create your Ecwid account.

Ecwid starter site

Speaking of design, the Starter Site is built with ready-made blocks (the cover image, logo, online store, “About Us” section, customer feedback, and contacts) that you can enable and disable, edit, and customize to your business. All that can be done practically in moments with your own hands.

So, if you don’t have a website to sell on, this is a very easy way to start selling online on a good-looking web page for free.

This step-by-step guide explains how to design your Starter Site: Personalizing Your Starter Site From Scratch to the First Sale

2. Easy design customization for those who already have a website

If you’ve already got a website, Ecwid will still smoothly integrate with it, whatever it’s built on: WordPress, Adobe Muse, Wix, Joomla, or any other platform. Here’s what you can do to make your store look even better.

Step 1: Use a matching theme for your site builder

To design your website, you can simply choose from dozens of themes available for purchase. The Ecwid store is compatible with the majority of them.

Here’s a quick directory of places on the web where you can find themes for your site builder.

For WordPress websites

Also, don’t miss out on the collection of the best free WordPress themes for e-commerce websites.

For Adobe Muse websites

For Joomla websites

For Squarespace websites

For Wix websites, it’s even easier: browse the themes without leaving www.wix.com.

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

Wix and Ecwid color settings

Ecwid store design settings on Wix websites

Step 2: Enable Color Adaptive Mode

If you open a new Ecwid store and add it to your website, Ecwid will autoMAGICally adapt the store colors to your website style. This feature is called Color Adaptive Mode. It’s a very easy way to make your store a natural part of your website.

If you already sell with Ecwid, Color Adaptive Mode won’t be enabled by default, but you can enable it on the Design page:

Ecwid Color Adaptive Mode

What if you add your Ecwid store to several websites? With Color Adaptive Mode enabled, the store colors will adapt to each of them. Your store will look natural in each website environment, no matter whether it’s white, black, or green.

This feature is available for the majority of Ecwid merchants. If you have questions or need help with Color Adaptive Mode, please contact our support team.

3. Play with quick appearance settings

Whenever you sell online with Ecwid, it’s possible to enable or disable Ecwid storefront elements in a few clicks. For example, those who sell handmade products in single copies often prefer to hide the quantity field.

You might want to hide unnecessary elements too or change the thumbnails size — the Appearance section of your Design page will totally let you do it.

Appearance settings

Level 2: Adventurer

Adventurer
For those without technical knowledge who are looking for deeper design changes and have time for a little journey.

You have your store set up and have already looked around. Now you start to feel the need for a personal touch: it might be branded colors for buttons, texts, and background, unique icons, or whole new elements. However, you have no idea about coding.

No worries: on this level, we have collected the tools that will help you achieve the goals above without special knowledge. Let’s take a closer look at them.

1. Use apps from the Ecwid App Market for store design

The Ecwid App Market counts 100+ apps to help you with analytics, promotion, shipping, and more. You can also find apps for storefront customization and design. We’ll have a look at two apps for changing your theme colors without any coding: Store Designer and Decorator.

Store Designer

Store Designer is an app that lets you quickly set up colors for buttons, text, and background.

The preview mode allows you to play with colors as much as you want before publishing your perfect design to the storefront.

Store Designer

Store Designer interface

The app costs $4.99 and offers a free trial week.

Decorator

Decorator is an alternative to Store Designer.

Decorator allows you to change the design of almost any element in your storefront. There is a Quick Start mode for novice users to quickly change the design of the main aspects of a storefront and a Full settings mode for experienced users. Customizing your storefront costs $27, and you can preview the look before making a purchase on your computer only.

Decorator

Decorator interface

All in all, this app has several completely free tools so that you can play with your design and polish your store’s look.

Both Decorator and Store Designer are available on all paid Ecwid plans, as well as the rest of the App Market apps.

2. Copy-paste ready tweaks from Knowledge Base

Ecwid Knowledge Base has answers to the majority of the questions an Ecwid store owner might have. We are constantly adding new articles here with the most frequently asked tips and ready-made solutions.

Adventurers can find various instructions on storefront customization; for example,

changing fonts in the store or adding a search box.

Most of these instructions break down to copy-pasting a piece of code into your CSS theme.

You can manage your CSS themes in Control Panel Settings Design.

The process goes like this: for example, if you want to change your cart icon, go to your Settings → Design, create a new CSS theme, add a piece of code, save the changes, and activate the theme.

CSS themes management in Ecwid

You should add all the further changes to this theme — only one theme at a time can be active, so it has to include all the modifications you want to bring to your store.

3. Copy-paste ready-made CSS themes

If you want to stand out with your store theme, you can also choose from dozens of ready-made themes on Thematizr.com.

Thematizr

There are various themes on Thematizr.com that don’t require coding knowledge and can be installed with simple copy-pasting into your CSS theme

Remember that you can make changes to your CSS themes in Control Panel Settings Design.

4. Order a custom theme development

If you can’t find a theme that would satisfy your needs, another option is to order the development of a CSS theme that will be built just for you. A custom theme means much more than just a change of colors and lets you get deeper customization, e.g. a completely different order of blocks on your product page.

Ready-made themes and theme development are available for all Ecwid merchants.

S_Ecwid_201_Cover

Ecwid 201: Take Your Ecwid Store to the Next Level

An in-depth guide explaining how to change the store design with CSS

Please enter a valid email address

By entering your email you'll receive weekly Ecwid blog updates and resources to help you build your successful e-commerce business.

Level 3: Veteran

Veteran
Heavy customization: complete changes of your store look. Hello, code.

Sometimes deeper changes of the store look are required: you might want a drop-down menu, a different layout of product page elements, or a custom design of buttons.

For tech-savvy merchants or those who have a developer in their squad, there’s an opportunity to bring changes of that type and even to transform their Ecwid store beyond recognition with the help of custom CSS themes or Ecwid API.

1. Create a self-made CSS theme

If you want to design your store on your own, consider creating your own CSS theme.

A CSS theme is a set of rules that determines the look of every element in the store (the size, shape, color, and place on a page).

Create custom CSS theme

Create your own CSS themes in Settings → Design

There is a guide in the Ecwid Knowledge Base that explains how to create your own CSS theme and instructions for changing specific elements.

Note that you’ll need to have an understanding of HTML and CSS, so if these two words sound unfamiliar, you should be ready to spend some time on acquiring the necessary skills to create a theme from scratch.

Remember that if you struggle with your Ecwid store design, you can always ask the Ecwid customer care team for help. Or it’s still possible to order the custom development of your own CSS theme.

2. Use the Ecwid Javascript API to extend Ecwid storefront features

This part is mostly for developers. Do you know what else could improve your Ecwid storefront? Getting the Ecwid Javascript API.

For example, you can build a new CSS theme or an app, and sell it on the Ecwid App Market. The Ecwid Javascript API allows you to change the storefront look completely, bringing changes as deep as you need.

If you are ready to start, please register on our page for developers.

***

Also read: How to Design Product Category Pictures That Your Customers Can’t Resist to Click

About The Author
Qetzal is Head of Product at Ecwid. He loves to create new things to make people's lives easier.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox

Also read