Global Styles

How to install, edit, and launch components like Quantity Buttons, Offer Progress Bars, Shipping Progress Bars, and Offer Messages to your site, Experiences, and Tests.

Overview

Global Styles is your centralized design system for managing component defaults across all offers. Create consistent, branded components with the flexibility to override them per offer when needed.

Important: To add these components to your site, please follow these installation instructions

Key Features

  • Centralized Design Management: Manage styling defaults for all component types in one location

  • Brand Consistency: Ensure components maintain consistent styling across all offers

  • Time-Saving Workflow: Set up styles once and automatically apply to new offers

  • Flexible Override System: Customize individual components without affecting global defaults

How It Works

Global Styles serve as templates for each component type:

  1. Default Application: New components automatically use Global Styles

  2. Inheritance: Styling, content templates, and layouts transfer to new components

  3. Override Capability: Modify styles in specific offers without affecting globals

  4. Consistency: Global changes update all linked components

Component Types

Global Styles can be configured for each component style type:

Each component type allows you to set default styling, content templates, and layout preferences that will automatically apply to new components.

Setting Up Global Styles

  1. Access Global Styles from your dashboard

  2. Choose Component Type to configure

  3. Configure Base Styling: Colors, typography, spacing

  4. Save and Apply to make available for new offers

Advanced Features

Color Theme System

  • Primary Color Selection: Choose a color and it automatically filters down to all elements in different opacities

  • Manual Swatch Override: Manually change specific color swatches for individual elements when needed

Using in Offers

Automatic Application

Once Global Styles is set up, new offer components inherit Global Styles automatically.

Customizing Components

Override global settings for specific campaigns:

  • Linked: Follows global updates

  • Unlinked: Independent custom styling

Tips

  • Start with Brand Guidelines: Use official colors and typography

  • Think Mobile-First: Design for touch interactions and small screens

  • Plan for Flexibility: Create styles that work across campaign types

  • Regular Reviews: Update based on performance and brand evolution

Troubleshooting

Components Not Using Global Styles: Verify styles are saved and components aren't individually customized

Last updated: 7/29/25

PreviousImage Onsite EditorNextCSS and JavaScript Injection

Last updated

Was this helpful?