Globals

Overview #

If you’ve ever configured colors for your wishlist, then had to set the same colors again for your cookie banner, and again for your back-in-stock form, you know how tedious that gets. Global Styles solves this by letting you create a single set of design tokens that all features reference.

You set your brand palette and fonts once. From that point on, every Customize Design tab across Swift Commerce pulls from those shared values. Update your primary color later, and it flows through everywhere without you having to touch each feature individually.

Global Styles is available to Swift Commerce Pro users.

Requirements #

• Swift Commerce Free 1.3.0+
• Swift Commerce Pro 1.3.0+

Getting Started #

Step 1: Open Global Styles

1. Navigate to WordPress → Swift Commerce
2. Click Globals in the sidebar navigation
3. You’ll see two sections to configure: Colors and Typography

Step 2: Set Up Your Colors

1. Click Colors in the sidebar
2. You’ll see your color palette listed as editable tokens
3. Click any color row to expand its editor
4. Change the name, pick a new color using the color picker, or type a hex value directly
5. To add a brand color that isn’t in the defaults, click Add Color at the bottom

Step 3: Set Up Your Typography

1. Click the back arrow to return to the main view, then click Typography
2. You’ll see your typography presets listed
3. Click any row to expand and configure the font family, weight, size, and other properties
4. Use the font search to browse Google Fonts and preview them before selecting
5. To add another typography preset, click Add Typography at the bottom

Step 4: Save Your Changes

1. Click Save Changes in the sidebar footer
2. Your global tokens are now active across all features
3. Open any feature’s Customize Design tab and you’ll see your global colors and fonts available in the pickers

#