Overview
Most themes within Shopify allow the cart preview to appear on the far right side, often referred to as the "Cart Drawer". This allows customers to easily see their added products before continuing to checkout. This tutorial will help you to add the Cart Slider or the VIP Checkout button to this area.
Note: Basic technical knowledge is required, as this process involves checking the DIV code in your Cart Drawer and then adding that value into the Shipment Guard settings area.
If you have any difficulty with the installation and have questions, or prefer our team to handle the installation for you (free same-day service available) - please contact our support team via the Live Chat icon on the bottom right.
Get Started
We recommend to watch our quick (3 min) installation video to help your team get setup:
Installation Steps
Before we get started adding the Cart Slider or VIP Checkout button to the Cart Drawer, this step assumes you've already enabled the script and added the cart widget to your store. If you haven't completed this step yet, please review our tutorial guide. Note: If you're currently using another app to power your cart drawer, such as Rebuy please scroll to the bottom section for details.
For the purpose this installation, I'm using Google Chrome as my browser, but any browser should be fine as long as you can inspect the code on the page.
Within your Shopify store go to:
Online Store > Themes > Customize
Click the top section and select Default Product > Add to Cart (to help visualize)
Click the top section and select Cart
Open up the cart drawer by selecting the cart icon on your theme
Right click on the bottom section where it has the subtotal and checkout button
Within the code inspection area (elements tab), we need to look for a section called "Drawer Footer" and then for an area under that called "Subtotal".
Directly under the subtotal should be a div class called "cart-drawer__footer" , but your theme may have a different value. This is the value we need to add into your Shipment Guard settings.
Copy this value (ex: cart-drawer__footer)
Open up your App Embed settings within Shopify
Paste the value into the field Cart Footer and be sure to add a period in front of the text.
Once added, be sure to click on Save on the top right. Now if you go back and open up the cart drawer again, you should now see the Cart Widget (Slider or VIP Checkout button) appear within the Cart Drawer area.
Appearance to Customers
Once the installation is completed, the Cart Slider or VIP Checkout button will now display on the bottom section of the Cart Drawer.
Example of the Cart Slider
Example of the VIP Checkout button
Alternative Cart Drawer Apps
If you're currently using an Shopify App to power your cart drawer, such as Rebuy this section will provide the exact values to add into your App embed settings.
Rebuy Engine
Add the value [data-rebuy-component=checkout-area] to the 1st text field called "Cart footer selector (optional)"
Add the value .rebuy-cart__checkout-button to the 3rd text field called "Checkout button selector (optional)"
Once done, be sure to click Save and you're all set.