Skip to main content

​
Customization Overview

Make your checkout page match your brand with custom logos, colors, and themes.

​
Accessing Checkout Settings

  1. Go to Dashboard → Settings
  2. Select “Checkout” tab
  3. Customize and preview changes
  4. Save to apply

​
Branding Options

Upload your brand logo to appear in the checkout header.
SettingSpecification
FormatPNG, JPG, SVG
Recommended Size200 × 50 px
Max File Size2 MB
BackgroundTransparent recommended
Use a horizontal logo for best results. The logo appears in the checkout header and confirmation emails.
Add a banner image to enhance your checkout page.
SettingSpecification
FormatPNG, JPG
Recommended Size1200 × 300 px
Max File Size5 MB
Aspect Ratio4:1

​
Theme Settings

​
Color Mode

Light Theme

  • White background
  • Dark text
  • Best for most brands
  • Professional appearance

Dark Theme

  • Dark background
  • Light text
  • Modern aesthetic
  • Reduces eye strain

​
Custom Colors

Customize the checkout color scheme:
Color SettingDescriptionDefault
Accent ColorButtons, links, focus states#6366F1
Hover ColorButton hover states#4F46E5
Text ColorPrimary text#1F2937
Background ColorPage background#FFFFFF

​
Color Picker

For each color setting:
  1. Click the color swatch
  2. Use the color picker or enter a hex code
  3. Preview changes in real-time
  4. Save when satisfied
Ensure sufficient contrast between text and background colors for accessibility. WCAG recommends a contrast ratio of at least 4.5:1.

​
Preview Mode

Before saving changes:
  1. Use the preview panel on the right
  2. Toggle between desktop and mobile views
  3. Test with different products
  4. Verify all elements are readable

​
Customization Examples

​
Tech Startup

Theme: Dark
Accent: #00D4FF (Cyan)
Background: #0F172A (Dark Blue)
Text: #F1F5F9 (Light Gray)

​
E-commerce

Theme: Light
Accent: #16A34A (Green)
Background: #FFFFFF (White)
Text: #111827 (Dark Gray)

​
Creative Agency

Theme: Light
Accent: #8B5CF6 (Purple)
Background: #FAFAFA (Off-White)
Text: #374151 (Gray)

​
Additional Settings

​
Store Information

Display additional information on checkout:
OptionDescription
Store NameShown in header
Support EmailFor customer questions
Terms LinkLink to your terms of service
Privacy LinkLink to your privacy policy
Add links to your legal pages:
  • Terms of Service (required)
  • Privacy Policy (required)
  • Refund Policy (optional)
These appear in the checkout footer.

​
Email Branding

Your checkout branding extends to transactional emails:
Email TypeBranding Applied
Order ConfirmationLogo, colors
Payment ReceiptLogo, colors
Subscription RemindersLogo, colors
Failed PaymentLogo, colors

​
Best Practices

  • Match your website’s look and feel
  • Use the same logo as your main site
  • Consistent color palette builds trust
  • Use professional, high-quality images
  • Include contact information
  • Display security badges
  • Show payment method logos
  • Test on mobile devices
  • Ensure logos scale properly
  • Check color contrast on smaller screens
  • Verify touch targets are adequate
  • Sufficient color contrast
  • Readable font sizes
  • Alt text for images
  • Keyboard navigable

​
Reset to Default

To reset all customizations:
  1. Go to Checkout Settings
  2. Click “Reset to Default”
  3. Confirm the action
  4. Default Waffo Pancake branding will be restored
Resetting to default cannot be undone. Consider saving your current settings before resetting.