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!

To access Global Styles, click on the "Setup Global Styles" button located in the popup. If the popup is no longer accessible, click on the "Global" link in the sidebar and select "Global 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:

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, there is a limited subset of styles that can be adjusted.

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:

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.