A Slide Cart is a dynamic cart drawer that slides in from the side of your Shopify store when a customer adds a product to their cart.
Unlike the traditional full-page cart, the slide cart keeps users on the current page while giving them a quick view of their selected items and total cost.
Kefi’s Slide Cart also allows you to embed smart upsell offers, progress bars, free gift triggers, and discount unlocks — all within the cart experience.
Why is the Slide Cart Important?
Reduces Checkout Friction - Keeps customers on the same page without redirecting them to a separate cart page.
Boosts Conversions - Minimizes drop-offs by offering a smoother, faster path to checkout.
Increases Average Order Value (AOV) - Surfaces upsells, add-ons, and reward triggers right inside the cart.
Drives Urgency and Incentives - Encourages shoppers to spend more with real-time messages like “Add $10 more to unlock free shipping.”
Improves Mobile Experience - Offers a sleek, user-friendly interface optimized for both desktop and mobile shoppers.
Creates a Seamless Buyer Journey - Integrates perfectly into the shopping flow without interrupting the experience.
Key Features of Kefi’s Slide Cart
1. Upsells - Recommend relevant add-ons, accessories, or upgrades directly in the cart.
2. Tiered Rewards - Show spending thresholds (e.g., “Spend $20 more to unlock 10% off or free shipping”).
3. Product Add-Ons - Offer quick add-to-cart options for complementary items without disrupting the flow.
4. Subscription Upsell - Promote subscription upgrades for applicable products (ideal for consumables or recurring goods).
5. Countdown Timers & Urgency (if enabled) - Drive faster conversions with time-based offers or limited stock alerts.
What are the Steps to Create a Slide Cart?
STEP 1
Set up the Slide Cart
Go to the homepage and choose the ‘Slide Cart’ option. Click ‘Select’.
STEP 2
On the redirected page, in the left panel, you’ll find all the key customization options — including Cart Appearance, Cart Features and Settings. Each section lets you fine-tune how your cart looks and behaves.
On the right side, the live preview updates instantly, so you can see exactly how your cart will appear to customers as you make changes.
STEP 3
Work on the Cart Appearance.
1. Design - Customize the visual layout of your cart, including background color, font style, cart width, button styling, and border radius — ensuring it blends seamlessly with your store's branding.
Key Customization Options:
General - The General section allows you to customize the cart’s background color, choose to inherit fonts from your store’s theme, and adjust the cart width (standard or expanded).
Header - Customize background, title, quantity, and close button colors. You can also adjust the height of the header area (e.g., Small, Medium, Large) for visual emphasis.
Footer - Set primary and secondary text colors, button colors, and hover states to create a smooth and branded checkout experience. Adjust the border radius to define how rounded your buttons and sections appear.
Click ‘Save’ to move on to the next section.
STEP 4
Adjust the Cart Position -
In the Positions section of Kefi’s Slide Cart, you can easily customize the placement of key cart features to optimize visibility and engagement.
Announcements: Highlight messages or countdowns.
Rewards: Show progress bars to boost engagement.
Products: Customize how items appear.
Upsells: Suggest products to increase order value.
STEP 5
Configure the Cart Features
A. Rewards - Set milestone-based perks like free shipping, discounts, or free gifts to boost cart value as customers reach spend thresholds.
General Settings - This section defines how rewards work and appear in the cart.
Reward Basis – Set the trigger (e.g., Cart Total) to calculate rewards based on total cart value.
Show Rewards on Empty Cart – Toggle on to display reward messages even when the cart is empty, motivating early.
All Tier Completion Text – Customize the message shown after completing all reward tiers.
Tip: Use “Deactivate” to pause rewards anytime without deleting them.
Reward Settings -
Tier 1 - Set your first milestone reward, e.g., Free Shipping at $89 cart total.
1. Reward Type: Choose from Free Shipping, Free Gift, or Discount.
2. Reward Description: Label shown in the cart (e.g: Free Shipping)
3. Minimum Amount: Cart value needed to unlock the reward (e.g., $89).
4. Before Tier Text: Motivates customers (e.g., “You’re {amount} away from Free Shipping”).
5. After Tier Text: Celebrates completion (e.g., “Awesome! You’ve unlocked free shipping”).
Click “Delete this tier” to remove it anytime.
TIER 2- Similar to Tier, but you can change the reward type, threshold and messages if you’d want.
For example - A percentage discount (e.g., 15%) at a higher cart value (e.g., $1089).
Use “Add New Tier” to create more milestones or “Delete this tier” to remove.
Color - Customize your progress bar to match your branding by setting the background (unfilled) and foreground (filled) colors.
STEP 6
B. Upsells - The Upsells section lets you show targeted product suggestions in the Slide Cart, boosting average order value by encouraging shoppers to add more before checkout.
1. Upsell Product - Choose between:
AI Recommendations – Automatically suggest products based on customer behavior.
Manual Upsells – Select specific products aligned with your sales strategy.
Click on ‘Create Upsells’ to build a custom upsell offer tailored to your strategy.
2. Upsell General Settings - This section lets you control how and when upsell offers appear in your Slide Cart.
Show upsell offers for products already in the cart – Include items already in the cart to promote extra quantities or variants.
Restrict the number of upsells in cart – Limit how many upsell items can be added (optional).
Upsell Layout – Choose how upsells are displayed (e.g., Carousel or Stacked Blocks)
Carousel View Type – Set the scroll direction to Horizontal or Vertical based on your store layout.
3. Upsell Text Settings - This section lets you customize and style the header text above your upsell offers using rich text options like bold, italic, underline and more. You can use phrases like "Special Offer" to grab attention and boost engagement.
4. Typography - Adjust the font size of your upsell heading (e.g., “Special Offer”) to match your store’s style and ensure readability across devices.
5. Colors - Customize the text, background, and button colors of your upsell offer, and adjust the border radius to match your store’s design.
Once done with this section, click ‘Save’ to save the changes before proceeding with the next.
STEP 7
C. Announcements - The Announcements feature lets you display a countdown message in the Slide Cart, helping create urgency and boost conversions.
Click Activate to display the banner in your cart.
1. General - Set your announcement message and use {timer} to show a live countdown (e.g., “Reserved for {timer} minutes!”). You can also define the timer duration and choose the container size for visibility.
2. Colors - Use color settings to style your announcement banner’s background, timer, and text—keeping it aligned with your brand’s look.
3. Typography - Customize the font size and style of your announcement message and timer to match your store’s tone and design.
STEP 8
D. Discounts - The Discount section lets customers apply promo codes directly in the Slide Cart. It helps boost conversions by making discounts visible and easy to use, with customizable text and styling to match your brand.
Activate Button – Enable the discount field to display it in your Slide Cart.
1. General - Set a custom Discount Title, add placeholder text to suggest a sample code (e.g., SAVE10), and define the button text (e.g., Apply) for the coupon field in your cart.
2. Color - Personalize title, icon, and button colors (background, text, and hover) to match your brand.
Once done with this section, click ‘Save’.
STEP 9
E. Additional Notes - The Additional Notes section lets customers leave special instructions with their order (e.g., “Gift wrap this item”). You can customize the note label, placeholder, and button text, along with colors to match your cart’s design.
Click Activate (top right) to enable the feature in your Slide Cart, and Save to apply all changes once you’re done customizing.
STEP 10
F. Additional Products - The Additional Products section lets you add small upsell items, such as Shipping Protection or Gift Wrapping, directly within the Slide Cart.
Product Type: Choose between Shipping Protection or Gift Wrapping.
Title & Description: Customize the label and messaging (e.g., “Get this product at {price}”).
Pricing: Define the flat price for the add-on (e.g., $3).
Media: Upload a product image for visual context in the cart.
Once activated, the product appears at the bottom of the Slide Cart, giving shoppers a simple, low-effort way to add extra value to their order.
STEP 11
G. Additional Message - The Additional Message section allows you to display a custom note in the Slide Cart (e.g., “Amazing choice” or “You’ve unlocked a great deal”).
Text – Enter your message in the Announcement Text field.
Color – Set background and message text colors to align with your branding.
Typography – Adjust font size and style to control its visibility and tone.
Click Activate to enable the message, and Save to apply the changes once the styling is done.
STEP 12
H. Settings - The Settings section in Kefi Slide Cart lets you control how your cart functions and appears across your store.
Deactivate Cart: Temporarily disables the Kefi Slide Cart on your storefront. This is useful if you want to pause its functionality without deleting your configurations. You can reactivate it anytime.
Close Preview: Exits the live preview mode and returns you to the main app dashboard. It does not affect any settings or visibility on your store.
1. Cart Behavior
Cart Position – Choose where the Slide Cart opens (e.g., right/left side).
Enable/disable features: View Cart and Continue Shopping buttons, Redirect to Cart Page on checkout and Auto-open drawer after adding a product
2. Product & Pricing Display
Sticky Footer – Keeps the checkout bar visible while scrolling.
Show Savings – Display discounts below product prices.
Show Product Property – Reveal extra product details in the cart.
3. Texts and Labels
The Text & Labels section lets you personalize the language used throughout your Slide Cart. You can edit fields such as:
Cart Title – Name your cart section (e.g., "My Bag" or "Your Cart").
Checkout Button – Customize the CTA (e.g., “Proceed to Checkout”).
Empty Cart Text – Message shown when no items are in the cart (e.g., “Your cart is empty!”)
Applied Discount – Label for displayed discounts.
Saving Text – Customize how savings are shown (e.g., “You Save”).
STEP 13
The Save button applies all the changes you’ve made to your cart configuration. If you see the "Unsaved changes" message, it means updates haven’t been finalized yet. Click Save to ensure your edits are live and reflected in the customer-facing cart experience.
Need Help?
If you have any questions or need assistance, feel free to contact us:
Live Chat: Available via the Kefi Bundles app or website.
Email: [email protected] - write an article on this