Introducing Global Styles 🔥 Say goodbye to the days where a lot of time and effort was needed to customize pages to suit your brand aesthetic. Now it's easier than ever before to look cohesive, consistent and polished across all your pages!
Built to save you time, Global Styles allow for setting up reusable, standardized styles such as colors and typography, which are used consistently across your pages.
Changes applied within Global Styles can be applied to any existing page(s) if chosen, and are applied automatically to new pages you create. Since styles are Global they can easily be managed by other members of your design team, ensuring a consistent brand experience and page design across the board.
Spend less time working on design tweaks and more time focusing on your store's goals!
Accessing Global Styles
To access Global Styles, click on the "Setup Global Styles" button located in the popup. If the popup is no longer accessible, hover over the "Global" section on the left sidebar and select "Styles" there:
If you're in the builder, you can click on the Global Styles button located in the top-right of your screen and click on the "Manage your Global Styles" link:
On the next screen, you can start setting up your global styles for Text and Button elements used across your pages:
Setting Up Global Styles
You can set different Text styles for Headings (Heading 1, Heading 2) Subheadings (Subheading 1, Subheading 2), Links and Body Text (Body Copy 1 - 6).
You can also set different Button styles for Primary, Secondary and Style 1 - 3 buttons, allowing for a total of 5 different button styles that can be configured and used for buttons across your pages.
You can also set different styles for Desktop, Tablet and Mobile devices independently from one another, allowing for better control of styles shown for each device type used to view your pages.
To set a global style for a particular Text or Button style option, first click on the type of style (1), choose which device type to edit the style on (2) and then apply your style edits using the options available (3):
Once you've applied the desired edit(s) to global style(s), click the "Apply Global Styles" button in the top-right corner to save. Confirm the action in the popup by clicking the "Apply" button and your new global styles will be saved and used across all pages that use global styles (including Published pages):
📝The main global styles for the Text and Button elements are set in the "Desktop" view. On "Tablet/Mobile" views, for the Text element you can adjust the Font Size, Line Height and Text Alignment styles only. For the Button element, you can adjust the Font Size, Alignment, Size and Padding styles only.
Applying Global Styles to an Existing Page
All new pages you create after the Global Styles functionality was added to the app will use global styles automatically. However, existing pages will not. To apply global styles to an existing page, simply open the page in the builder and click the 🌐 icon (1) in the top-right corner then click the "Reset to Global Styles" (2) button:
Confirm the action by clicking the "Reset" button in the popup:
📝 Page Styles can be set on a particular page if desired, which are independent from Global Styles. If page styles differ from global styles, an orange indication dot will appear above the 🌐 icon.
To set a particular text type for Text elements in the builder, highlight the desired text and choose a type from the Text Type dropdown menu:
To set a particular button type for Button elements in the builder, click on the button and then choose a type from the Button Type dropdown menu located in the sidebar:
Viewing Global Styles on a Page Template
When creating a new page and selecting a pre-built Template, you can view how your Global Styles will appear on the template prior to creating the page. To do that, click the "Preview Global Styles" toggle to the ON position in the templates library:
If the toggle is left ON and then the "Use Template" button is clicked, your global styles will be automatically applied to the newly created page.
If the toggle is left OFF, global styles will not be applied to the newly created page automatically, the page will use the template's page styles instead.
What is the purpose of Global Styles?
Built to save you time, Global Styles help you set up reusable, standardized styles, such as colors and typography, which are used consistently across your pages. These styles help create a unified look and feel, which make creating and maintaining a consistent brand and user experience much easier.
Which elements are available to customize globally?
You can manage Text and Button elements, but more elements are coming soon!
If you'd like a specific one, please leave a request for more elements by clicking the "Request a new element" link in the global styles editor and we'll take it into account.
How can I start with Global Styling?
Just follow the information in this guide to set up the presets in the Global Style section, and then use them in the Builder! You can also apply Global Styles in the template library to see how the template looks with your global styles applied.
Do I need to update pages manually if the changes in Global Styles are made?
No, all changes will be synchronized automatically on pages that already use Global Styles. This applies to both the Builder and Live/Published pages.