Skip to main content
Slide Cart Drawer [OCU]

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

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated yesterday

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.

Creating a New Cart Drawer

To create a new 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 our Shipping/Discount Bars currently work on Draft Orders, they may conflict with our Cart Drawer. Therefore, you must disable any "Free Shipping Bar" or "Discount Bar" used on Multi-product Pre-purchase offers in all funnels, in order to publish the OCU Slide Cart Drawer.

Editing the Slide Cart Drawer

To begin editing your new 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. "Free Shipping 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 Bar feature is enabled). If the Free Shipping Bar is not enabled, 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

  4. Preview the slide cart on Desktop and Mobile

  5. Save and Publish the slide cart

📝 To show and use the Free Shipping Bar, Upsell Offer, Additional Notes, Discount Codes, Trust Badges and/or Payment Gateways click the 👁️ button next to their titles to make them visible:

The sidebar contains the following Settings Tabs for further customization:

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.

  2. Sticky Footer - Keeps the footer fixed at the bottom of the screen, ensuring consistent navigation and access to important links as customers scroll.

  3. "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

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

  5. 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 adjust all of general text, element, button and selectors styles using the options available:

Font

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.

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).

Free Shipping Bar

In the Free Shipping Bar section, you can enable a free shipping bar and functionality at the top of the cart. To enable this functionality, you must first activate the "OCU Shipping Discount" in the Discounts section of your Shopify admin:

📝The free shipping discount applies to all shipping methods at Checkout.

Follow the quick and easy steps shown below to activate it:

The following settings and options are available:

  1. Threshold - Specify the minimum product value customers need to reach to qualify for free shipping.

  2. Price Rounding - Round prices up after currency conversion.

  3. Bar Color / Fill Color - Select the desired colors for the Bar and Fill to match your design preferences.

  4. Icon - Upload a custom shipping icon. Recommended size: 40x40px PNG

Clicking on the Free Shipping Bar text in the editor will open a popup where you can edit the:

  • Progress Message - The message shown when the free shipping threshold is partially reached.

  • Goal Reached Message - The message shown when the free shipping threshold is reached or exceeded and the customer is granted free shipping.

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.

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:

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.

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. The "Add to Cart > Stay on the Same Page" destination 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. The OCU Slide Cart is compatible with Shopify Markets, ensuring correctly converted prices for international storefronts. The Free Shipping 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?