🎨 Customize Your Checkout Store with CSS in Fleetwire!

Want to tweak the look of your checkout store? Fleetwire lets you add custom CSS to adjust colors, font sizes, or hide elements, giving your store a personalized touch. Let’s walk through how to apply custom styling to your checkout page!

🎯 Why Customize Your Checkout Store?

Customizing your checkout store with CSS helps you:

Match Your Brand: Adjust colors and fonts to align with your brand identity.
Enhance User Experience: Highlight key elements like buttons for better usability.
Hide Unneeded Elements: Remove distractions to streamline the checkout process.

Tip: Some knowledge of CSS is required to customize your store effectively.

🛠 How to Add Custom CSS to Your Checkout Store

Follow these steps to apply custom CSS and transform the look of your checkout store in Fleetwire.

Step 1: Access the Additional Styling Section

Navigate to the settings where you can add your custom CSS.

In your Fleetwire dashboard, go to Settings > Documents.
Click Additional Styling.

Or click here to go directly to the checkout settings.

Here’s what the Additional Styling section looks like.

Step 2: Add Your Custom CSS

Apply CSS to adjust the appearance of your checkout store.

In the Additional Styling section, enter your custom CSS code. Here’s an example to get you started:

.theme--light.v-btn.card-book-now-button {
       color: yellow !important;
       background-color: black !important;
   }
   .checkout-stepper-continue-btn {
       color: purple !important;
   }
   .listing-title {
       font-weight: 600;
   }

- This CSS changes the “Book Now” button to yellow text on a black background, makes the “Continue” button purple, and sets the listing title to a bold font weight.
Click Save to apply your changes.

Pro Tip: Use !important sparingly to override default styles, as it can make future adjustments harder.

Step 3: Preview the Changes

See how your checkout store looks with the new styling.

Visit your online store (e.g., testcompany.fleetwire.io) and start a test checkout.
Compare the before and after views to ensure the styling looks as expected.

Before applying custom CSS:



After applying custom CSS:



Quick Tip: Test on multiple devices to ensure your CSS looks great on both desktop and mobile.

Step 4: Test and Adjust

Ensure your checkout process still functions smoothly with the new styling.

Complete a test booking to confirm buttons and elements work as expected.
Adjust your CSS if needed (e.g., tweak colors or font sizes) and save again.
Monitor customer feedback to ensure the styling enhances their experience.

Warning: Incorrect CSS can break your checkout layout. Always test thoroughly and keep a backup of your original styles.

🌟 Checkout Store Styled, Ready to Impress!

You’ve successfully customized your checkout store with CSS in Fleetwire! Your store now reflects your brand and offers a smoother experience for customers. Test a booking today to ensure everything looks and works perfectly.

🚀 Next Steps

Enhance your checkout and store setup with these tips:

Configure Pricing: Set up listing prices with Configuring Listing Pricing in Fleetwire.
Embed Listings: Display your fleet with Embedding Fleetwire Listings on Your WordPress Site.
Track Orders: Monitor bookings with Registering Pickups and Returns in Fleetwire.
Need Help? Contact us at hi@fleetwire.io or via the in-app chat.

Happy styling! 🌟

Updated on: 15/05/2025