Cart Drawer

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

PreviousAnnouncement BarNextClock Settings

Last updated