How to Set Up a Slide Cart?
A Slide Cart turns a simple cart into a powerful conversion tool.
Instead of redirecting shoppers to a separate cart page, it slides in instantly—keeping them engaged and focused on checkout without breaking their browsing flow.
With Kefi’s Slide Cart, the cart becomes an interactive sales channel. You can showcase products, highlight upsells, unlock rewards with progress bars, trigger free gifts, and display discounts—all in one smooth experience.
This not only makes shopping easier but also drives higher order values, builds trust, and reduces cart abandonment.
Why is the Slide Cart Important?
A Slide Cart isn’t just a design upgrade—it’s a powerful conversion tool that improves both the shopping experience and your store’s performance.
Keeps Shoppers Engaged - Unlike the traditional cart page, the Slide Cart keeps customers on the same page, reducing friction and helping them stay focused on completing their purchase.
Boosts Average Order Value - With built-in upsells, add-ons, tiered rewards, and free gift triggers, the Slide Cart actively encourages customers to add more to their order before checking out.
Reduces Cart Abandonment - Features like sticky checkout buttons, trust badges, and urgency timers build confidence and nudge shoppers to complete their purchase instead of leaving.
Creates a Personalized Experience - Dynamic rewards, discounts, and product suggestions make the cart feel more interactive and tailored—helping shoppers feel rewarded as they shop.
Seamless Store Branding - With full control over design, typography, and colors, the Slide Cart blends smoothly into your store’s look, ensuring a professional and consistent brand experience.
Key Features of Kefi’s Slide Cart
Upsells – Recommend relevant add-ons, accessories, or upgrades directly in the cart.
Tiered Rewards – Show spending thresholds (e.g., “Spend $20 more to unlock 10% off or free shipping”).
Product Add-Ons – Offer quick add-to-cart options for complementary items without disrupting the flow.
Subscription Upsell – Promote subscription upgrades for applicable products (ideal for consumables or recurring goods).
Countdown Timers & Urgency (if enabled) – Drive faster conversions with time-based offers or limited stock alerts.
Trust Badges – Reassure shoppers with secure checkout, payment options, and guarantee icons to build confidence and reduce cart abandonment.
What are the Steps to Create a Slide Cart?
STEP 1
Set up the Slide Cart
Go to the Kefi Bundle Builder 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. Footer Layouts - Choose from Horizontal or Vertical Layouts.
C. Cart Width - Choose between different Cart Widths (e.g., Standard, Expanded) to control how much space the cart panel occupies on screen.
D. 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.
E. Background - You can also set a custom Background Color for the cart to further match your storefront.
F. Inherent Fonts Theme - Enable or disable “Inherit Fonts from Theme” to automatically apply your store’s font styles within the cart. If you disable it, you can choose the cart font by clicking the arrow.
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, save text, quantity, discount text and background 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, product price, product properties, compare-at-price, and product save text. You can fine-tune the appearance to match your brand’s tone and improve readability throughout the cart.
5. Footer Color - This section lets you customize how your store’s footer, pricing, and buttons appear. Adjusting these options helps create a consistent look and feel across your storefront.
Footer - Set the footer background to match your overall theme. A neutral background works best to keep focus on your content while maintaining a clean finish at the bottom of your store.
Pricing Text
Total Price: The main selling price of your product. Make it bold and clear so customers can spot it instantly.
Compare-at Price: The “before discount” price. Display it in a softer tone to highlight promotions without overshadowing the main price.
Secondary Text: Supporting details such as tax notes or savings. Use this to provide clarity and additional context.
Buttons
Default Button: Style the background, text, and border to reflect your brand while ensuring readability.
Hover State: Adjust how buttons react when customers hover over them. A lighter background or subtle shift signals interactivity while keeping a consistent branded look.
These settings help ensure your pricing stands out clearly and your buttons encourage action, all while maintaining a cohesive design.
6. Footer Typography - This section allows you to adjust the text styling in your footer:
Total Price – Set size and style for the main price.
Compare-at Price – Control typography for discounted or strike-through prices.
Secondary Text – Customize supporting details such as notes or extra info.
CTA (Call to Action) – Define the size and style for action prompts like buttons or links.
Border Radius – Adjust the roundness of buttons and other footer elements.
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, or Total Items) 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 - This section controls the appearance of progress bars and free gift elements in your store.Progress Bar – Customize the background and foreground to clearly show progress toward a goal.
Free Gift Header & Title – Define the text color for headings and product names.
Free Gift Product Background – Set the background behind gift products for better visibility.
Free Gift Button – Adjust button background and text color to keep them clear and clickable.
Advanced Settings - Advanced Settings let you control how rewards and free gifts behave in the cart for a smoother, more motivating shopping experience.
Show Rewards on Empty Cart – Display reward progress messages even when the cart has no items. This can motivate shoppers early and encourage them to start adding products.
Automatically Add Free Gifts to Cart – Enable this to have free gifts added to the cart automatically once a reward threshold is met, making the experience seamless and reducing extra clicks for the customer.
Checking the box activates the feature (e.g., rewards show on empty carts or free gifts are auto-added). While unchecking the box disables the feature, keeping the cart simpler and requiring customers to take action manually.
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. Choose between Related or Complimentary.
Manual Upsells – Select specific products aligned with your sales strategy to upsell.
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 button border radius for a sharper or more rounded look that fits your brand’s style.