Customize Checkout Branding

BYOB (Bring Your Own Brand) on Occasion lets you customize checkout colors, and fonts so you can highlight your own brand to your customers giving them confidence to book online.

Pricing Note:

This feature is included for free in the Grow, Maximize and Enterprise plans or is available as a premium add-on for $20 per month in the Start plan.

What is BYOB on Occasion?

BYOB (Bring Your Own Brand) is Occasion's white-label checkout customization feature that allows businesses to:

Use custom brand colors (hex codes)
Apply custom fonts (Google Fonts or uploaded)
Remove all Occasion branding
Add your own logo and footer text
Create a seamless branded experience

This feature helps increase conversion rates by maintaining brand consistency throughout the customer journey.

How to Set Up Brand Colors in Occasion

Step-by-Step Instructions:

Access Branding Settings
- Log into your Occasion account
- Navigate to: Settings → Branding → Checkout Customization
- Click "Brand Colors"
  Configure Your Colors
- Primary Brand Color: Enter hex code (example: #FF5733)
- Secondary Color: For buttons and links
- Text Color: Choose for optimal readability (typically #000000 or #FFFFFF)
- Background Color: Optional, defaults to white
  Save Your Changes
- Click "Save Changes"
- Changes apply immediately
- No code required

Pro Tip: Find your hex codes using Chrome DevTools (right-click → Inspect → click color picker) or ask your web designer.

Result: Your checkout displays your exact brand colors on headers, buttons, links, and all accent elements.

How to Add Custom Fonts to Occasion Checkout

Compatible Font Types:

Google Fonts (800+ options)
Custom web fonts (.woff, .woff2)
System fonts (Arial, Helvetica, etc.)

Setup Process:

Navigate to Typography Settings
- Settings → Branding → Checkout Customization
- Select "Typography" tab
  Choose Your Fonts
- Header Font: For titles and event names (recommended: bold, readable)
- Body Font: For descriptions and details (recommended: clean, simple)
- Button Font: For CTAs (recommended: matches header or body)
  Implementation Options
- Option A: Select from Google Fonts dropdown
- Option B: Paste Google Fonts URL
- Option C: Upload custom font files (max 2MB each)
  Adjust Font Sizes (optional)
- Small, Medium, Large, or Custom pixel sizes
- Preview before saving

Font Loading: Fonts load asynchronously to maintain page speed. Average load time: <100ms.

How to Remove Occasion Branding (White-Label Setup)

What Gets Removed:

Element	Location	Replacement Option
"Powered by Occasion"	Footer	Your logo/text
Occasion logo	Emails	Your logo
Occasion branding	Checkout pages	Your branding
Occasion favicon	Browser tab	Your favicon
Occasion URL	Domain	Your custom domain

Removal Process:

Enable White-Label Mode
- Go to: Settings → Branding → White Label
- Toggle "Remove Occasion Branding" = ON
  Add Your Branding (optional)
- Upload logo (PNG recommended, max 2MB)
- Add custom footer text (max 100 characters)
- Upload favicon (16x16 or 32x32 pixels)
  Save and Apply
- Click "Save Changes"
- Changes apply to all events immediately
- Test with preview mode

How to Test Your BYOB Setup

Pre-Launch Checklist:

Visual Testing
- Colors display correctly on all buttons
- Fonts load and are readable
- Logo appears at correct size
- No Occasion branding visible
Device Testing
- Desktop view (Chrome, Safari, Firefox)
- Mobile view (iOS and Android)
- Tablet view (iPad, Android tablets)
Functional Testing
- Complete test booking
- Check confirmation email branding
- Verify receipt appearance
- Test on slow connection (3G)

Testing Steps:

Click "Preview Checkout" in Branding settings
Open in incognito/private mode
Complete a test transaction ($0.01 or test mode)
Screenshot for team review
Get customer feedback

Frequently Asked Questions

Q: Can I use different branding for different events?

A: Currently, BYOB settings apply globally to all events. Multiple brand profiles are available on the Maximize plan (coming Q2 2025).

Q: What's the difference between BYOB and custom domains?

A: BYOB customizes visual branding (colors, fonts, logos). Custom domains change your URL from occasion.app to your own domain. Both are included in the $20/month add-on.

Q: How long does it take for changes to appear?

A: Visual changes (colors, fonts) apply instantly. Logo uploads may take 1-2 minutes to propagate. Clear cache if changes don't appear.

Q: Can I revert to default Occasion branding?

A: Yes. Toggle BYOB off in Settings → Branding. Changes revert immediately. Your settings are saved for future use.

Q: What image formats work best for logos?

Best: PNG with transparent background
Good: SVG for scalability
Acceptable: JPG (no transparency)
Size: 500x200px recommended, 2MB max

Q: Will BYOB affect my page load speed?

A: No. Custom assets are CDN-optimized. Average impact: <50ms additional load time.

Q: Do I need coding knowledge?

A: No. BYOB is completely no-code. If you know your brand colors (or have them from your website), setup takes under 5 minutes.

Need Help?

Setup Assistance: support@occasion.app
Technical Issues: Include screenshot and browser info
Response Time: Within 24 hours

Last Updated: January 2025

Article Version: 2.0

Applies to: All Occasion plans with BYOB enabled

How to Customize Checkout Branding on Occasion (BYOB Complete Guide)