Creating your own design theme

Last updated

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

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.

Create your own design theme

You can 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.

design2__1_.png

 

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>

design3__1_.png
 
  • 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/   
design4__1_.png
  • 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:

design5__1_.png
 
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.

design6.png
 
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>
 
design7.png
 
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;
}
 
design8.png

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?
0 out of 0 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