Skip to main content

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.

​
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:
TierMethodWhat It Extracts
1CSS Variables--primary, --brand, --accent and similar CSS custom properties
2CSS Rule ParsingButton backgrounds, heading colors, body styles from actual CSS rules
3AI FallbackWhen tiers 1-2 yield insufficient results, an AI model analyzes the HTML/CSS context to identify brand colors

​
Extracted Properties

PropertySource
Primary ColorBrand/accent color from buttons and CTAs
Background ColorPage background color
Card ColorDerived from background color (slightly lighter/darker)
Text ColorMain body text color
Border RadiusMost common border-radius used on the site
LogoSite 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.
Upload your brand logo to appear on the checkout page.
SettingSpecification
FormatPNG, JPG, SVG
Recommended Size200 × 50 px
Max File Size2 MB
BackgroundTransparent 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:
SettingField NameDefault (Light)Default (Dark)
Primary ColorcheckoutColorPrimary#7CCB02#ADFF85
Background ColorcheckoutColorBackground#FFFFFF#0A1A1F
Card ColorcheckoutColorCard#F3F4F6#0A1A1F
Text ColorcheckoutColorText#111827#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.
ValueStyle
0pxSharp corners
4pxSubtle rounding
8pxStandard (default)
12pxLarge rounding
16pxExtra-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": "#7CCB02",
      "checkoutColorBackground": "#FFFFFF",
      "checkoutColorCard": "#F3F4F6",
      "checkoutColorText": "#111827",
      "checkoutBorderRadius": "8px"
    },
    "dark": {
      "checkoutLogo": null,
      "checkoutColorPrimary": "#ADFF85",
      "checkoutColorBackground": "#0A1A1F",
      "checkoutColorCard": "#0A1A1F",
      "checkoutColorText": "#FFFFFF",
      "checkoutBorderRadius": "8px"
    }
  }
}
Update via the Update Store endpoint with checkoutSettings in the request body.

​
Store Information

OptionDescription
Store NameShown in checkout header
Support EmailFor customer questions
Terms LinkLink to your terms of service (required)
Privacy LinkLink to your privacy policy (required)

​
Best Practices

  • 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
  • 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
  • Use the mobile preview to check layout
  • Ensure logos scale properly on small screens
  • Verify touch targets are adequate
  • 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.