Colors
Global Styles supports 15 global colors divided into the following categories:
- Button color
- Text Color
- Background Color
- Line Color
- Accent Color
These colors will be generated from your published theme. To replace the existing color, click on it and choose another one from the pallet.
Font Manager
Global Styles provides two types of text styles, namely Heading and Paragraph. You can select your preferred option from the drop-down menu, and the font used is taken from Google Fonts.
Typography
GemPages supports 6 types of Heading and 3 types of Paragraph. In the element settings, all settings related to text styles will be selected from these Global typography settings.
When you install GemPages, it will synchronize the global typography with text styles from your themes. The typography information synced from your Shopify theme includes Font Family, Font-size, Line Height, Font Weight, Font Style, and Letter Spacing.
Spacing
GemPages allows you to synchronize spacing on your website by configuring global spacing values. There are 10 types of global spacing available, each of which can be customized with values for three devices: Desktop, Tablet, and Mobile. The default unit for global spacing is pixels (px). Global spacing will be used for configuring outside space, inside space, item spacing, and column gaps.
Default Row Width
About Default Row Width
A page usually consists of multiple sections, each of which requires a distinct style. For instance, sections like Hero Banner usually have backgrounds, and you may prefer to set them to full width. However, other sections have a fixed width to maintain the layout and center the content on the screen. Thus, a universal value is required to automatically adjust the width of such sections.
How to use
- Width
GemPages sets the default width value to 1200px for Desktop and 100% for Tablet and Mobile, which is suitable for all current templates. You don’t need to make any adjustments as GemPages will automatically apply this value.
However, if you prefer a different width value, you can enter a number in the box. For instance, if you enter 1000px, the default width for non-full-width sections/rows will be 1000px.
- Padding
Enter a number for your preferred padding for sections/ rows. Please note that this padding will not be applicable for full-width sections/rows.
Corner
GemPages allows you to synchronize the corners used on your website by configuring a global corner value. You can define three corner styles: Small, Medium, and Large. Simply click on the pencil icon to input the value in pixels.
For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.