The Custom Cart feature gives you full control over the cart experience on your store. With this feature you can create a cart drawer and include all the additional features you want in the cart drawer like free shipping progress bar, announcements, payment methods, etc.
Table of contents:
With custom cart feature, you can add product cross-sell and upsell, product add-ons, volume discount, and subscription options. Read the following articles to learn how to set up these upselling features:
Enable the default Cart drawer
From your Cartly dashboard, switch the Custom cart toggle to On to enable the cart drawer or click the Custom cart to customize it.
In the Settings section, select what to display in the cart drawers:
Open Cart Drawer on cart icon click
Show compare at price
Show Save label below product prices
Show "Continue shopping" button
Show "View cart" button
You can also add custom CSS form the additional settings section:
Design the cart drawer (optional).
Use the Design tab to match the cart drawer to your brand. Here you can set the background and adjust color/styling for primary/secondary/accent elements, buttons, the announcement bar, cart footer, progress bar, and lines.
On the Translations section, you can change the texts
Include Announcement bar in the cart drawer
The Announcement bar shows a slim message inside the cart drawer. It’s perfect for urgency (“cart reserved”), promos, shipping notes, or policy reminders right where customers review their cart. You can also include a countdown timer in the message by using {{timer}} in the message.
How to add Announcement bar in the cart drawer?
In Cart Drawer → Features → Announcement bar, click Enable.
Choose Bar style and Position (within the drawer).
Enter your Announcement message (add
{{timer}}to show a countdown).Set Timer duration and the Action after timer expired.
Click Save.
Display Free shipping progress bar in the cart drawer
The Free shipping progress bar appears inside the cart drawer and shows shoppers how much more they need to spend to unlock free shipping. It updates in real time as items are added/removed, encouraging larger orders.
What you can configure here:
Minimum purchase amount: The order total required for free shipping.
Goal reminder message: Text shown before the goal is reached. Use
{{amount}}to display the remaining amount (e.g., “You are {{amount}} away from free shipping”).Goal achieved message: Text shown after the goal is met (e.g., “Free shipping unlocked!”).
Position in the cart drawer: Choose Top or Bottom.
Enable/Disable the feature.
Important: Set up a matching free-shipping rule in your store’s shipping settings so the progress bar calculates correctly.
How to set Free Shipping progress bar?
Go to Cart Drawer → Features → Free shipping progress bar and click Enable.
Enter the Minimum purchase amount (match your store’s free-shipping rule).
Write your Goal reminder message using
{{amount}}.Add your Goal achieved message.
Choose the Position (Top/Bottom) within the cart drawer.
Click Save.
Enable order notes in the cart drawer
Order notes adds a text field inside the cart drawer so customers can leave special instructions (e.g., gift messages, delivery notes) before checkout. The note is collected with the order.
What you can configure here:
Order notes label: The heading shown above the field (rich-text supported).
Order notes placeholder: Helper text inside the input (e.g., “Special instructions for your order”).
Order notes position: Where the field appears in the drawer (e.g., Above Checkout button)
How to enable Order notes in the cart drawer?
Go to Cart Drawer → Features → Order notes and click Enable.
Enter your Label and Placeholder text.
Choose the Position within the cart drawer.
Click Save.
Enable applying Discount code in the cart drawer
The Discount code feature adds a promo-code field inside the cart drawer so customers can enter and apply a code before checkout.
How to enable applying Discount code in the cart drawer?
Go to Cart Drawer → Features → Discount code and click Enable.
Enter your Placeholder, Button label, and Error message text.
Click Save.
Display Terms and conditions checkbox in the cart drawer
The Terms and conditions checkbox adds a consent box inside the cart drawer so shoppers can acknowledge your terms before proceeding.
How to display Terms and conditions checkbox in the cart drawer?
Go to Cart Drawer → Features → Terms and conditions checkbox and click Enable.
Enter your consent text and add a link to your policy page.
(Optional) Turn on Pre-ticked by default.
Click Save.
Offer Installment payment in the cart drawer
The Installment payment offer shows a short message inside the cart drawer that promotes paying in installments.
How to enable installment payments?
Go to Cart Drawer → Features → Installment payment and click Enable.
Enter the Quantity of payments.
Edit the Installment payment label (use
{{quantity_of_payments}}and{{installment_amount}}as needed).(Optional) Turn on Show installment provider logo.
Select one provider by clicking its icon.
(Optional) Add image to upload your own badge.
Click Save.
Cartly supports Afterpay, Klarna, Affirm, Shop Pay Installments, and Sezzle.
Display Trust badges in the cart drawer
Trust badges add reassurance inside the cart drawer by showing a short message (e.g., “Guaranteed Safe & Secure Checkout”) and an image with payment/security icons. This helps build confidence in your customers right before checkout.
How to include trust seals in the cart drawer?
Go to Cart Drawer → Features → Trust badges and click Enable.
Enter your Trust badges message.
Upload a Trust badges image (you can use the link below to create a custom set or click on the icon you want to change).
Select the Position (Below/Above Checkout button or Above Subtotal).
Display Express checkout buttons in the cart drawer
Express checkout buttons add wallet/fast-pay options inside the cart drawer (e.g., Shop Pay, Apple Pay, Google Pay, PayPal, Amazon Pay, Venmo) so customers can check out in one tap.
Note: To display Express Checkout buttons on your storefront, you must first activate the corresponding Payment Providers in your store’s payment settings. Without activating these, the buttons will not appear to customers. To learn how to enable these providers, visit this Shopify Dynamic Checkout guide.
Factors Affecting Button Display
The type of dynamic checkout button that appears depends on:
Your store's payment settings.
Whether Shop Promise is active (prioritizes Shop Pay over other methods).
The customer’s browser and device type.
The customer’s previous payment history
This setup ensures your customers see the most convenient checkout methods, streamlining their purchasing experience.
How to add express checkout buttons in the cart drawer?
Go to Cart Drawer → Features → Express payments and click Enable.
Choose the Buttons layout.
Select the providers you want to display.
(Optional) Toggle Preview buttons to check placement in the preview.
Click Save.
We support Shop Pay, Apple Pay, Google Pay, PayPal, Amazon Pay, and Venmo.
Add Additional info text in the cart drawer
Additional info lets you display a short custom message inside the cart drawer, above or below the checkout button.
How to add a custom text in the cart drawer?
Go to Cart Drawer → Features → Additional info and click Enable.
Enter your message and format it as needed.
Select the position within the cart drawer.
Click Save.
With custom cart feature, you can add product cross-sell and upsell, product add-ons, volume discount, and subscription options. Read the following articles to learn how to set up these upselling features:
Need Help?
If you have any questions, please contact our support team.
📩 Contact Support: Reach out to us via live chat or send an email to [email protected]