How do I change the design ? What can be changed and what's not ?

Current version of Libersy Webshop allows you to change CSS styles of customer front-end. HTML is not available for editing.
That's made to ensure that you are able to upgrade easily. We believe that most HTML changes people do are outside of Libersy Webshop boundaries.
Libersy Webshop does not need those "change header HTML / change footer HTML" functionality. The site owner can change the looks of the whole site.
CSS capabilities are more than enough to allow you to make Libersy Webshop match the design of the rest of your site.
In most cases, you won't have to edit anything, not even the CSS. Just pick one of pre-defined schemes. Libersy Webshop is designed to fit well in most sites.
So, what you can change are colors, fonts, margins and images. What you can't change is interface logic.

How do I change Libersy Webshop CSS?

Open Libersy Webshop control panel and proceed to: System Settings → Design → CSS Themes
You can pick from pre-defined schemes or create your custom version. You can find the list of all styles used by Libersy Webshop at the gray "Base CSS Theme" window at the page bottom.
Any style you specify will override the default one.
In order to create your custom scheme:
  • Click "New CSS Theme"
  • Copy the classes you want to override from the bottom window to upper one. Important: please don't copy the whole base theme to a custom one - you should copy only the rules that you want to change. 
  • Change the classes as you wish.
  • Name and activate your scheme.
  • Save changes (click the 'Save' button)
  • Reload customer interface page if it's open in your browser 
Example: copy the ".Libersy Webshop-minicart-caption" class and change color from #4B5660 to #ff0000. "Shopping Bag" label inside Minicart Widget will turn red. 
You can also create your own CSS styles and use them in HTML product descriptions.

How do I know CSS style name for the design element I want to change? 

If you use Firefox

You can use Firebug add-on for Firefox browser. You can get it here: There is a good video tutorial on Firebug:

If you use Internet Explorer

  • Launch IE
  • Press F12 to open the toolbar.
  • Press Ctrl-B to select element by click.
  • Click the element you want to look up.

If you use Chrome or Opera

Right click on the design element and select "Inspect element".

If you use Safari

First, enable Debug Menu to access Web Inspector. This is how you can do it on Mac: This is how you can do it on Windows: When Debug Menu is activated, you can just right click any design element and select "Inspect element". There is a tutorial video on that:



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

It is possible to apply some CSS rule only to some particular page in Libersy Webshop 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

How do I change the images used in UI?

You can do it by changing corresponding CSS style. For example, in order to change the bag icon in Minicart Widget, you need to:
  • Make sure your new icon is available on the Web. You can upload it to your web hosting or use image hosting like Flickr.
  • Find the CSS class that defines the icon. You can easily do it with Firebug, try it! If you do everything right, you'll find out that style name for the bag image is .ecwid-minicart.
  • Change the background URL to your image URL (from icons/minicart.png to
  • Name and activate your scheme
  • Save changes and hit "reload" to see the changes in your shop. 


Also please refer to these articles: 



I want the same icons you use, but in different color

Not a problem at all! Take the archive with PSD files and open them in Adobe Photoshop or GNU GIMP. You can alter any colors then save image as GIF/PNG/JPEG.
These files are © 2009 Creative Development. But you are free to alter and use them as long as you do that for purposes of customizing your Libersy Webshop store.

There are so many styles ! I want to make my custom color scheme quick, how do I pick a set of styles need changing?

There are several pre-defined CSS schemes in Libersy Webshop. All schemes except the basic one are made as changes to  the basic. So you can use them as a shortlist of styles need changing. You can also use this 3d-party service to generate your new color theme quickly: 

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

Just activate the standard scheme. It's empty and that means it does not override the basic CSS.

I don't see the changes I made to my CSS theme

 Please refer to this article: I don't see the changes I made to my CSS theme

I want to have my Libersy Webshop store to match my site, but I am not familiar with CSS and HTML stuff. What should I do?

We can offer you Ecwid Design Integration Service offered by our friends at Qualiteam company. Qualiteam professionals will adapt your Libersy Webshop theme to the general look ’n’ feel of your current website. If you are interested in the service, you can order it from this page:   If you have any questions prior to purchase, please contact Qualiteam sales at
One more very good way is to use the following service that will let you generate a new color theme for your Libersy Webshop store easily and quickly: 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk