The Recharge Cart and Cart drawer overlay gives you powerful upsell capabilities within the cart. These fully customizable features let you seamlessly convert one-time purchases to subscriptions with full upsell analytics and expandable options for future cross-sells and other features.

This guide highlights the Cart and Cart drawer overlay key features and provides set-up instructions.

Before you start

• Cart and Cart drawer overlay is in Early Adopter status. See Early Adopter Program for more information on this program.

• Fill out the Early access request form to apply to join the Early Adopter Program for the Recharge Cart and Cart Overlay.

How it works

Cart

The Recharge Cart delivers a fully managed shopping experience with built-in upsell capabilities. When a customer adds a product to their cart, the cart drawer automatically opens to display the current contents. If the added product is a one-time purchase with subscription selling plans, a subscription upsell option appears within the drawer. If the customer converts to a subscription, the cart updates in real-time to reflect the change. Products already added as subscriptions do not display an upsell option.

Cart drawer overlay

The Cart drawer overlay presents a subscription upsell modal when a customer adds a one-time purchase product with eligible subscription plans. This modal is a pre-cart drawer that appears as a separate overlay before the actual cart. It prompts the customer to switch their one-time purchase to a subscription. If the customer accepts, the cart updates in real-time with the selected subscription details. Products already added as subscriptions do not trigger the overlay.

To prevent repeated prompts, Recharge stores a cookie per product when the modal appears. This cookie lasts for 24 hours, during which the overlay does not reappear for the same product. The flow encourages subscription adoption while minimizing shopping friction.

Key features

Cart 

Design a custom Cart drawer that improves your conversion rates:

• Modern cart experience: Create a seamless, mobile-first experience with a responsive slide-out design.
• Customize the cart to fit your branding:  Adjust colors and styles to make the cart fit right into your storefront seamlessly.
• Instant subscription conversions: Let customers switch one-time purchases to subscriptions without leaving the cart.

Cart drawer overlay

Drive more subscribers the moment customers add to their cart:

• Trigger upsells right before the cart: Encourage subscription upgrades when customers add a product to their cart
• Create a branded experience: Highlight subscription program benefits with branded banners, tailored messaging, and strategic colors.
• Track your performance: Monitor key metrics and optimize offers to drive more conversions.

Use cases

Review the following use cases to understand how you can use the Cart and Cart drawer overlay feature to improve key metrics and optimize offers to drive more conversions:

Set-up instructions

Activate storefront experience for Cart and Cart drawer overlay

You must enable the storefront experience app embed before designing a custom Cart experience or customizing your Cart drawer overlay.

1. Click Cross-Sell & Upsell in the Recharge merchant portal and select Cart drawer overlay or Cart, depending on the type of flow you want to create.
2. Select the Activate storefront experience button.
   
3. Clicking the Activate storefront experience button automatically toggles Storefront Experiences on in your live theme. This allows the theme to support an active Cart or Car overlay strategy.
   
4. Click the Save button present on the top right corner of the Shopify theme editor page.

Set up and customize your Cart experience

Step 1 - Create the flow

1. Click Cart in the Cross-Sell & Upsell section to create your cart strategies.
2. Click Create a cart drawer if this is your first time, or click Create new if you already have other strategies.
3. Click Manage settings to rename the experience and add a description.
   

Step 2 - Configure the nodes

Recharge offers a prebuilt experience for your cart flow. Review each node in the experience to understand how it works, and make adjustments where possible.

Step 1 - Review the Trigger node

The flow starts with a Trigger node, which activates when a customer meets specific conditions. Recharge sets the Cart drawer trigger condition as Cart is displayed. You cannot edit this condition.

Step 2 - Review the Cart drawer node

Use the Cart drawer node to customize cart details and offers.

1. Click the Cart drawer node.
2. By default, Recharge selects Upsell line items to subscriptions, allowing customers to upgrade one-time products to subscription products.
   
3. Click the Customize cart drawer button to access the cart builder, where you can customize your cart’s header, body, and footer. You can set different content depending on whether the customer’s cart is empty or contains products.
   
   

   Review the following different customization options for carts with items and empty carts.

   Section	Cart with items	Empty cart
   Header	The header section appears at the top of the cart drawer. You can customize: Header text Item count using {{items_count}} variable	The header section appears at the top of the cart drawer. You can customize: Header text Item count using {{items_count}} variable
   Body	Customize these key elements in the body section: Subscription discounts Percent saving text using Saving {{discount}} variable (e.g., Save 20%) Upsell link text (appears below eligible items to enable one-time to subscription switching) Upsell in progress text Frequency selection text One-time option text Upsell display options	Customize these key elements in the body section: Text area: Use this to edit text in the body section Button text: Choose a text you want (for example: Continue shopping) Button action: You can choose between Close the cart and Redirect to a custom URL option.
   Footer	Use this section to personalize: Subtotal text (plural) using ({{items_count}} items) variable Subtotal text (singular) using ({{items_count}} item) variable Subscription saving prices Button text and styling	Use this section to add: Subscription banner, text, or promotional image
   Edit style	Use this section to personalize: Background color Font family Text color Button styles Padding and margins	Use this section to personalize: Background color Font family Text color Button styles Padding and margins

   Note: Click the preview in your store link present in the information banner to see how your cart looks with your plans and prices.
4. Click Apply to save your conditions.

Step 3 - Save and activate the flow

Once you have finalized configuring the Cart strategy, save and activate the flow:

1. Click Save in the top right corner to save the experience.
2. Click Activate when you are ready to go live with the experience.

Set up and customize your Cart drawer overlay experience

Step 1 - Create the flow

 Create your Cart drawer overlay strategies:

1. Click the Cart drawer overlay in the Cross-Sell & Upsell section.
2. Click Create add to cart overlay if this is your first time, or click Create new if you already have other strategies.
3. Click Manage settings to rename the experience and add a description.
   

Step 2 - Configure the nodes 

Recharge offers a prebuilt experience for your cart flow. Review each node in the experience to understand how it works, and make adjustments where possible.

Step 1 - Review the Trigger node

The flow starts with a Trigger node, which activates when a customer meets specific conditions. Recharge automatically sets these trigger conditions for the Cart drawer overlay experience. You cannot edit these conditions.

Step 2 - Review the Cart overlay node

Use the Cart overlay node to control what customers see in their cart overlay.

1. Click the Cart overlay node.
2. Recharge sets Upsell one-time to subscriptions as the default and only available offer type for this experience.
   
3. You have two options for handling delivery frequencies in subscriptions. The first option No, the subscription will be added with its default frequency automatically uses the default frequency set on your product details page. The second option Yes, customer can choose their frequency allows customers to choose their preferred frequency.
4. Click the Customize cart overlay button to access the cart builder and customize the cart look. You can use the different options present in the Customize cart overlay to:
   • Personalize the banner text, fonts, banner background color, and text colors to match your brand.
   • Show discounts, free shipping, savings, or other exclusives for subscribers.
   • Customize your button layouts including text, color, and style, to match your brand.
   • Add images and icons to highlight subscription perks.

5. Click Apply to save your conditions.

Step 3 - Save and activate the flow

Once you have finalized the configuration of the Cart overlay strategy, save and activate the flow:

1. Click Save in the top right corner to save the experience.
2. Click Activate when you are ready to go live with the experience.

Considerations

Consider the following when using Cart and Cart drawer overlay: