Checkout

Fluid

Updated July 02, 2025 17:22

Introduction

The Checkout section in your admin portal enables you to configure how your checkout form looks and behaves for customers. This comprehensive customization system allows you to modify colors, form fields, visual elements, and required information collection to create an optimized purchase experience that aligns with your brand while maximizing conversion rates and gathering necessary customer data.

Accessing Checkout Management

Log in to the Fluid Admin portal
Select the Settings Gear Icon in the top right and click “View All Settings”
In the left navigation sidebar, locate the "Commerce" section
Select "Checkout" from the menu options

Checkout Dashboard

Main View

The Checkout dashboard provides comprehensive control over your customer purchase experience through visual customization and form configuration:

Header Section:

Clear description explaining checkout form customization capabilities
"Setup payment methods" button for configuring payment processing options
"View Checkout Documentation" link for additional optimization guidance
Professional illustration showing a customer completing an online checkout process

Configuration Interface: The dashboard is organized into two main sections: a live preview area and customization controls for real-time checkout optimization.

Live Checkout Preview

Purpose: Provides real-time visualization of how your checkout form appears to customers, allowing you to see changes immediately as you customize settings.

Preview Interface Elements

Header Section:

Company Branding: Displays your company logo and branding elements
Language Selection: Shows current language setting (English) with options for localization
Professional Layout: Clean, conversion-optimized design structure

Product Display:

Product Image: Visual representation of the item being purchased
Product Details: Item name and pricing ($133.04 shown in example)
Clear Pricing: Transparent cost breakdown for customer confidence

Customer Information Form:

Contact Section: Name, email, and phone number collection fields
Billing Information: Address and location data capture
Document Upload: "Copy of drivers license" upload functionality for verification requirements
Form Validation: Real-time field validation and error handling

Order Summary:

Itemized Breakdown: Detailed cost analysis including taxes ($133.04), shipping ($14.04), and total ($147.08)
Discount Code: Promotional code entry with "Apply" functionality
Payment Action: Prominent "Pay now" button for conversion completion

Styling Configuration

Purpose: Customize the visual appearance of your checkout form to match your brand identity and optimize for conversions.

Brand Integration

Use Brand Settings:

Toggle Control: Enable/disable automatic brand guideline application
Consistency Benefit: Automatically applies your configured brand colors, fonts, and visual elements
Efficiency Advantage: Reduces manual styling work by leveraging existing brand configuration

Color Customization

Primary Button Color:

Current Setting: Purple theme (#662E76 hex value)
Color Picker Interface: Visual color selection for precise brand matching
Usage Application: Primary action buttons, especially the "Pay now" button
Conversion Impact: Strategic color choice to maximize click-through rates

Secondary Button Color:

Current Setting: Light purple/pink theme (#F3C4FD hex value)
Complementary Design: Works with primary color for visual hierarchy
Usage Application: Secondary actions like "Apply" for discount codes
Design Harmony: Creates cohesive color scheme throughout checkout process

Typography Settings

Font Selection:

Current Setting: Inter font family
Dropdown Options: Choose from available font families for optimal readability
Brand Alignment: Ensure typography matches overall brand guidelines
User Experience: Balance aesthetic appeal with checkout form clarity

Button Roundedness:

Current Setting: Rounded button style
Style Options: Adjust button corner radius for design preference
Modern Appeal: Rounded buttons often provide more contemporary, approachable appearance
Brand Consistency: Should align with overall website and brand design language

Checkout Form Configuration

Purpose: Control what information is collected from customers during the purchase process to balance conversion optimization with business requirements.

Customer Data Collection

Collect Phone Number:

Toggle Control: Enable/disable phone number collection
Current Setting: Enabled (green toggle)
Business Purpose: Request phone number from customers during checkout
Use Cases: Order updates, delivery coordination, customer service contact

Require Phone Number:

Toggle Control: Enable/disable mandatory phone number field
Current Setting: Enabled (green toggle)
Functionality: Makes phone number field mandatory for checkout completion
Conversion Consideration: Balance lead quality with potential checkout abandonment

Address and Location Information

Require Billing Zip:

Toggle Control: Enable/disable mandatory ZIP code collection
Current Setting: Disabled (gray toggle)
Purpose: Makes ZIP code field mandatory at checkout
Applications: Tax calculation, shipping estimates, geographic analysis, fraud prevention

Strategic Considerations:

Required fields can improve data quality but may impact conversion rates
Consider regional requirements and business necessities when configuring mandatory fields
Test different field requirements to optimize for both data collection and sales completion

Payment Method Integration

Payment Processing Setup

Setup Payment Methods:

Configuration Access: Direct link to payment method configuration
Integration Requirements: Connect with payment processors and gateways
Security Compliance: Ensure PCI compliance and secure payment handling
Customer Options: Provide multiple payment methods for customer convenience

Supported Payment Types:

Credit and debit card processing
Digital wallet integration (PayPal, Apple Pay, Google Pay)
Buy now, pay later options
Cryptocurrency payments (where applicable)
Bank transfer and ACH options

Checkout Optimization Best Practices

Conversion Rate Optimization

Form Field Strategy:

Minimal Required Fields: Collect only essential information to reduce friction
Progressive Information Gathering: Consider collecting additional data post-purchase
Smart Defaults: Use location-based defaults to speed up form completion
Field Validation: Implement real-time validation to prevent form submission errors

Visual Design Principles:

Clear Call-to-Action: Make the "Pay now" button prominent and compelling
Trust Signals: Display security badges, testimonials, and guarantee information
Progress Indicators: Show customers their progress through the checkout process
Mobile Optimization: Ensure excellent experience across all devices

User Experience Enhancement

Accessibility Considerations:

Ensure adequate color contrast for all users
Provide clear error messages and form guidance
Support keyboard navigation and screen readers
Test checkout process with accessibility tools

Performance Optimization:

Optimize checkout page loading speed
Minimize external dependencies that could slow the process
Implement proper error handling for payment processing issues
Provide clear feedback during payment processing

Data Collection Strategy

Information Balance:

Essential Data: Focus on information absolutely necessary for order fulfillment
Optional Enhancements: Consider making some fields optional with clear value proposition
Post-Purchase Collection: Gather additional customer information after successful purchase
Privacy Compliance: Ensure all data collection complies with applicable privacy regulations

Field Configuration Testing:

A/B test different required field combinations
Monitor checkout abandonment rates with different configurations
Analyze customer feedback regarding form complexity
Regular review of collected data utilization and necessity

Maximizing Checkout Efficiency

Strategic Configuration Management

Regular Optimization:

Performance Monitoring: Track checkout completion rates and abandonment points
User Feedback Integration: Incorporate customer feedback into checkout improvements
Competitive Analysis: Stay current with checkout best practices in your industry
Seasonal Adjustments: Modify checkout experience for peak sales periods

Technical Maintenance:

Payment Method Updates: Keep payment processing methods current and functional
Security Reviews: Regularly assess checkout security and compliance
Mobile Experience: Continuously optimize for mobile devices and new browsers
Integration Testing: Verify all checkout integrations work properly after updates

Conversion Optimization:

Monitor analytics to identify checkout optimization opportunities
Test different color schemes and button designs for improved conversion
Experiment with form layouts and field organization
Implement abandoned cart recovery systems to capture lost sales