Created 2017-04-25


You can create a style in decorator app that closely matches a theme you are using in Theme Designer app.


There are some limitations, for example, decorator app does not directly support image buttons yet, but moving to Decorator will give you more flexibility and control over your shopfront style and be much easier to use.


Here are the basic steps:


First, get the information about your Theme Designer theme (and tweak if you use it).


  1. If you are using a Theme, make a note of main color and icons color (Ecwid > Settings > Theme Designer)
  2. If you are using Tweak, you need to get a copy of the Tweak CSS without any Theme CSS.
    To do that, make a copy of your tweak (Tweak > Manage > Copy)  and set the theme to "- none -". Now copy the Tweak CSS. (More details on this at the end of this article)
     
  3. Disable the active theme/tweak in the Theme Designer app, or uninstall the Theme designer app.
    Note. if you have copied the CSS into an Ecwid CSS Theme, you will need to select the standard ecwid CSS theme and activate it. Alternatively, create a new Ecwid CSS Theme that is empty and activate that. It is important to disable any theme from Theme Designer (or any other styling app) otherwise more than one app will try to set the styles which may cause conflicts and performance issues.

Now you can use the Decorator App to create a style that is very similar.

  1. If you haven't already, install the Decorator app

  2. Put Decorator into Quick-start mode
  3. set the "Text Color" and "Headings" color to the main color, (or white, if you were using a dark theme),
     
  4. set the "Backgrounds" color to white, (or the main color - possibly a darker shade - if you were using a dark theme).
     
  5. set the "Buttons" color to the icons color
     
  6. Save this and switch off Quick-start mode. The decorator style should now be very similar to your original e-shop designer theme.

Make any further changes you may need. For example:


  • Add the Tweak CSS (if needed) from step 2 to "Custom CSS - after". (This CSS should only include the styling needed in addition to that made already by Decorator, if any is needed).
     
  • If you used a ghost style theme, set "Button styles" > "style" to "outline"; set "Button colors" > "button color" to transparent, and "button text color" to the button color you want.


Note. Decorator does not directly support the use of images for the main buttons at this time. However, if you copy CSS over from Tweak that used custom image buttons, they should work.



How to copy your Tweak CSS without the theme CSS:


Make a copy of your tweak:

Set the theme to "- none -":


Copy the Tweak CSS: