Cart Drawer

The Cart Drawer is a slide-out panel that appears when a customer adds a product to their cart.

For Plain Jane, and Plain Jane Interactive

What You'll Learn

  • How to enable and style the slide-out cart drawer
  • Advanced customization options including backgrounds and FOMO timers
  • How to optimize the cart experience for better conversions

📋 Overview

The Cart Drawer is a slide-out panel that appears when a customer adds a product to their cart. It provides an improved shopping flow by letting users review their cart without leaving the current page, increasing conversion rates and enhancing user experience.

💡 Note: This replaces the traditional cart page. You can use either the cart drawer or cart page, but not both simultaneously.

🔧 How to Enable

  1. Go to Theme Settings > Cart Drawer
  2. Toggle Enable Cart Drawer to on
  3. Configure the customization options below

🎨 Basic Styling Options

Colors & Appearance

Background Color

  • Customize the main drawer panel background
  • Default: #ffffff (white)
  • Supports any hex color value

Text Color

  • Controls general text color inside the drawer
  • Default: #000000 (black)
  • Affects product names, quantities, and general content

Button Styling

  • Button Color: Primary action button background (Add to Cart, Checkout)
  • Button Text Color: Text color on buttons
  • Default: Black background with white text

Drawer Dimensions

Drawer Width

  • Adjustable width from 300px to 320px
  • Default: 320px
  • Optimized for mobile and desktop viewing

⏰ FOMO Timer Feature

Create urgency and drive faster purchasing decisions with the built-in FOMO (Fear of Missing Out) timer.

Timer Configuration

Show FOMO Timer

  • Toggle to enable/disable the urgency timer
  • Default: Enabled

Timer Styling

  • FOMO Timer Background Color: Alert banner background (default: #ffeb3b - yellow)
  • FOMO Timer Text Color: Timer text color (default: #333333 - dark gray)

Timer Content

  • FOMO Timer Text: Customizable urgency message
  • Default: "Offer expires in:"
  • Examples: "Limited time offer!", "Cart expires soon!", "Hurry! Only a few left!"

Timer Duration

  • FOMO Timer Duration: Set countdown time (1-72 hours)
  • Default: 24 hours
  • Timer resets with each new cart session

💰 Price & Currency Options

Currency Display

Show Price with Currency

  • Toggle to display currency symbols/codes with prices
  • Default: Disabled (shows prices without currency indicators)
  • Useful for international stores or multi-currency setups

🖼️ Advanced Background Customization

Cart Items Background

Transform your cart drawer with custom background imagery:

Background Image

  • Upload custom background image for cart items area
  • Supports standard image formats (JPG, PNG, WebP)
  • Recommended size: 500x600px or larger

Background Size Options

  • Cover: Scales image to cover entire area (may crop)
  • Contain: Scales image to fit within area (shows entire image)
  • Auto: Uses image's natural size

Background Position

  • Center: Centers image in available space
  • Top Left: Positions image at top-left corner
  • Top Right: Positions image at top-right corner
  • Bottom Left: Positions image at bottom-left corner
  • Bottom Right: Positions image at bottom-right corner

🚀 Best Practices

Design Recommendations

Color Harmony

  • Use colors that complement your overall theme
  • Ensure sufficient contrast for accessibility
  • Test readability across different devices

FOMO Timer Usage

  • Use sparingly to maintain effectiveness
  • Choose urgent but not aggressive messaging
  • Test different duration settings for your audience

Background Images

  • Use subtle, low-contrast images that don't interfere with text
  • Optimize image file sizes for faster loading
  • Consider mobile viewing experience

Conversion Optimization

Clear Call-to-Actions

  • Make checkout buttons prominent and accessible
  • Use contrasting colors for important buttons
  • Keep the path to purchase simple and obvious

Mobile Experience

  • Test drawer functionality on actual mobile devices
  • Ensure touch targets are appropriately sized
  • Verify text remains readable on smaller screens

Loading Performance

  • Optimize background images for web
  • Test drawer opening speed on slower connections
  • Monitor impact on overall page performance

🔧 Troubleshooting

Common Issues

Drawer Not Appearing

  • Verify "Enable Cart Drawer" is toggled on
  • Check if cart page is conflicting
  • Test adding products to trigger drawer

FOMO Timer Not Working

  • Ensure timer is enabled in settings
  • Check browser localStorage support
  • Verify timer duration is set correctly

Background Image Problems

  • Confirm image is uploaded correctly
  • Check image file size and format
  • Test different background size settings

Mobile Display Issues

  • Test on actual mobile devices
  • Check drawer width on smaller screens
  • Verify touch functionality works properly

📱 Mobile Considerations

  • Drawer automatically adapts to mobile screen sizes
  • Touch-friendly controls and buttons
  • Optimized spacing for finger navigation
  • Simplified layout for smaller screens

⚡ Performance Tips

  • Keep background images under 200KB when possible
  • Use WebP format for better compression
  • Test loading times with various network speeds
  • Monitor impact on overall site performance