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:
Click into the "Slide Cart Drawer" section in the sidebar
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:
Go to Online Store > Themes > Customize > App Embeds in your Shopify admin
Toggle on the "OCU Slide Cart Drawer" app embed
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:
Access the Settings Tabs in the sidebar
Select and edit different Cart States via the dropdown (Cart with items / Empty cart)
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:"Your Cart" text
"Free Shipping Bar" text
Savings Label > "Savings" text
"Additional Notes" title
Discount code "Apply" button text
Shipping > "Shipping information" text
"Checkout" button text
"Continue Shopping" link text
Preview the slide cart on Desktop and Mobile
Save and Publish the slide cart
📝 To show and use the Free Shipping Bar, Upsell Offer, Additional Notes, Discount Codes 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:
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.
Sticky Footer - Keeps the footer fixed at the bottom of the screen, ensuring consistent navigation and access to important links as customers scroll.
"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/allCollection page on your storefront.Savings Label - Highlights discounts or savings applied to items in the cart, providing clarity on reduced prices.
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 Color | The general font color from the color picker, to be used for all text on the cart. |
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. |
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:
Threshold - Specify the minimum product value customers need to reach to qualify for free shipping.
Price Rounding - Round prices up after currency conversion.
Bar Color / Fill Color - Select the desired colors for the Bar and Fill to match your design preferences.
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:
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
If the OCU Slide Cart Drawer fails to display, the Shopify Cart from your Theme will automatically be shown instead.
The slide cart cannot be restricted based on geolocation; it will be visible to all visitors on your storefront.
If the Skip Cart setting is enabled in OCU, the OCU Slide Cart Drawer will not appear accordingly.
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.
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:
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.
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.