Canonical URL: https://chargezen.com/docs/checkoutos/setup/branding

# Branding & Theming

Customize the visual appearance of checkout extensions to match your brand

Last updated: 2025-01-16

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

```css
/* 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:

1

#### Upload Your Logo

2

#### Set Logo Position

3

#### 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

```json
{
  "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

```css
/* 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

1

#### Make Your Changes

2

#### Preview on All Devices

3

#### Enable Test Mode

4

#### Publish Changes

## Next Steps

[

### Create Your First Upsell

Put your branded experience to work with a post-purchase upsell

Learn more



](https://chargezen.com/docs/checkoutos/one-click-upsells/creating-first-upsell)[

### Checkout Extensions

Add trust badges and progress bars with your custom branding

Learn more



](https://chargezen.com/docs/checkoutos/checkout-extensions/overview)

Was this page helpful?

Need more help? [Contact support](https://chargezen.com/docs/checkoutos/troubleshooting/support)