2015-09-22


Using the Ecwid Theme Designer App

If you have a paid Ecwid account, installing our Theme Designer App on your Ecwid account is the simplest way to manage and select your saved themes.

Copy the theme CSS to an Ecwid CSS theme.

If you are not using the Theme Designer App, use the "Manager" page and click the CSS link for the Theme you want. Copy the CSS and paste it into your Ecwid design Settings for a Custom CSS theme.
Now simply Activate and Save your new Ecwid CSS theme.


Self-hosting the images used by your theme


In order to host the images yourself, you must download the "zip" package, extract all the images, and upload them to your site.
The folder where you upload the images should be accessible from the web at a URL. This is the "URL base" you should enter into the field of the same name when saving your theme.

See what-is-image-url-base-and-how-do-i-use-it for more about the URL base.

Note. if you don't enter the correct "URL base" when you save your theme, you will have to correct it. The simplest way to do this is using the tool at http://www.e-shopdesigner.com/eshop_designer/css_changer/ where you can paste in your CSS, enter the new image URL base and get the updated CSS. Alternatively, edit the CSS using a text or programmers editor and do a global change on all the URL base strings to correct them to point to your images. If you are using a free theme (or you have some paid downloads left), you could just save the theme again using the correct "URL base" and use the new production CSS created.

Here is an example using Wordpress.


1. determine what the "URL base" for your images is
a. before saving your theme in e-shop designer, upload an image (any image will do) using the Wordpress media manager.
b. get the URL of the image - from the media library, click the edit link for an image, then the URL is shown on the right under "File URL". 
c. remove the image name part (everything after and including the last /) from the URL to get your "URL base".
remove the /darklight_5646aa_en.checkout.png from this URL to get a "URL base" of 

2. save your theme
a. now use e-shop designer to create your theme. Enter your URL base form step 3 and save the design.
b. Now, ignore the quick test CSS shown in the green box, and instead, click on the "your free design" link (on the right). 
c. Copy the CSS in the second box, and use this for your Ecwid shop style. (e.g. "CSS for your design using images hosted on your site at "http://www.mysite.com/wp-content/uploads/2013/01")
d. download your design using the "download design" button.

3. upload the theme images to your site
a. extract the files from the zip file.
The zip contains all the coloured images for the buttons etc. (in the icons directory) and two CSS files.
You can innore the css files as you have already put the CSS into Ecwid in step 2c.
b. use Wordpress media manager to upload all the images you extracted (in the icon directory) to your site.


* A
ll Quick Test images required by your saved themes will be available as long as those themes continue to be used by your Ecwid shop. The Quick Test images will only be deleted if they have not been accessed for a continuous period of over 3 months. You will be notified before they are deleted.