Skip to main content
Slide Cart Drawer Upsell [OCU]

Show additional offers directly on your OCU Slide Cart Drawer and maximize your AOV!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over 2 months ago

Overview

Introducing the Cart Drawer Upsell โ€” an easy and unobtrusive way to boost order value right in the OCU slide cart drawer. With this offer type, shoppers can instantly add additional product(s) to their cart while viewing the slide cart, creating a seamless upsell opportunity that enhances their experience without disrupting the purchasing process.

Implement this upsell offer today to enhance customer satisfaction and boost your Average Order Value (AOV) effortlessly. Start increasing sales directly from your OCU Slide Cart Drawer and maximize the potential of every transaction!

๐Ÿ“ This upsell offer is available exclusively on the OCU Slide Cart Drawer. To create and utilize this offer type, the OCU Slide Cart Drawer must be published on your storefront.

Creating a Slide Cart Drawer Offer

To create a new slide cart drawer offer, follow the quick and easy steps below:

  1. Ensure that the OCU Slide Cart Drawer is published within your OCU app.

  2. Navigate to the "Funnels" section and open an upsell funnel by clicking on it:
    โ€‹

  3. Click the "+ Add Upsell Offer" button under the "Cart Drawer Upsell" section within the funnel:
    โ€‹

  4. In the popup, select either "Create new offer" (default) or "Copy an existing offer" (to copy a slide cart drawer offer from another funnel). Click the "Continue" button:
    โ€‹

  5. If "Create new offer" is chosen, then select the offer product(s) you want included in the "Add products" popup by checking the box next to each one. Up to 8 products can be selected. Click the "Add" button:
    โ€‹


    ๐Ÿ“Currently only standard one-time products are supported. If a "subscription only" or "one-time & subscription" product is chosen, it won't be displayed on the live offer widget.

  6. Your new Cart Drawer Upsell offer will be created and added to the funnel:
    โ€‹

Managing Products in the Offer

Once the offer is created, the product(s) within the offer can be managed using the options available in the funnel editor:

  1. Click the dropdown arrow to expand the offer card and view all products included.

  2. Use the drag n drop action to rearrange offer products into a different order.
    ๐Ÿ“The funnel must be in an unpublished state to change the product order.

  3. Add more product(s) to the offer (if applicable)

  4. Edit the offer by clicking the โœ๏ธ button, Download offer stats and/or Delete the offer using the ellipsis (...) button.

  5. Click the ellipsis (...) button for a specific product to either Change Product or Remove Product.

Editing the Offer in the Builder

The next step is to use the Cart Drawer Upsell builder to customize the offer. In the builder, you can adjust offer styles, modify the layout, update the copy, select variants, set discounts, and more!

To access the builder, either click directly on a product (1) in the offer card or on the โœ๏ธ button (2):

General

In the "General" section of the builder, you can:

  1. Choose the Font Family and Font Color

  2. Set the Background Color and Product Background Color

  3. Toggle on/off the Upsell Title

  4. Choose a Product Alignment setting between Vertical and Horizontal
    ๐Ÿ“If Vertical is used, choose the Type of alignment between:

    1. Carousel - shows the offer products in a vertical carousel with scroll arrows

    2. Stack - shows the offer products stacked on-top of each other

Buy Boxes

In the "Buy Boxes" section of the builder, you can edit each offer product by clicking on it:

For each offer product, the following settings and options are available:

  1. Toggle on/off the Image Border setting

  2. Choose which Variant(s) to use for the offer
    ๐Ÿ“If only one variant is selected or the product has no variants, a "Hide Variant Selector" toggle will also be available:

  3. Set a Discount for the offer product

    1. None - No discount will be set or displayed for the offer product.

    2. *Percentage - Set a % based discount that applies to this offer only.

    3. *Fixed amount - Set a $ based discount that applies to this offer only.

    4. Compare at price - Show the product's "Compare at price" as the discount.
      โ€‹๐Ÿ“ If this option is used, it will pull in and display your product's compare at price set in Shopify admin.

  4. Toggle on/off the Savings Label and set the Discount Title (if a Percentage or Fixed amount option is used).
    ๐Ÿ“The discount title set will be used for the discount applied at Checkout and on the Order.

  5. Toggle on/off the "Hide offer if the cart already contains the upsell product" setting. If toggled on, the offer will not be shown if the customer has already added the same product to the cart.

*In order to use the OCU automatic discount successfully, it must be manually activated in your Shopify admin:

Attachment

Click the "Discounts" link in the notification to be taken to your Shopify admin Discounts section. Check the box next to "OCU Product Discount" and then click the "Activate discounts" button. Confirm the action in the popup by clicking the "Activate" button to activate it.

Text Editor

The offer builder features an integrated text editor, allowing you to easily modify both text and styling for the elements included in the offer. Just hover over and click on a text element to display the text editor and to edit text content (if applicable).

๐Ÿ“For some text elements you will be able to edit both the text and style, but some other (dynamic) elements only the style can be edited. The options available for each text element can differ as well, but generally the following options will be included:

  • Font Name

  • Font Size

  • Bold / Italic / Underline

  • Font Color

  • Clear formatting

Saving & Previewing the Offer

  1. Once you've edited the offer and offer products to your liking, click the Save button in the top-right corner of the builder to save your changes.

  2. You can also Preview the offer in the builder directly, on either Desktop or Mobile modes by clicking the corresponding options located top-center of the builder.

  3. Click the "Go to Cart Builder" button to go to the OCU Slide Cart Drawer builder.

Enabling the Offer on the OCU Slide Cart Drawer

To have the offer shown on your OCU Slide Cart Drawer, you must enable it in the cart editor by clicking the crossed out ๐Ÿ‘ button for the "Upsell Offer" section to make it visible:

Next, choose the Placement setting for the offer widget:

  • Below cart items

  • Top of footer

Finally, click the Save button in the top-right corner of the slide cart editor and your cart drawer upsell offer will be live on your storefront:

Did this answer your question?