Branding & Theming

CheckoutOS extensions automatically inherit your Shopify checkout branding. You can further customize colors, fonts, and styling to create a seamless experience that matches your brand identity.

Access branding settings from Dashboard → Settings → Branding.

Shopify Checkout Branding

CheckoutOS respects your Shopify checkout branding settings. Configure your base checkout appearance in Shopify Admin → Settings → Checkout first, then use CheckoutOS branding for extension-specific customizations.

Brand Colors

Define your brand's color palette for use across all checkout extensions:

Primary Color

Your primary brand color is used for:

Call-to-action buttons (Accept, Add to Order)
Progress bar fills
Active state indicators
Link text

Color Variables

/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;

Secondary Colors

Secondary colors complement your primary color:

Accent Color — Badges, highlights, and secondary buttons
Success Color — Confirmation messages and checkmarks
Warning Color — Urgency indicators and timers

Typography

By default, CheckoutOS uses your Shopify checkout font. You can override this for specific elements:

Font Settings

Heading Font — Used for upsell titles and extension headers
Body Font — Used for descriptions and body text
Button Font — Used for CTA button text

CheckoutOS supports Google Fonts and any web-safe fonts. Custom fonts can be loaded via CSS.

Performance Consideration

Loading custom fonts can impact checkout performance. We recommend using fonts already loaded by your Shopify theme to avoid additional network requests.

Logo Settings

Add your logo to post-purchase upsell pages for brand consistency:

Upload Your Logo

Set Logo Position

Configure Dark Mode Version

Button Styles

Customize the appearance of action buttons:

Button Shape

Rounded — Soft, rounded corners (8px radius)
Pill — Fully rounded ends
Square — Sharp corners (0px radius)
Custom — Define your own border radius

Button Size

Small — Compact buttons for minimal footprint
Medium — Balanced size (recommended)
Large — High-visibility buttons for emphasis

Button Configuration

{
  "primaryButton": {
    "backgroundColor": "#4F46E5",
    "textColor": "#FFFFFF",
    "borderRadius": "8px",
    "fontSize": "16px",
    "padding": "12px 24px",
    "hoverEffect": "darken"
  },
  "secondaryButton": {
    "backgroundColor": "transparent",
    "textColor": "#4F46E5",
    "border": "1px solid #4F46E5",
    "borderRadius": "8px"
  }
}

Custom CSS

For advanced customization, you can add custom CSS that applies to all CheckoutOS extensions:

Custom CSS Example

/* Target upsell offer cards */
.checkoutos-upsell-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

/* Customize the accept button */
.checkoutos-accept-btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Style the countdown timer */
.checkoutos-timer {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
}

CSS Specificity

Custom CSS has lower specificity than Shopify checkout styles. Use!important sparingly and test thoroughly across devices.

Preview & Testing

Always preview your branding changes before publishing:

Live Preview — See changes in real-time as you edit
Device Preview — Test on desktop, tablet, and mobile views
Test Mode — Enable test mode to see changes on real orders without affecting customers