# Cart Drawer > **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 *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/readme-1/theme-settings/cart-drawer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.