Changing store design

Last updated

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 Control Panel → Settings → 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 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.

Selling on Starter Site

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

The Starter 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 Starter 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.

image4.png

Enable Color Adaptive Mode 

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 Adaptive Mode".

If you already sell with Ecwid, the "Color Adaptive Mode" is disabled by default, but you can enable it in your Ecwid Control Panel → Settings → Design page.

image5.png

If you have installed the Ecwid store on several websites, with "Color Adaptive Mode" enabled, the store colors will adapt to each of the sites. The store will look good on each website page, no matter whether 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 “Sign in” link, product SKU numbers, breadcrumbs (category paths), product quantity fields and a few others.

Visit the "Appearance" section in your Ecwid Control Panel → Settings → Design page to see the full list of the elements you can change.

image6.png

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 your 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.

image2.png

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

Decorator

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

In the Quick-start mode, that 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.

image3.png

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. Upgrade to get this feature

Use ready CSS tweaks from the Ecwid Knowledge Base

Ecwid Knowledge Base can provide an answer to the 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 Customizing Store section, you can find various instructions on changing the look of your store. These guides mostly come down to:

custom_css.png

If you do not have a custom CSS theme yet, go to your Ecwid Control Panel → Settings → 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 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 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 Control Panel → Settings → 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?
14 out of 40 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