When developing the “Pear - Modern E-Commerce Tenmplate” template, we focused on making it as easily customizable as possible. We created variables when using fonts, 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.

   

3. You’ll find there name of the font variables and they used for which purpose. You could change the fonts as you wish by clicking on the dropdown box.

   

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 font variable you modified will be affected by the change.

That’s all! 🎉