Setting Up Your Two-Step Cart

Enabling Two-Step Cart

1. Open the Cart Designer and choose Two-Step Cart → Designer in the left-hand navigation
2. In the Status section, switch on Enable
3. Choose your preferred Display Type:
   • Drawer: Appears as a slide-in panel in the same style as your normal cart
   • Popup: Opens in the center of the screen for maximum visibility

Customizing the Confirmation Banner

The confirmation banner appears at the top of the Two-Step Cart to inform customers their item was added successfully.

1. Message Text: Customize the "Added to Cart" message shown in the banner
2. Banner Colors: Set your preferred background and text colors to match your store's branding
3. Checkmark Icon: Toggle the checkmark icon on/off for visual confirmation

Managing Cart Elements

You can fully customize the elements shown in your Two-Step Cart:

1. Element Order: Drag to reorder elements (Continue Shopping, View Cart, and Upsells)
2. Element Visibility: Show or hide specific elements based on your strategy
3. Button Styles: Choose from primary, secondary, or plain styles for your buttons
4. Button Text: Customize the text for "Continue Shopping" and "View Cart" buttons

Upsell Configuration

The Two-Step Cart provides a powerful opportunity to display targeted upsells:

1. Visual Separation: Add optional divider lines above and/or below your upsells section
2. Advanced Customization: Further customize your upsell display in the main Cart Designer

Advanced Customization with CSS

For developers or advanced users, custom CSS lets you further tailor your Two-Step Cart:

1. Access the "Advanced: Custom CSS" section
2. Use .ec- classes to target specific elements in the cart
3. Utilize .tw- Tailwind CSS classes for quick styling adjustments

Editing Texts & Translations

Two-Step Cart fully supports your store's language settings, allowing you to customize text elements for all locales your store supports. You can change wording and translations in the Language & Translations settings.