Global Style

What is global style?

The Global Style section is an interesting part that EcomSolid built for you to let your design work better and easier than a cakewalk. With just a few clicks, you can effortlessly set up your store with Color, Typography, Buttons, Form, and devices to adapt the theme's dimensions.

Exciting, right? Here is the way to define your process:
 

Apply the global style

When you open the Ecomsolid theme editor, a pop-up “Welcome to Global Style” will be displayed as a WYSIWYG editor that provides the overall pictures of the section to help a novice get started.

Click on Start Design Now! button to start applying the global style.

welcome to global style pop-up

 

 

Global style shortcuts

If this welcome pop-up doesn't appear, you can click on the cog icon on the right at the bottom of your page, or click at    from Theme Editor

 

global style shortcut

 

 

General

There are 5 elements that you can customize quickly and easily with global style:

  Color

If you want a store color palette that fits your brand story, it is highly recommended that you use the color setting. This element helps you customize:

  the brand color

  highlight color

  background-color

add your own color palette matching your brand perfectly.

 

set up color in global style

 

  Typography

Typography design is about much more than simply making the words legible. You can change:

  the font

  weight

 color of:

   ・the headings
   ・subheadings
   ・buttons
   ・and paragraph in section presets.

It also has multiple options to set up:

  the base size

  the line-height

  change the look & feel of your links

 

set up typography in global style

  Button

Button setting is to customize

  button color

  button style

You will need your store synchronized and the button has its effect on that purpose.

 

set up button in global style

Form

Online forms provide you with an easy to implement, secure solution to gather the data you need in a consistent automated manner. Form Setting on the Global Style allows you to customize the appearance of the elements in the form by inputting:

  input placeholder color 

  border color

  border hover color

 border focus color 

  border radius

   border width

set up form in global style

 

Responsive

Adapt your theme's dimensions to each device including desktop, laptop, tablet, and mobile

 

set up responsive in global style

 

 

After you’re done designing your page using the global style, you can click on the Save settings at the top of your screen to save your work. 

 

save settings in the end of setting up the global style

Final Words

That's the end of Global Styles tutorial.

Let set up yours right away!

 


Was this helpful?