Articles on: Online Store & Checkout

Customize Your Checkout Style

Style Your Booking Page 🎨


Give your booking page and checkout a look that matches your brand — no CSS required. Pick a preset, set your accent color, and save. Your style applies to your hosted Fleetwire store and to Fleetwire widgets embedded on your own website.


Note: Booking page style is currently in beta and rolling out to accounts. If you don't see it in your settings yet, reach out to us and we'll turn it on for you.


Why style your booking page? 🎯


  • Match your brand — colors, fonts, and corner styling that feel like the rest of your website.
  • Light or dark — dark presets restyle the entire checkout (calendar, forms, order tables, and the confirmation page) automatically.
  • Safe by design — there's no code to break. Invalid values are simply ignored, so your store always keeps working.


Step 1: Open the style settings 🛠️


Go to Settings → Checkout → Booking page style, or head straight to https://app.fleetwire.io/themes.


Use the View your store button in the top corner at any time to see your live store in a new tab.


Step 2: Pick a preset


Choose the preset closest to the look you want — each card shows a small color swatch preview:


  • Light — the classic Fleetwire look
  • Dark — a modern dark checkout
  • Luxury — dark with gold accents and squared corners, built for exotic and premium fleets
  • Minimal — monochrome and understated
  • Retro — warm cream tones with a serif font
  • Coastal — bright and easygoing blues


A preset is a starting point — everything below adjusts it.




Step 3: Set your accent color and font


  • Accent color — used for buttons, highlights, and selected dates on the calendar. Type any CSS color (like #C9A24B) or click the swatch to open a color picker. Leave it blank to keep the preset's accent.
  • Font — choose from Inter, Poppins, Georgia, Marcellus, and more — or keep Match my website (default) so embedded widgets inherit your site's own font.


The preview panel on the right updates instantly as you make changes, so you can experiment freely before saving.


Step 4: Fine-tune with advanced tokens (optional)


Open Advanced tokens to adjust individual pieces:


  • Colors — surface (card background), page background, text, muted text, borders, and the text color used on top of your accent.
  • Corner radius — how rounded cards and buttons are, from sharp (0px) to pill-shaped.


Leave any field blank to inherit it from the preset.


Step 5: Save and check your store 🌟


Click Save style. Visitors see the new look on their next page load — open your store with View your store (do a hard refresh if you still see the old style). It's worth clicking through a test booking on desktop and mobile to see the full effect, including the confirmation page.


Changed your mind? Remove style takes your store back to the default look, using your brand color as the accent.


Previously using custom CSS?


The booking page style replaces the old Custom Styling (custom CSS) approach for colors, fonts, and general look-and-feel — we recommend it for almost everyone. If you still have custom CSS from before, it continues to load, but rules that set colors or fonts can fight your new style. If something looks off after saving a style, remove the overlapping rules under Settings → Checkout → Custom Styling.


Custom CSS remains available for advanced tweaks the style settings don't cover, like hiding a specific element.



Questions or a look you can't quite achieve? Reach out — we're happy to help you dial it in. 🚗


🚀 Next Steps


Enhance your checkout and store setup with these tips:



Happy styling! 🌟

Updated on: 27/08/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!