Cart

Introduction

The Cart settings section in your admin portal enables you to customize how your shopping cart behaves and appears to customers. This comprehensive system allows you to configure cart drawer positioning, visual styling, and user experience elements to create an optimal shopping experience that aligns with your brand and customer preferences.

Accessing Cart Settings

1. Log in to the Fluid Admin portal
2. In the left navigation sidebar, locate the "Settings" section
3. Select "Cart" from the menu options

Cart Settings Dashboard Overview

The Cart settings dashboard provides comprehensive control over cart behavior and appearance with the following key sections:

• Header Section: Clear description of cart behavior and appearance customization
• Save Button: For preserving configuration changes
• View Cart Documentation: Link for additional guidance on cart optimization strategies
• Professional Illustration: Visual representation of cart configuration and customer interaction

Preview Section

Desktop and Mobile Preview

Purpose: Real-time preview of cart appearance and behavior across different device types.

Preview Features:

• Desktop View: Shows cart drawer appearance on desktop devices
• Mobile View: Displays cart behavior and styling on mobile devices
• Interactive Elements: Live preview of cart functionality including:
  • Cart drawer positioning
  • Product display within cart
  • Checkout button styling
  • Color scheme implementation
  • "You May Also Like" product recommendations

Sample Cart Display:

• Store Example: "Taco Tuesday's" cart implementation
• Product Display: Shows individual items (Tacos - $28.99) with quantity controls
• Checkout Integration: "$32.35 - Checkout" button with primary color styling
• Recommendation Section: "You May Also Like" featuring related products (Item 1, Item 2, Item 3 - $19.99 each)
• User Context: "Shopping with Jessica" indicator showing personalized shopping experience

Configure Cart

Cart Drawer Position

Purpose: Control where the cart drawer appears on your website when customers add items or view their cart.

Available Options:

• Left: Cart drawer slides in from the left side of the screen
  • Use Cases: Left-to-right reading patterns, desktop-focused experiences
  • User Experience: Natural flow for left-aligned navigation structures
• Right (Currently Selected): Cart drawer slides in from the right side of the screen
  • Use Cases: Right-aligned navigation, mobile-optimized experiences
  • User Experience: Follows common e-commerce patterns and mobile app conventions

Strategic Considerations:

• Right-side positioning aligns with standard e-commerce cart placement
• Consider your site's navigation structure when selecting position
• Test both options with your target audience for optimal user experience

Colors Configuration

Brand Integration Options

Use Brand Settings:

• Status: Currently enabled
• Purpose: Automatically applies your established brand colors to cart elements
• Benefits: Ensures consistent brand experience across all cart interactions
• Link: "Brand Guidelines settings page →" for comprehensive brand management

Primary Color

Current Setting: #728e3 (Blue) Purpose: Used for the primary action buttons and key interactive elements

Applications:

• Checkout button background
• Add to cart buttons
• Primary interactive elements
• Cart drawer header styling

Design Considerations:

• Should provide strong contrast against background colors
• Must be accessible for all users (WCAG compliance)
• Should align with your brand's primary color palette

Secondary Color

Current Setting: #8a7528 (Brown/Gold) Purpose: Used for secondary actions and supporting elements

Applications:

• Secondary buttons and links
• Supporting text elements
• Accent colors for product information
• Complementary design elements

Design Considerations:

• Should complement the primary color without competing
• Used for less critical actions and supporting information
• Maintains visual hierarchy while supporting brand consistency

Best Practices for Cart Configuration

User Experience Optimization

Cart Drawer Positioning:

• Mobile Priority: Consider mobile usage patterns when selecting cart position
• Site Integration: Ensure cart position aligns with your site's navigation structure
• User Testing: Test both positions with real users to determine optimal placement

Color Selection:

• Brand Consistency: Maintain alignment with overall brand guidelines
• Accessibility: Ensure sufficient contrast ratios for all users
• Conversion Optimization: Choose colors that encourage checkout completion

Technical Implementation

Brand Integration:

• Utilize "Use brand settings" for consistent color application
• Regularly update brand guidelines to maintain consistency
• Test color changes across all cart interactions

Performance Considerations:

• Preview changes before saving to ensure desired appearance
• Test cart functionality across different devices and browsers
• Monitor cart abandonment rates after configuration changes

Advanced Customization Options

Cart Behavior Settings

Auto-Open Behavior:

• Configure when cart drawer automatically opens
• Set timing for cart drawer auto-close
• Customize cart drawer animation settings

Product Recommendations:

• "You May Also Like" section configuration
• Related product algorithm settings
• Cross-sell and upsell opportunity optimization

Integration Features

Personalization:

• "Shopping with [Name]" personalization display
• Customer-specific cart experiences
• Representative attribution within cart interface

Analytics Integration:

• Cart interaction tracking
• Conversion funnel analysis
• User behavior monitoring within cart interface

Future Enhancements

The Cart settings system will continue to expand with additional customization options:

• Advanced Animation Controls: Custom cart drawer animations and transitions
• Enhanced Product Recommendations: AI-powered suggestion algorithms
• A/B Testing Integration: Built-in testing for cart configuration optimization
• Advanced Personalization: Dynamic cart experiences based on customer behavior

Support and Documentation

For additional guidance on cart optimization strategies and advanced configuration options, use the "View Cart Documentation →" link in the dashboard or contact your system administrator for personalized setup assistance.

Troubleshooting Common Issues

Cart Display Problems:

• Verify color contrast meets accessibility standards
• Test cart functionality across different browsers
• Ensure brand settings are properly configured

Performance Issues:

• Monitor cart loading times after configuration changes
• Test cart behavior on mobile devices
• Verify cart drawer positioning doesn't interfere with site navigation

Brand Consistency:

• Regularly review cart colors against updated brand guidelines
• Test cart appearance across all customer touchpoints
• Maintain consistent styling with overall site design