Skip to main content

Slide Cart Drawer [OCU]

Enhance the shopping journey and boost sales with the OCU Slide Cart Drawer!

Written by Jeff Maxfield

Overview

Enhance your customers' shopping experience and drive more sales with the new OCU Slide Cart Drawer! 🛒➔🛍️

Designed to increase engagement, reduce abandoned carts and boost sales, making shopping smoother and more enjoyable than ever.

Key Benefits:

  • Increased Engagement: The Slide Cart Drawer offers a more interactive and visually appealing way for customers to view their cart, encouraging them to explore more products and stay longer on your site.

  • Reduced Abandoned Carts: With its smooth and intuitive design, the Slide Cart Drawer helps reduce cart abandonment by making it easier for customers to review and adjust their orders before checking out.

  • Boosted Sales: By simplifying the shopping process and providing a streamlined path to purchase, this feature can lead to higher conversion rates and increased sales.

  • Increased AOV: With tools like the Reward Bar, Upsell Offer, and Subscription upgrade options, your Average Order Value (AOV) is set to skyrocket, driving more revenue per customer and increasing overall sales performance.

You can now build and manage multiple Cart Drawers from one place, so you can design, test, and schedule different cart experiences without losing your current setup. Only one Cart Drawer is Live on your storefront at a time, and all others are saved as Drafts.

Creating Your First Cart Drawer

To create your first OCU Slide Cart Drawer, follow the quick and easy steps below:

  1. Click into the "Slide Cart Drawer" section in the sidebar

  2. Click on the "Create Cart Drawer" button and your new Slide Cart Drawer will be created​

Next, proceed with the steps below to:

  • Enable the "OCU Slide Cart Drawer" app embed in your Theme Editor

  • Edit your new Slide Cart Drawer

  • Publish your Slide Cart Drawer

👉Before You Publish the Cart Drawer

Please enable the "OCU Slide Cart Drawer" app embed in your Theme Editor.

Click the "Go to Theme Editor" button in the informative popup or follow the steps below:

  1. Go to Online Store > Themes > Customize > App Embeds in your Shopify admin

  2. Toggle on the "OCU Slide Cart Drawer" app embed

  3. Click the "Save" button

⚠ Since the Free Shipping Bar on Multi-product Pre-purchase offers currently work on Draft Orders, it may conflict with our Cart Drawer. Therefore, you must disable any free shipping bars used on Multi-product Pre-purchase offers in all funnels, in order to publish the OCU Slide Cart Drawer.

Managing Your Cart Drawers (Live & Drafts)

Once you've created your first Cart Drawer, you can build and manage multiple Cart Drawers (up to 15 in total), so you can plan ahead and switch between cart experiences whenever you want. Your Cart Drawers live on the Slide Cart Drawer list page, split into two sections:

  • Live - the Cart Drawer currently shown to shoppers. Only one Cart Drawer can be Live at a time.

  • Drafts - every other saved Cart Drawer. You can have up to 15 Cart Drawers total (Live + Drafts combined).

Adding another Cart Drawer

To create another cart drawer, follow the quick and easy steps below:

  1. Click into the Slide Cart Drawer section in the OCU sidebar.

  2. Click the "Add New Cart" button.

  3. Your new Cart Drawer is created in Draft status and appears at the top of the Drafts section.

📝 You can have up to 15 Cart Drawers total. Once you reach 15, the Add New Cart button is disabled. Delete a Draft Cart Drawer to free up a slot.

Publishing a Cart Drawer (making it Live)

When you're ready to show a Cart Drawer to shoppers, you publish it by setting it to Live:

  1. Find the Cart Drawer in the Drafts section.

  2. Toggle its Status to Live.

What happens next depends on whether another Cart Drawer is already Live:

  • If no Cart Drawer is currently Live, your Cart Drawer goes Live right away.

  • If another Cart Drawer is already Live, a confirmation popup appears asking you to confirm the switch. A loading state shows while OCU makes the change, and a confirmation shows once it's done.

📝 When a Draft Cart Drawer is made Live, the Cart Drawer that was previously Live automatically moves to the top of the Drafts section. It isn't deleted, so you can switch back at any time.

Cart Drawer actions (⋯ menu)

Each Cart Drawer row has an actions menu (). The available actions depend on whether the Cart Drawer is Live or a Draft:

Action

Available for

Rename Cart

Live & Draft

Duplicate Cart

Live & Draft

Schedule Cart

Draft only

Delete Cart

Draft only

To edit a Cart Drawer, click its name or the ✏️ Edit button to open the Cart Drawer Builder.

Scheduling a Cart Drawer

The Cart Schedule feature lets you set a Draft Cart Drawer to go Live automatically at a specific date and time. It's ideal for planning Black Friday launches, seasonal promotions, or any time-sensitive campaign in advance, without needing to be online at the moment it goes live.

⚠️ Only Draft Cart Drawers can be scheduled. A Live Cart Drawer cannot be scheduled.

How to schedule a Cart Drawer

  1. On the Slide Cart Drawer list page, find the Draft Cart Drawer you want to schedule.

  2. Click the actions menu on that row.

  3. Select Schedule.

  4. In the Schedule modal, set your desired date and time.

  5. Click the Schedule button to confirm.

📝 The modal shows your store's time zone (for example, "Time zone: (GMT-05:00) US & Canada"), and the date and time fields default to the current date and time. Scheduling always uses your store's time zone.

Once scheduled, the Cart Drawer row shows a calendar icon and the scheduled date below the Cart Drawer name (for example, "Scheduled for: Apr 28, 7:33 AM").

📝 Scheduled Cart Drawers sort to the top of the Drafts section, ordered by their go-live date (soonest first). Unscheduled Drafts appear below them.

Rescheduling or Unscheduling

If a Cart Drawer already has a schedule, the menu shows Reschedule instead of Schedule:

  1. Click Reschedule to open the modal, pre-filled with the existing date and time.

  2. Update the date and time as needed.

  3. Click Reschedule to save the new schedule.

To remove a schedule entirely, click Unschedule in the modal. This returns the Cart Drawer to standard Draft status.

How Scheduled Activation Works

When the scheduled date and time arrive (in your store's time zone):

  • The scheduled Cart Drawer automatically becomes the Live Cart Drawer.

  • The previously Live Cart Drawer automatically moves to Drafts.

  • The change takes effect on new page loads and refreshes from that moment forward. No manual action is needed.

  • Shoppers who already have your store open in a tab keep seeing the previous Cart Drawer until they refresh or navigate to a new page. Their cart contents are not affected by the switch.

  • Once live, the scheduled Cart Drawer stays live until you manually switch Cart Drawers or another scheduled activation occurs.

Editing a Slide Cart Drawer

To begin editing a Slide Cart Drawer, click directly on the Cart Name or on the ✏️ button below the Actions column:

In the interactive editor preview you can:

  1. Access the Settings Tabs in the sidebar

  2. Select and edit different Cart States via the dropdown (Cart with items / Empty cart)

  3. Edit text by hovering over it and clicking on it to select the text.
    📝You can edit both the text and style of certain fields (static), while only the style can be adjusted for others (dynamic).
    The text fields listed below are static, allowing you to modify both their content and style:

    1. "Your Cart" text

    2. "Reward Bar" text

    3. Savings Label > "Savings" text

    4. "Additional Notes" title

    5. Discount code "Apply" button text

    6. Shipping > "Shipping information" text (*If the Free Shipping option is used in the Reward Bar enabled). If the Free Shipping feature is not being used, then this text is inherited from and can be changed at Themes > Edit default theme content > Checkout order summary > Shipping default value within your Shopify admin.

    7. "Checkout" button text

    8. "Continue Shopping" link text

    9. The following text fields are dynamic and can be edited in the default theme content in Shopify admin at Themes > Edit default theme content :

      • Discount code placeholder.
        Checkout & system > Checkout order summary > Discount placeholder

      • Discount title.
        Checkout & system > Checkout order summary > Discount title

      • Shipping.
        Checkout & system > Checkout order summary > Shipping label

      • Shipping Information.
        If the Free Shipping feature in Reward Bar is not being used, then this text is inherited from Checkout & system > Checkout order summary > Shipping default value

      • Estimated total.
        Checkout & system > Cart > Estimated total
        📝Once a change is made in default theme content, re-enable the OCU app (Settings > General > Application Status switcher) to see the change reflected live ASAP

  4. Preview the slide cart on Desktop and Mobile

  5. Save and Publish the slide cart

📝 To show and use any of the features or sections in the sidebar—such as the Reward Bar, Subscriptions, Upsell Offer, Additional Notes, Cart Banner, Discount Codes, Shipping Protection, Trust Badges and Payment Gateways —click the 👁️ button next to their titles to make them visible:

The sidebar contains additional Settings Tabs for further customization gone over below.

General

In the General tab you can toggle on/off the following options and settings:

  1. Open Cart Drawer on "Add to cart" - Automatically opens the slide cart drawer when an item is added to the cart on a product page.
    📝On Zipify Pages, the "Add to Cart > Stay on the Same Page" click action must be used for the Product Button:

  2. Sticky Footer - Keeps the footer fixed at the bottom of the screen, ensuring consistent navigation and access to important links as customers scroll.
    📝We recommend disabling this option when using Slide Cart Upsells, as keeping it enabled can make the cart appear compressed on mobile devices.

  3. Collapsed Footer - Collapses the slide cart footer into an expandable dropdown to save space. Available when "Sticky Footer" is enabled.

  4. "Continue Shopping" button - Displays a button in the footer to allow users to easily return to browsing products after reviewing their cart contents. Links to the /collections/all Collection page on your storefront by default.

    Click the "Destination Link" dropdown to set a different destination if desired:

    1. Collection Page - Directs to the default /collections/all Collection page

    2. Home Page - Directs to the Home page

    3. Stay on the Same Page - The cart closes without redirecting, allowing the customer to remain on the current page

    4. Custom Link - Directs to any URL of your choice
      📝The Shopify cart page (/cart) is not supported as a custom link destination. If entered, the drawer will close without redirecting.

  5. Compare at price - Show the product's "Compare at price" in the cart drawer, as configured in the Product settings within the Shopify admin.

  6. Savings Label - Highlights discounts or savings applied to items in the cart, providing clarity on reduced prices.

  7. Hide shipping line - Hides the shipping line from the slide cart footer.

  8. Item Counter - Displays the total number of items added to the cart directly in the header of the cart drawer.

Styles

In the Styles tab you can choose a cart template and adjust all general text, element, button and selectors styles using the options available:

📝Cart Drawer buttons automatically inherit your theme’s button colors — primary buttons (including the upsell) use the theme’s primary button color, and secondary buttons (e.g., “Continue Shopping”) use the theme’s secondary button color. If theme button styles aren’t available, OCU’s default button styles will be used instead.

Template

  • Classic — the original single-column cart layout.

  • Wide — a broader layout with dedicated blocks for upsell offers and free product choice.

📝Switching between templates does not reset your existing settings. All toggles, colors, fonts, and block configurations carry over. All features behave identically in both templates.

Font Family

The general font type from the dropdown, to be used for all text on the cart.
📝Font type can be changed for individual text elements as needed using the text editor.

Inherit Store Font

Toggle on to apply your store’s font to all text elements with a single click, ensuring a cohesive look that matches your branding. The font used depends on the page it's displayed on, as it inherits styling from the parent elements within the <body> of that page. The font change won’t be visible in the editor, but will be applied automatically on the live slide cart.

Font Color

The general font color from the color picker, to be used for all text on the cart.
📝Font color can be changed for individual text elements as needed using the text editor.

Background Color

The background color of the entire slide cart.

Button Color

The color of the "Checkout" button.

Button Hover State

The hover state color of the "Checkout" button.

Selectors Color

The background color of the Discount / Order Discount tags, Quantity box, Dividers, Image Border and Additional Notes box.
📝Discount / Order Discounts only reflect Shopify Discount codes applied. Compare at price is not reflected.

Elements Color

The color of the slide cart Close button, Delete button, Quantity +/- buttons, Discount Tag icons and Additional Notes dropdown button.

Image Border

Adds a 1px solid border to product Image(s).

Corner Radius

Adjust the corner radius of Product images, Image border, Quantity selector, Discount tags, "Checkout" button and Accelerated Checkout button(s).

Reward Bar

The Reward Bar encourages customers to add more to their cart by showing their progress toward rewards like free shipping, an order discount, or even a free product. As their cart value or item count climbs, they're motivated to reach the next tier, helping increase your average order value.

Setup includes its own Targeting, Reward Trigger, and up to three reward tiers, so we've moved the full walkthrough into a dedicated article: Slide Cart Drawer: Reward Bar [OCU].

Subscriptions

Activate the "Subscriptions" feature to showcase subscription options from subscription apps directly in the OCU Slide Cart Drawer. This allows customers to easily switch from a one-time product to a subscription plan, boosting recurring revenue.

📝 OCU integrates with Shopify's Subscription API, meaning it will support all modern subscription apps. The product must have subscription option(s) configured for it in your subscription app.

You can set the following button styles in the sidebar:

  • Button Color

  • Button Border Color

  • Button Hover State

Clicking on the subscription button text in the editor will open a popup where you can edit the:

  1. Button Text - The text shown initially on the subscription button.

  2. Subscription Plan Options Text - The text for the selling plans included for your subscription product. Default uses the {{ selling_plan_name }} variable to dynamically display the options from your subscription app.

📝 The "Selling Plan Name" is created by your subscription app. For any edits or translation settings for it refer to your subscription app to change the name.

Once the subscription button is clicked, the one-time product is converted to a subscription product and the customer can select their shipping interval via the dropdown:

Upsell Offer

Enable an upsell offer directly to your OCU slide cart drawer. If you have not yet created a Cart Drawer Upsell in an upsell funnel yet, click the "Create an Upsell" button:

Choose the Placement setting for the offer widget:

  • Below cart items

  • Top of footer

Additional Notes

Add an Additional Notes field to the Cart and choose the placement:

  • Top of footer

  • Below cart items

📝 Customer notes submitted on completed orders are passed to the "Notes" field of the Order in the Shopify admin.

Cart Banner

Add a Cart Banner to enhance your Cart Drawer with custom announcements, timers and icons. You can configure the cart banner using the following settings:

  1. Placement - Choose between the following options:

    1. Below cart header

    2. Above upsell offer

    3. Top of Footer

  2. Full Width Layout -

    1. Enable to expand the cart banner to span the entire width of the drawer.

    2. Disable to keep it within a fixed container.

  3. Background Color / Border Color - Set the background color and border color of the cart banner using the color picker or hex code.

  4. Timer - Enabling the Timer option displays a countdown on the cart banner, creating a sense of urgency. Select from preset Time Limit options of 3, 5, 10, 25, or 60 minutes.

  5. Icon - Enable the Icon option to upload a custom icon and choose its Placement on the left or right.

Discount Codes

Add a Discount Codes field to the Cart where customers can enter in and apply Shopify discount codes:

The button text and text style can be adjusted using the editor:

Shipping Protection

Adding a shipping protection widget to your cart drawer helps build customer trust by offering an extra layer of security for their orders. It reassures shoppers that their purchases are protected against potential issues like loss or damage during transit.

This added confidence can reduce cart abandonment, improve the overall shopping experience, and increase conversion rates. Additionally, it offers merchants an opportunity to enhance customer satisfaction while potentially generating additional incremental revenue.

*The Navidium Shipping Protection app is currently supported, support for additional shipping protection apps will be added in future updates. Click the "Request Integration" button to request an integration for your shipping protection app.

Using the "Placement" setting you can show the shipping protection widget:

  • Above checkout buttons

  • Below checkout buttons

📝A placeholder widget will be displayed in the slide cart editor. Ensure the "Navidium Smart" app embed is enabled in the Theme Editor. Check the live Slide Cart Drawer on your Online Store directly to see the exact design and functionality.

Trust Badges

Adding trust badges to your cart drawer can significantly enhance customer confidence and improve conversion rates. These badges convey key assurances, such as secure checkout, accepted payment methods, fast shipping, or satisfaction guarantees, which help reduce buyer hesitation and cart abandonment.

Using the "Placement" setting you can show the trust badges:

  • Above checkout buttons

  • Below checkout buttons

A default image is provided. To use a custom image instead, click the 🗑️ button (1) next to the image, then on the "Choose Image" button (2) to upload an image from your computer:

📝 Recommended size: 360px x 32px

Payment Gateways

Add Dynamic Checkout Buttons below the main "Checkout" button:

📝Shop Pay, PayPal, G-Pay and Apple Pay buttons show as placeholders in the builder. Only the payment method(s) that you've activated in your payment settings of the Shopify admin display as options to your customers. To check your current accelerated checkout buttons, navigate to your store and initiate the slide cart drawer.

For more information on enabling additional gateways and customer eligibility criteria, visit Shopify's documentation.

Statistics

The OCU Slide Cart Drawer provides key performance statistics, allowing you to quickly assess its effectiveness. These statistics include metrics such as the number of impressions, checkout button clicks, orders completed, conversion rate and more. This comprehensive overview enables you to make data-driven decisions to enhance the performance of your online store:

Impressions

The number of times the OCU Slide Cart Drawer is viewed by customers.

"Checkout" Clicks

The count of times customers click on the checkout button from the OCU Slide Cart Drawer.

Orders

The total number of completed purchases initiated from the OCU Slide Cart Drawer.

Conversion

The percentage of impressions that result in completed orders.

Revenue

The total sales amount generated from orders placed through the OCU Slide Cart Drawer.

Abandonment Rate

The percentage of customers who add items to their cart but do not complete the purchase.

Integrations

The following apps are integrated with the OCU Slide Cart Drawer. You do not need to take any action within the OCU app to enable or customize. The only requirement is to use our Cart Drawer along with one of the supported apps.

  • Zapiet ‑ Pickup + Delivery
    Increase average order values by offering convenience through local delivery & in-store pickup with your brick-and-mortar store.

  • Kaching Bundle Quantity Breaks
    Create bundles which not only boost your AOV but also increase your conversion rate.

  • Navidium Shipping Protection
    Navidium is a self-service platform designed to give you the tools to create a self-funded shipping protection plan and manage incoming claims from your customers.
    📝The "Shipping Protection" section must be toggled on in your OCU Slide Cart Editor.

We strongly recommend reviewing how the elements appear on your live store to ensure everything is displayed correctly. If you notice any issues or elements not functioning as expected, please contact our support team for assistance.

Important Notes

  1. If the OCU Slide Cart Drawer fails to display, the Shopify Cart from your Theme will automatically be shown instead.

  2. The slide cart cannot be restricted based on geolocation; it will be visible to all visitors on your storefront.

  3. If the Skip Cart setting is enabled in OCU, the OCU Slide Cart Drawer will not appear accordingly.

  4. To view the OCU Slide Cart Drawer on a non-published Theme, go to the theme editor and enable the "OCU Slide Cart Drawer" app embed on the unpublished theme.

  5. The OCU Slide Cart Drawer is integrated with pages built in the Zipify Pages app and can be displayed there.

    1. The OneClickUpsell app integration must be enabled in your OCU app at Settings.

    2. The "Add to Cart > Stay on the Same Page" click action must be used for the Product Button on the page:

  6. The OCU Slide Cart Drawer's "Checkout" button initiates the OCU Pre-purchase popup if the cart contains a trigger product and the "Cart Page" location is used for the popup within the funnel.

  7. To open the OCU Slide Cart Drawer in response to a button click (or similar interaction), use the following JavaScript snippet:
    dispatchEvent(new CustomEvent('ocu:cart:open'));
    📝Ensure the "OCU Slide Cart Drawer" app embed is enabled in your Theme Editor and the OCU slide cart script has fully loaded before triggering this event.

  8. The OCU Slide Cart is compatible with Shopify Markets, ensuring correctly converted prices for international storefronts. The Reward Bar also adjusts for currency conversion, applying the appropriate threshold across different markets. For instance, if a $55 USD threshold is set in the OCU app, it will automatically adjust to $77 CAD for customers shopping from a Canadian storefront.

Did this answer your question?