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:
1. General - The Design tab under Cart Appearance lets you fully personalize how your slide cart looks, helping it blend seamlessly with your store’s brand and theme.
A. Template Layouts - Choose from two layout styles, and select the one that fits your store's aesthetic best.:
Basic – Clean and straightforward, with simple stacking of cart elements.
Modern – A more structured, visually dynamic layout.
B. Theme Colors - Pick a primary color theme for your cart interface using preset color swatches. Or, click Custom to define your own hex or brand-specific colors. You can also set a custom Background Color for the cart to further match your storefront.
C. Inherent Fonts Theme - Enable or disable “Inherit Fonts from Theme” to automatically apply your store’s font styles within the cart.
D. Cart Width - Choose between different Cart Widths (e.g., Standard, Expanded) to control how much space the cart panel occupies on screen.
2. Header - This section allows you to fine-tune the appearance of your cart header, making it visually aligned with your brand.
A. Header Background & Title - Choose a background color for the header area, and customize the font color for your cart’s main heading.
B. Title Underline - Choose between a Solid underline or a Gradient effect under the title text. Select custom colors for both the Title Underline and Gradient End Color. Or, use the Gradient Direction slider to adjust the angle of the gradient effect visually.
C. Quantity & Close Button - Customize the color of the item quantity counter and the cart close button for visual clarity.
D. Height - Adjust the overall header height using dropdown options: Small, Medium, or Large—depending on how prominent you want the cart header to appear.
3. Product Card Color - The Product Card Color section lets you customize the look of your product cards in the slide cart. You can set specific colors for background, text, quantity, discount text and background, and save text to align with your store’s branding.
4. Product Cart Typography - The Product Card Typography section lets you control the font size and style for different elements on each product card—such as title, price, properties, and discount details. You can fine-tune the appearance to match your brand’s tone and improve readability throughout the cart.
5. 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 - This section allows you to configure tiered rewards that encourage customers to increase their cart value in order to unlock exclusive benefits like discounts or free shipping.
Tier 1 -
Reward Type: Select from options such as Free Shipping, Discount, or Free Gift.
Reward Description: In this case, Label the reward (e.g., “Free Shipping”) that will be shown to the customer.
Minimum Amount: Set the cart value threshold (e.g., USD 89) needed to unlock this reward.
Text Before Tier Completion: Add custom messaging that motivates customers (e.g., “You're {amount} away from getting Free Shipping”). The {amount} variable dynamically updates in real-time.
Text After Tier Completion (optional): Enable and add a message that appears once the reward is unlocked (e.g., “You’ve unlocked Free Shipping!”).
Delete This Tier: Click on it if you want to remove this reward tier completely.
TIER 2- Similar to Tier 1, but you can change the reward type, threshold and messages if you’d want.
In this case, this tier gives customers a 15% discount when their cart total reaches USD 1089. You can customize the reward label, enter your discount value, and add messages for before and after tier completion.
Click Delete this tier if you wish to remove it.
TIER 3 - This reward tier offers a free product (e.g., Nutrition Bars) when the cart total reaches USD 2089.
You can customize the reward label, define the gifted product using the Browse button, and add personalized messaging both before and after the reward is unlocked.
Use the “Delete this tier” option if you'd like to remove it. This setup is great for driving higher-value checkouts through added incentives.
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 - The Typography section under Upsells allows you to control the font size and style for all upsell elements—like product titles, prices, compared prices, and discount text. You can fine-tune the visual hierarchy and ensure consistency with your store’s design.
5. Colors - The Color section under Upsells lets you customize the color scheme for all upsell components—including product cards, text, buttons, and hover states. You can also control card and button border radius for a sharper or more rounded look that fits your brand’s style.
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. Discount Codes - 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.
Title: Set the title that will appear above the add-on product in the cart.
Description: Add a short message to describe the offer; use {price} to dynamically insert pricing.
Price: Enter the amount the customer will pay for this add-on product.
Media: Upload an image or graphic to visually represent the product.
Card Background & Text Colors: Customize the card's background, text, and description colors.
Card Border: Choose between solid or gradient borders and adjust the gradient direction.
Typography: Set font size and style for the title and description to match your store’s design.
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. Trust Badges - The Trust Badges feature in Kefi allows you to display secure payment and brand logos—like Visa, PayPal, Apple Pay, and more—inside your cart.
These badges help build credibility and increase shopper confidence by visually reinforcing that transactions are secure and trusted. You can also upload custom badges and control their size using the slider.
STEP 13
I. 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: Set the heading displayed at the top of your cart (e.g., “Cart”).
Checkout Button: Customize the checkout button label; use {icon} to include an icon.
Empty Cart Text: Define the message shown when the cart has no items.
Continue Shopping CTA: Set the label for the button that redirects users back to shopping.
Applied Discount: Label shown when a discount is applied to the cart.
Saving Text: Text that highlights how much the customer is saving.
Add Upsell Text: Button label for adding upsell products from the cart.
Estimated Total Text: Customize the label that displays the cart’s estimated total amount.
4. Additional - The Additional setting allows you to toggle the underline beneath cart text for visual separation. Enabling it can enhance readability and add a subtle design element to your cart layout.
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]