Table of Contents:
Access to settings
Open Cartly → Custom cart from your dashboard.
Use the left sidebar to switch between General → Settings, Design, and Cart labels.
These General settings control the defaults for your whole Cartly Cart Drawer. Anything you change here applies to all enabled features on the left menu:
These settings apply to the all enabled features include:
Click on the links to learn how to enable and configure them for cart drawers.
📖 You might also like to check out: Step-by-step guide to setting up Custom Cart Drawer
What you can do here:
Set global behavior for the drawer (when it opens, what buttons appear).
Show key pricing information (compare-at price, save amounts, total savings).
Control the footer layout (sticky footer, subtotal inside the Checkout button, secure icon).
Keep the experience consistent by editing shared texts and labels.
Control the display options and core behavior of the Cart Drawer
Go to Custom Cart → General → Settings. The panel is grouped into sections:
General
Open Cart Drawer on cart icon click – Clicking the cart icon opens the drawer instead of the cart page.
Open Cart Drawer after a product is added to cart – Automatically opens the drawer right after Add to cart.
Products
Show compare at price – Displays the crossed-out "compare at" price next to the sale price.
Show Save label below product prices – Shows "Save $X" under item prices when discounted.
Show applied product discount tag – Shows the name of the discount applied to each item (e.g. "Volume Discount 30") under the product line. Useful for volume discounts, where customers can see exactly which deal was triggered and on which item.
Footer
Enable sticky footer – Pins the footer to the bottom for constant visibility.
Show total savings – Displays a "Total savings" line in the footer. Two sub-options appear when enabled:
Include compare-at-price savings – Counts the difference between compare-at and sale prices in the total.
Show applied discount tags – Lists the names of the discounts that make up the total savings.
Show Subtotal within "Checkout" button – Places the subtotal inside the Checkout button itself.
Show "Secure" icon within "Checkout" button – Adds a security icon to the button.
Secure icon – Pick your preferred icon from the options.
Show "Continue shopping" button – Adds a secondary action to return to browsing.
Show "View cart" button – Adds a link to the full cart page.
Click Save to apply changes.
Where discount names appear
There are two separate settings, and they control different parts of the drawer:
Show applied product discount tag (Products) — the discount name under each product line.
Show applied discount tags (Footer) — the discount names next to the Total savings line.
You can enable either one on its own, or both.
Empty cart settings
Empty cart settings allows you to decide what to show to your shoppers/customers when their cart is empty.
👉 Tick the "Show 'Continue shopping' button" to add 'Continue shopping' button:
This will make it easier for your customers to keep browsing instead of leaving the cart.
👉 Tick the "Show 'Log in' section" to offer quick checkout path:
This option will take your customers straight to the login page.
Custom CSS and JS
Open the Custom CSS and JS section at the bottom of the Settings page.
Generate custom CSS with AI – Describe the styles you need in plain language, and Cartly's AI will analyze your cart structure and generate the appropriate CSS for you. Be as specific as possible for the best result.
Custom CSS – Add small style tweaks that apply to the live storefront (not the preview). Useful for spacing, font sizes, etc.
Custom JS – Add custom JavaScript to control behavior and interactions. Like custom CSS, it applies on the storefront, not in the preview.
Design the Cart Drawer
Open Custom Cart → General → Design to define the look and feel of your drawer.
These colors, borders, accents, and button styles are inherited by all enabled features so everything looks consistent.
Note: The drawer inherits your theme’s font. If you need a different font, follow the font change guide for Cart Drawer.
Font: The drawer automatically inherits your theme font. If you need a different font, learn how to change the font in the Cart Drawer?
The Design page is grouped into expandable sections — click a section to open it and edit its styles:
General – Overall drawer appearance, such as background and general styling.
Primary elements – Styling for the main elements of the drawer.
Secondary elements – Styling for supporting elements.
Accent elements – Highlight and accent styling.
Buttons – Colors and styles for the drawer's buttons.
Announcement bar – Appearance of the announcement bar.
Cart footer – Styling for the footer area.
Reward bar – Appearance of the reward (progress) bar.
Lines – Dividers and separators in the drawer.
Customize texts (Cart labels)
Go to Custom Cart → General → Cart labels to adjust the labels and messages shown in the drawer. Rewrite them to match your brand voice, and use the Edit translations button (top right) to translate them into other languages.
Labels:
Cart Title – The drawer heading. Supports the
{{number_of_items}}variable (e.g.,Your Cart ({{number_of_items}})).Save – Text shown with the savings amount below product prices (default: "Save").
Total savings – Label for the total savings line in the footer (default: "Total savings").
Subtotal Label – Label for the subtotal line (default: "Subtotal").
Checkout button – Text for the primary Checkout button (default: "Checkout").
Continue shopping button – Text for the "Continue shopping" action (default: "Continue shopping").
View cart button – Text for the link to the full cart page (default: "View Cart").
Terms and conditions agreement error label – Message shown when the T&C checkbox is required but not ticked (default: "Please accept the terms to proceed").
Empty cart
These labels appear when the cart is empty:
Empty cart label – The main empty-cart heading (default: "Your cart is empty").
Empty cart description label (optional) – Supporting text below the heading (default: "You don't have any items in your cart.").
Empty cart Log in label (optional) – Prompt shown above the login action (default: "Have an account?").
Empty cart Log in button – The login button text (default: "Log in").
to check out faster – Text shown after the login link (default: "to check out faster").
Edit any field, then click Save to apply. To restore the original wording, use Revert to Default.
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]