When developing the “Pear - Modern E-Commerce Tenmplate” template, we focused on making it as easily customizable as possible. We created variables when using design colors, so that the assigned colors can be easily updated. This way, the design consistency of all components using the relevant color variable is maintained. Follow the steps below to learn how to manage color variables:

  1. Open your app editor.

  2. Go to the “Styles” tab and “Style variables” subtab.

    Untitled

  3. You’ll find there name of the style variables and they used for which purpose. You could change the colors as you wish by clicking on the color picker box.

    Untitled

  4. You will see the update in the preview of your application as soon as you make the changes. After refreshing the page, the components that use the color variable you modified will be affected by the change.

That’s all! 🎉