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.

1. 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).

2. Click Extract

   Click the Extract button. The system analyzes your website’s CSS and extracts brand colors.

3. Review & Adjust

   Extracted colors are applied to the current theme mode. Review the live preview and fine-tune any values if needed.

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)

If your store’s website URL is already set in Store Settings, it will be pre-filled automatically.

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

---

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

Use a horizontal logo for best results. When importing from a website URL, the site’s favicon is automatically used as the logo.

---

Theme Mode

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

Light Theme

White background, dark text. Best for most brands. Professional appearance.

Dark Theme

Dark background, light text. Modern aesthetic. Reduces eye strain.

---

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.

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

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:

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

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

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

Mobile Optimization

• Use the mobile preview to check layout
• Ensure logos scale properly on small screens
• Verify touch targets are adequate

Accessibility

• Maintain sufficient color contrast (4.5:1 minimum)
• Readable font sizes
• Test with different color vision profiles

---

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)

Resetting cannot be undone. Your current customizations for that theme mode will be lost.

---

Checkout Language

The hosted checkout is multilingual and requires no merchant configuration:

• Automatic detection — the checkout UI opens in the shopper’s browser language and falls back to English when the language isn’t supported yet.
• Shopper choice — shoppers can switch languages at any time via the selector in the checkout footer.
• Payment page follows — the PSP payment page opens in the language the shopper was using when they clicked Pay (22 payment-page languages supported).