Created 2017-05-07


Installing


Install decorator app log-in to your Ecwid account and go to the App Market - Apps > App Market, or go directly to https://my.ecwid.com/cp/#apps:view=app&name=store-decorator


When installation is complete, you are taken to a new "Decorator" tab under "Settings"



Important note. Style settings in other Apps or Ecwid settings may interfere with those managed by the Decorator app, so it is best to uninstall or disable any other style settings, or apps that control the style of your storefront.



Overview of interface


The dashboard area at the top shows the status of your published and draft styles and provides the controls to manage them.



When some help is available for a particular area of the interface, help icons will appear as you move the mouse over them. Click on these help icons for more help.

 

 


Style settings


Decorator will start in "Quick-start" mode which provides five basic settings for your store style. Use "Quick-start" mode to set your basic colors, then switch it off to show the full set of controls and make any more detailed changes you need. Quick-start mode can be turned on and off at any time.colors, then switch it off to show the full set of controls and make any more detailed changes you need. Quick-start mode can be turned on and off at any time.


Select the style elements you want to change using the left column. When "Quick-start" is off, the elements are grouped into several sections. Open/close these sections by clicking on them. Then click on a specific setting within the section to change its style.



Style controls


Most style settings change the color of one or more elements of your storefront.

Use the color picker to set the desired color.



If you know the color code, you can simply paste it or type it into the input field. Many different color code strings are recognised e.g. #123, rgb(255,0,0), hsl(0,100%, 100%), rgba(255,0,0,50%) etc.

The palette shows the latest colors you have been using. The palette is refreshed to show all the colors used every time you save a draft, so after any save, you can click on a color in the palette so set another element to the same color.



Instant Preview


The instant preview on the right shows a simplified representation of the storefront elements that are related to the setting you are editing so that you can get an indication of how your storefront will look.



The instant preview may change depending on what setting you are adjusting in order to show you the applicable elements and their context.



Previewing in storefront


Each time you save it, your draft will also be shown privately for 1 hour in your storefront when you view it in the same browser with the same settings. The draft will not be visible to your customers. This gives you an easy way to fully test and interact with your store using the new draft style before publishing it.

Click on "Starter site" or "website" in the dashboard area to open your store in a new browser tab. You may need to refresh the store page to pick up the latest style changes.


The storefront preview is available for one hour, but you can enable it or remove it whenever you like by clicking on the small blue toggle switch in the dashboard. 

 


Changing text styles


You can change the text style for several types of text on your storefornt. Most text settings have several style controls apart from the default text style which has controls for font family and size only.




Using custom fonts


You can use custom fonts from several providers. The easiest to use are fonts from Google Fonts. In most cases, simply enter the font names. After the custom fonts have been set, they will appear in the "font family" selectors for each text style setting.



You can also use fonts from Adobe Typekit, Fonts.com or fonts you host yourself.



Publishing


When you are happy with your style, publish it to make it visible for all your customers when they visit your store.


The first time you publish a draft, you must pay (pricing) after that, you are free to publish further changes as often as you like. There is a small annual renewal charge to continue using Decorator.


After publishing, any changes you make to the style are saved as private drafts which will only be visible you until you publish again.



Uninstalling


To uninstall Decorator, go to Apps > My Apps. Click on Decorator - Details > Uninstall