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.
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.
You can use Firebug add-on for Firefox browser. You can get it here: http://www.getfirebug.com/ There is a good video tutorial on Firebug: http://www.vimeo.com/3087755
- Launch IE
- Press F12 to open the toolbar.
- Press Ctrl-B to select element by click.
- Click the element you want to look up.
Right click on the design element and select "Inspect element".
First, enable Debug Menu to access Web Inspector. This is how you can do it on Mac: http://www.youtube.com/watch?v=VNC4Giu3mYQ This is how you can do it on Windows:http://lpetr.org/blog/archives/using-safari-web-inspector-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:http://www.youtube.com/watch?v=rXdR5eIFZ8k
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
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 http://yoursite.com/yourimage.png).
- Name and activate your scheme
- Save changes and hit "reload" to see the changes in your shop.
Also please refer to these articles:
- How to change your "Add to Bag" button
- How to change your "Checkout" button
- How to change your "Place Order" button
- How to change your big Continue Shopping button
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: www.ianholden.com/eshop_designer_home
Just activate the standard scheme. It's empty and that means it does not override the basic CSS.
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: http://www.ecwid.com/connect/unique-design-for-ecwid.html If you have any questions prior to purchase, please contact Qualiteam sales at email@example.com
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: