How to use the Global Style

Global style settings make it easy to customize how your site looks. In this article, you will learn how to create a global style and apply it to your store.

Create a new Global Style

Step 1: Head to the EcomSolid Dashboard > Styles and click on “Create new style.”

You will be able to create multiple presets and edit the previously created presets in this section.

Step 2: Input your Global Style name and select your preferred style from the templates. Hit “Next step” when finished.

Step 3: Next, you will see all the options to customize the Preset as below.

Color

Under the Color section, you can define four fixed colors used for different positions of your page. Select your preferred color or input the hex color code into the box.

Brand: The Brand color will be applied to the top bar, price, button, icon, hover/active text, and the tab bar.
Highlight color: This color will be used for the points that need to draw visitors’ attention.
Background: Determine the background color for the entire page or the sections at this point.
Custom Color: Pre-define three preferred colors and later use these colors in the process of building your pages.

Typography

Choose a consistent font type, font-weight, and color for the different parts across your site.

Heading
Body & Subheading
Custom font
Base size
Line height
Link

For more information on using the custom font on your store, check out this article.

Button

Button color: Select a color or input a hex color code into the button color and hover color box.

Button style: Style your button further by adjusting the font size, font weight, border-radius, and border width.

Form

Customize your form field to ensure a consistent appearance throughout your pages.

Responsive

Input the number into the fields to decide the suitable width among different devices in pixel or percentage.

Hit “Save Preset” after all configuration is done. Your global style is now ready to use.

Apply the Global Style for your theme

Step 1: From the EcomSolid Dashboard, head to the Theme Editor.

Step 2: Click on the orange icon on the right corner of the Editor. There will be an opened window showing you all the predefined global styles.

Step 3: Select your preferred preset from the ones you created before. Otherwise, please navigate to the EcomSolid Presets tab to choose from our pre-designed preset.

When finished, click on “Apply Preset”; the preset will be applied to all your theme pages.

Apply the Global Style for your page

Step 1: Go to the EcomSolid Dashboard > Page and select your preferred page to start editing.

Step 2: Click on the orange icon on the right corner of the Editor. There will be an opened window showing you all the predefined global styles.

Step 3: Select your preferred preset from the ones you created before. Otherwise, please navigate to the EcomSolid Presets tab to choose from our pre-designed preset.

Click on “Apply Preset” when finished. By choosing the preset from the Page Editor, the style will be applied to the selected page only.

That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.