Setting Up Your Two-Step Cart

Enabling Two-Step Cart

1. Navigate to the Two-Step Cart Designer in your dashboard

2. Check the "Enable Two-Step Cart" checkbox

3. Choose your preferred Display Type:

   • Drawer: Appears as a slide-in panel in the same style as your normal cart

   • Modal: 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.