> ## Documentation Index
> Fetch the complete documentation index at: https://docs.waffo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Customization

> Brand your checkout experience with custom colors, logo, and style import

## Customization Overview

Make your checkout page match your brand. Customize colors manually, or import styles directly from your website URL.

## Accessing Checkout Settings

1. Go to Dashboard → Settings
2. Select the "Checkout" tab
3. Customize and preview changes in real-time
4. Save to apply to both light and dark themes

***

## Import from Website URL

The fastest way to brand your checkout — paste your website URL and Waffo Pancake automatically extracts your brand colors, border radius, and favicon.

<Steps>
  <Step title="Enter Your Website URL">
    In the Checkout Settings panel, find the "Import from Website" section and paste your website URL (e.g., `https://yoursite.com`).
  </Step>

  <Step title="Click Extract">
    Click the **Extract** button. The system analyzes your website's CSS and extracts brand colors.
  </Step>

  <Step title="Review & Adjust">
    Extracted colors are applied to the current theme mode. Review the live preview and fine-tune any values if needed.
  </Step>
</Steps>

### How It Works

Style extraction uses a 3-tier strategy for maximum accuracy:

| Tier  | Method           | What It Extracts                                                                                              |
| ----- | ---------------- | ------------------------------------------------------------------------------------------------------------- |
| **1** | CSS Variables    | `--primary`, `--brand`, `--accent` and similar CSS custom properties                                          |
| **2** | CSS Rule Parsing | Button backgrounds, heading colors, body styles from actual CSS rules                                         |
| **3** | AI Fallback      | When tiers 1-2 yield insufficient results, an AI model analyzes the HTML/CSS context to identify brand colors |

### Extracted Properties

| Property         | Source                                                  |
| ---------------- | ------------------------------------------------------- |
| Primary Color    | Brand/accent color from buttons and CTAs                |
| Background Color | Page background color                                   |
| Card Color       | Derived from background color (slightly lighter/darker) |
| Text Color       | Main body text color                                    |
| Border Radius    | Most common border-radius used on the site              |
| Logo             | Site favicon (converted to base64)                      |

<Tip>
  If your store's website URL is already set in Store Settings, it will be pre-filled automatically.
</Tip>

<Note>
  AI-assisted extraction is rate-limited to 10 requests per store per day. CSS-based extraction (tiers 1-2) has no limit.
</Note>

***

## Logo

Upload your brand logo to appear on the checkout page.

| Setting          | Specification           |
| ---------------- | ----------------------- |
| Format           | PNG, JPG, SVG           |
| Recommended Size | 200 × 50 px             |
| Max File Size    | 2 MB                    |
| Background       | Transparent recommended |

<Tip>
  Use a horizontal logo for best results. When importing from a website URL, the site's favicon is automatically used as the logo.
</Tip>

***

## Theme Mode

Each theme maintains its own set of color values. Switch between modes to customize each independently.

<CardGroup cols={2}>
  <Card title="Light Theme" icon="sun">
    White background, dark text. Best for most brands. Professional appearance.
  </Card>

  <Card title="Dark Theme" icon="moon">
    Dark background, light text. Modern aesthetic. Reduces eye strain.
  </Card>
</CardGroup>

***

## Color Settings

Customize the checkout color scheme for the current theme mode:

| Setting              | Field Name                | Default (Light) | Default (Dark) |
| -------------------- | ------------------------- | --------------- | -------------- |
| **Primary Color**    | `checkoutColorPrimary`    | #111111         | #FEFDFD        |
| **Background Color** | `checkoutColorBackground` | #F4F4F4         | #111315        |
| **Card Color**       | `checkoutColorCard`       | #FFFFFF         | #181A1B        |
| **Text Color**       | `checkoutColorText`       | #111111         | #FFFFFF        |

For each color setting, click the color swatch to open the color picker, or enter a hex code directly.

<Note>
  Ensure sufficient contrast between text and background colors for accessibility. WCAG recommends a contrast ratio of at least 4.5:1.
</Note>

### Border Radius

Control the roundness of UI elements with the `checkoutBorderRadius` setting.

| Value  | Style                |
| ------ | -------------------- |
| `0px`  | Sharp corners        |
| `4px`  | Subtle rounding      |
| `8px`  | Standard (default)   |
| `12px` | Large rounding       |
| `16px` | Extra-large rounding |

***

## Live Preview

The preview panel shows your checkout page in real-time as you make changes.

* **Desktop view** — Full-width checkout layout
* **Mobile view** — Phone-sized checkout layout
* **Product selector** — Preview with different products from your store

Changes update instantly in the preview without saving.

***

## API Reference

Checkout settings are saved as part of the store's `checkoutSettings` object:

```json theme={"system"}
{
  "checkoutSettings": {
    "light": {
      "checkoutLogo": "https://...",
      "checkoutColorPrimary": "#111111",
      "checkoutColorBackground": "#F4F4F4",
      "checkoutColorCard": "#FFFFFF",
      "checkoutColorText": "#111111",
      "checkoutBorderRadius": "8px"
    },
    "dark": {
      "checkoutLogo": null,
      "checkoutColorPrimary": "#FEFDFD",
      "checkoutColorBackground": "#111315",
      "checkoutColorCard": "#181A1B",
      "checkoutColorText": "#FFFFFF",
      "checkoutBorderRadius": "8px"
    }
  }
}
```

Update via the [Update Store](/api-reference/endpoints/stores) endpoint with `checkoutSettings` in the request body.

***

## Store Information

| Option        | Description                              |
| ------------- | ---------------------------------------- |
| Store Name    | Shown in checkout header                 |
| Support Email | For customer questions                   |
| Terms Link    | Link to your terms of service (required) |
| Privacy Link  | Link to your privacy policy (required)   |

***

## Best Practices

<AccordionGroup>
  <Accordion title="Brand Consistency">
    * Use the **Import from Website** feature to automatically match your site's colors
    * Use the same logo as your main site
    * Consistent color palette builds trust
  </Accordion>

  <Accordion title="Customize Both Themes">
    * Many customers use dark mode — customize both light and dark themes
    * Ensure your logo works on both light and dark backgrounds
    * Test color contrast in both modes
  </Accordion>

  <Accordion title="Mobile Optimization">
    * Use the mobile preview to check layout
    * Ensure logos scale properly on small screens
    * Verify touch targets are adequate
  </Accordion>

  <Accordion title="Accessibility">
    * Maintain sufficient color contrast (4.5:1 minimum)
    * Readable font sizes
    * Test with different color vision profiles
  </Accordion>
</AccordionGroup>

***

## Reset to Default

To reset the current theme mode to default:

1. Click "Reset" in the Checkout Settings
2. Default Waffo Pancake colors will be restored for the current mode (light or dark)

<Warning>
  Resetting cannot be undone. Your current customizations for that theme mode will be lost.
</Warning>

***

<h2 id="checkout-language">
  Checkout Language
</h2>

Checkout language needs no configuration here — it follows the shopper's browser language automatically, and shoppers can switch it themselves. See [Multi-Language Support](/features/checkout#checkout-language) for the 19 supported languages and the resolution order.