Site Settings

Author: An Do 303 views

What do you know about Site Settings? Let’s find out this point with EComposer App.

Site Settings below allow you to configure your store’s default color and typography. When you import a template from the library, these colors and fonts will be applied immediately to all of your sections of the page. It aims to assist you in order to ensure that every template you end up creating uses the font and color settings you tend to favor.

First of all, we will come to how to open the Site settings to change lots of fun things for this. Please watch the video below to get more details.

From the editor, you can see the Site settings on the left side next to the Elements tab.

Note: The style here will be applied to all relevant elements on the page, and its priority is lower than the element style. The video below might help you easier understand this tab.

How to open the Theme settings


  • Content Width: You may go to set the default width of the content area.
  • Column gap: This function will allow you to change the default column gap.
  • Element spacing: You can set the default space between the elements.
  • Container gap: Anytime you want to change this feature so just go to set the spacing for all sections of the current page.


  • Text Color/ Body Background: Whenever you want to change the color of the text and the body background, just come to this function to set it.
  • Typography: You may go to customize lots of the settings for typography design such as Size, Font, Weight, Transform, Style, Decoration, Line Height, or even Letter Spacing.
  • Paragraph Spacing: This feature allows you to change the space of each paragraph that the store is using.


  • Text Color: Anytime you want to change the color of the text, please go ahead with this feature.
  • Typography: You may go to customize a lot of the settings for typography design such as Size, Font, Weight, Transform, Style, Decoration, Line Height, or even Letter Spacing.
  • If you want to have more color for the link, please set it with the Hover effect.


  • Basic settings: First of all you will hit some of the main settings for buttons like Typography, Text Shadow, and Padding.
  • Normal/ Hover settings: If you set the button with the Normal or Hover effect, you will go on the Text Color, Background, Box Shadow, Border, and Border Radius.


  • Normal/ Hover settings: You may go to edit the functions for the pictures such as Border, Border Radius, Opacity, Box shadow, and CSS Filters. If you set all of those features it will make your image look more impressive.


  • Label: Whenever you are going to change the form settings, which means you will come to a set with Text Color, and Typography.
  • Field: For more options to go on with form settings, those will start with Typography, Padding, or even some of the effects if you are going to choose the Normal or Hover setting.


  • Add new typo: You may add the new typography by CSS Class, where you can immediately add extra CSS to the layout that overwrites the CSS of the main stylesheet file, allowing you to change the typography of the site as desired. Furthermore, even if you update and save the layout settings, these changes will remain.

Custom Code

  • Custom css code: You may add your own css code here. Beware that this will be applied to the Theme also.
  • Custom js code: You may add your own javascript code here. Beware that this will be applied to the Theme also.

2. Global Colors

The Global color options is very useful for you when building pages. It helps you to save the colors that you will often use in your store. For example, if you want to use “blue” for buttons, you can add that color to the Global color, then when designing for other buttons you just need to choose the available color that you added earlier instead of rewriting the hex code of that blue.

Into this tab, you can add more color or remove the one that you just created. Whenever you want to add another color, please go on Add new color for that request. If you think that color isn’t necessary anymore, you may go with the Trash Bin on the right side to delete it.

3. Global Typography

If you have any requests to change or add the Global typography for your store description, please click on Add new typography to add the extra one and change it to be whatever typo that you want. Whenever you want to remove it, you may go ahead with the Trash Bin icon on the right side of it.

Note: At the end of each stage, we recommend that you double-check whether you saved your settings or not. We just want to make sure you don’t skip this step if you want to keep all of your theme settings.

Leave a Comment

On this page