Changing store design

Last updated

When you come to a regular brick-and-mortar store you pay attention to many things - how the products are arranged, how clean and nice the store itself is and how polite the sales people are. That’s why the store owners care so much about the interior and atmosphere. The same is true about online stores - the customers should encounter no difficulties in finding a product they need and the site itself should look nice and be user-friendly. The first thing the customers see when you open your site is the design. So, it is very important to pay special attention to your store design. The standard Ecwid store design is simple and minimalistic. In most cases you do not have to modify it as it matches almost any site. Anyway, if you want to change the buttons, fonts, colors or hide some elements, you can do it yourself without hiring a developer.

If you need 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 designing your Ecwid store.
  1. How to change Ecwid design?
    1. Use a ready theme
    2. Use Chameleon skin
    3. Create your own design theme
      1. How to find an element in your store?
      2. Example of how it works
      3. How to change elements?
  2. How do I target my CSS changes to some particular page or pages in Ecwid?
  3. Oops. I did something wrong to CSS and messed up my store. How do I revert changes?

How to change Ecwid design?

There are three ways to change your store design: use ready-made templates, use Ecwid Chameleon skins or create your own CSS-theme.

Use a ready theme

You can use the solutions from third party developers, for example, Thematizr, Store Decorator, Store Designer and many others.

The full list is here: https://www.ecwid.com/apps/design

Just buy the theme you like, add it to your Ecwid store CSS — and here you go!

Use Chameleon skin

If you run your Ecwid store on a Wordpress.org site, you can use Ecwid marvellous Chameleon skin. Chameleon skin makes Ecwid fit better to the design of your Wordpress theme. Whatever theme you use, Chameleon detects predominant colors and font and automatically uses them in your product catalog. You can enable Chameleon on the "Advanced" tab in the Ecwid plugin settings in your Wordpress backend:

 
 

Create your own design theme

One more variant is to create your own theme and make your store look absolutely unique. It is totally possible as Ecwid allows you to create your own design theme with the help of CSS. CSS (Cascading Style Sheets) is a special language that is used to define how the site elements should look.

How to find an element in your store?

In creating our own CSS theme we will use classes and IDs that are used in Ecwid.

To understand how to change the look of some element you need to find out what class or ID is has. It is very easy to do it with the help of web-inspector that is present in any browser.

Here is how the web-inspector looks in Chrome. In our screenshot we have selected the “In Stock” label and you can see the class and the rule applying to the label.


 

Example of how it works

See below the example of how to change an element in your store. Let’s suppose that we want to make all the headings in products descriptions blue. To do it you need to let the browser “know” the following:
- this part of text is a heading
- headings must be blue.

How to change elements?

There is a special language that is used for marking the site pages, it is HTML (HyperText Markup Language). This language allows to use special tags for “telling” the browser what part of text is a heading, what part is a paragraph, what line is a link, etc. A tag for marking the headings is <h1>.

So, we do the following:
- navigate to Ecwid Control Panel > Catalog > Products and create a test product;
- add a text to the product description, putting it between the <h1> and </h1> tags, that will “tell” the browser that this text is a first level heading:
<h1>Nice first heading</h1>


 
  • navigate to Ecwid Control Panel > Settings > Design > CSS themes
  • create a new theme by clicking “New CSS Theme” button and add a rule that will tell the browser that all the first level headings must be blue:

h1 {
color: #0000ff;
}

  • h1  is a selector that defines what element the rule applies to 
  • color is a parameter that we are going to change
  • #0000ff is the value of this parameter. In our case it is the color code. You can easily find any color code with the help of special services, e.g. at http://www.color-hex.com/   
  • Activate the theme, click “Save”.

Now we can open the product page in our store, look at it… Here you go! The product description has a blue heading:

 
Moreover, all the first level headings in your store will be blue.

An what should we do if we want to make blue not all, but only some of the headings?

There are special classes that are used in CSS for achieving this. Classes are selectors that allow to differentiate similar elements and define different styles for them.
 


Let’s add one more heading in product description and set a class for it:

<h1>Nice first heading</h1>
<h1 class="pinkheading">Pink heading</h1>

Now we open our custom CSS theme and add a rule for headings with a class “pinkheading”. Classes is CSS look like this: “.class_name”

h1 {
color: #0000ff;
}
h1.pinkheading {
color: #ff69b4;
}

Save the changes, open the product page - we have one more heading now and it is pink.

 
Besides the classes there is one more selector type in CSS, it is ID. IDs are different from classes - the same class can be applied to many elements on a page and one ID applies to just one element. 

Let’s add one more heading to a product description and set ID for it:
<h1>Nice first heading</h1>
<h1 class="pinkheading">Pink heading</h1>
<h1 id="orangeheading">Orange heading</h1>
 

 
Now we add a corresponding rule to the custom CSS theme in our store. ID in CSS is marked with a #. 

h1#orangeheading {
color: #ffa500;
}
 

How do I target my CSS changes to some particular page or pages in Ecwid?

It is possible to apply some CSS rule only to some particular page in Ecwid by changing the selector of the said rule. Please, refer to this article for comprehensive information on that: How to apply CSS changes only to particular pages in Ecwid

Oops. I did something wrong to CSS and messed up my store. How do I revert changes?

Just activate the standard scheme. Your store will look as it did before you made any changes.

Was this article helpful?
9 out of 28 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