CartOn — Merchant Documentation
CartOn replaces your theme's cart with a customizable slide-out cart drawer, and adds revenue features on top of it: reward tiers, upsells, coupon entry, add-on products, trust badges and more.
Everything is configured from the app in your Shopify admin. No theme code editing is required for normal use.
Contents
- Quick start
- How the Cart Editor works
- Module reference
- Sticky Cart
- Analytics
- Theme compatibility & troubleshooting
- Limits and known behaviour
Quick start
There are three steps. The cart will not appear on your storefront until all three are done.
1. Enable Cart Drawer in your theme
CartOn is delivered as an app embed block. Shopify requires you to switch it on in your theme before the app can render anything.
- In the app, look for the "Integrate with theme" banner on the home page.
- Click through to your theme editor.
- Find Cart Drawer in the App embeds list and toggle it on.
- Click Save.
Enabling the Bridge does not make your cart live yet — it only gives the app permission to run on your storefront.
If you skip this step, the app will keep showing the integration warning and your storefront will continue using your theme's own cart.
2. Turn the cart on
- Go to Cart Editor.
- At the top of the left sidebar, set Cart Status to Enable.
Your drawer is now live. Clicking the cart icon anywhere on your storefront opens CartOn instead of your theme's cart.
3. Customize
Work down the sidebar. Each entry is a module you can style and switch on or off independently. The live preview on the right updates as you type.
How the Cart Editor works
The Cart Editor has three parts:
| Part | What it does |
|---|---|
| Left sidebar | Cart Status, plus one entry per module. Each shows an Enabled/Disabled badge. |
| Middle panel | Settings for whichever module you selected. |
| Right preview | Live cart drawer preview. Toggle with Close Preview / Show Preview. |
The sidebar is ordered to match the order things appear in the real drawer, top to bottom — so Announcement sits above Cart Items, and Trust Badge sits at the bottom.
Two kinds of change
This distinction matters, because they save differently:
- Module on/off toggles (the Enable/Disable button at the top of each module page) save immediately. No Save button needed.
- Everything else — colours, text, sizes — is saved with the Save bar that appears at the bottom of the screen once you make a change. Navigating away with unsaved changes prompts you to confirm.
Preview vs. live
The preview shows your settings applied to sample data. It is not your real cart. Use Basic → Cart Preview to switch the preview between showing sample items and showing the empty-cart state.
Module reference
Basic
General drawer behaviour, plus theme compatibility overrides.
| Setting | What it does |
|---|---|
| Cart Preview | Whether the editor preview shows sample items or the empty state. Affects the editor only, not your storefront. |
| Open Cart Drawer When Item Added | When Yes, the drawer opens automatically after any add to cart. Set to No if you prefer a silent add. |
The remaining fields are theme selectors — see Theme compatibility. Leave them empty unless something is not working.
Design
The overall look of the drawer.
| Setting | What it does |
|---|---|
| Templates | The drawer's layout. See below. |
| Drawer position | Which side the drawer slides in from (left or right). |
| Base Color, Special Colors | Background, accent and text colours for the whole drawer. |
| Button, Button Radius | Primary button colour, hover colour and corner rounding. |
Colours set here cascade to every module — borders, muted text and chips are derived from your text and button colours so the palette stays consistent.
Templates
A template is the drawer's layout, not a colour scheme. Each one arranges the same cart differently:
| Template | |
|---|---|
| Standard | The house layout. Roomy rows, a large product image, price and remove bracketing each line. |
| Compact | Half the row height. Small thumbnails, one-line product titles, price and remove side by side. For long carts meant to be scanned. |
Switching a template replaces your colours, sizes and spacing with that template's, across every module. Your text, products, reward tiers and module on/off settings are never touched.
Your work is kept per template. Tune Standard, switch to Compact, switch back, and Standard is exactly as you left it. That makes trying one free — you are never choosing between looking and keeping what you have.
You will be asked to confirm each switch, and told which template your current work is being saved under.
Header
The top bar of the drawer.
| Setting | What it does |
|---|---|
| Text, Title Variant, Font Size, Text Color | The heading, e.g. "Your cart". |
| Icon, Icon Size, Icon Color | Optional icon beside the heading. |
| Dismiss | The close (×) control's icon, size and colour. |
Announcement
A full-width bar at the very top of the drawer, optionally with a countdown timer. Useful for urgency messaging ("Your items are reserved for 10:00").
| Setting | What it does |
|---|---|
| Announcement Text | Message shown. Insert {timer} where the countdown should appear. |
| Timer (min:sec) | Countdown length. |
| Once it ends | Repeat the countdown, Hide the countdown, or Clear Cart. |
| Background / Font / Timer Color, Font Size | Styling. |
Clear Cart empties the customer's cart when the timer expires. Use deliberately.
Rewards
A progress bar that rewards customers for spending more. This is the most powerful module and it creates real discounts, not just a visual bar.
| Setting | What it does |
|---|---|
| Rewards Type | Discount, Free Shipping, or Gift. |
| Minimum Amount | Cart value at which the tier unlocks. |
| Discount Type / Value | Percentage or Fixed amount, and how much. |
| Gift quantity / product | For Gift tiers, the product automatically added when unlocked. |
| Reward Description | Short label for the tier. |
| Text before / after completing | Messaging shown below the bar. Use {{min_amount}} for the remaining spend. |
| Bar Background / Foreground Color | Progress bar styling. |
| Show reward icon | Show or hide the tier icons on the bar. |
| Enable Automatic Currency Conversion | Converts tier thresholds for multi-currency stores. |
Tiers: minimum 1, maximum 3.
How the discount is applied: CartOn creates and maintains a Shopify automatic discount for you when you save. The bar is only the display; the actual saving is applied by Shopify at checkout. Do not delete the CartOn-owned discount from your Discounts admin — the app recreates and updates it from your tier settings.
Gift items are added to the cart automatically and do not count toward the next tier's threshold.
Cart Items
Styling for the product lines in the cart.
| Setting | What it does |
|---|---|
| Image size (px), Corner radius (px) | Product thumbnail. |
| Title color / font size / font weight | Product name. |
| Price color / font size / font weight | Line price. |
Upsells
Product recommendations shown inside the drawer.
| Setting | What it does |
|---|---|
| Upsell Type | All Products (automatic) or Specific Products (you pick). |
| Recommendation Algorithm | Related or Frequently Bought. Applies to All Products mode. |
| Max number of products to display | How many recommendations to show. |
| Always show even if the upsell product is in cart | Keeps showing a product the customer already added. |
| Upsell Title, Title Font Size, Title Text Color | Section heading. |
Additional Note
Lets customers add order instructions from the cart. The note is attached to the order.
| Setting | What it does |
|---|---|
| Title | Label shown, e.g. "Add special instructions". |
| Placeholder Text | Greyed hint inside the input. |
Coupon Code
A discount code field inside the drawer, so customers do not have to wait until checkout.
| Setting | What it does |
|---|---|
| Coupon Placeholder Text | Hint inside the input. |
| Button Text | Label on the apply button. |
Additional Products
An opt-in add-on the customer can toggle in the cart — typically shipping protection or an order guarantee.
| Setting | What it does |
|---|---|
| Product | The add-on product. |
| Title, Description, Disclaimer | Copy shown beside the toggle. |
| Show Product Image | Show or hide the add-on's image. |
| Show title on checkout button | Include the add-on in the checkout button label. |
| Pricing | Fixed amount, a percentage of cart value, or tiered by cart value. |
How pricing works: the price is calculated live from the cart total using a Shopify Cart Transform, so a percentage-based add-on updates as the cart changes.
About the add-on product: it must be published for Shopify to allow adding it to a cart. CartOn hides it from your storefront automatically — its product page redirects to your home page and links to it are suppressed. If you switch or republish a theme, the app reapplies this automatically.
Express Payment
Shows accelerated checkout buttons (Shop Pay, PayPal, Google Pay, Apple Pay, Amazon Pay) in the drawer.
| Setting | What it does |
|---|---|
| Default / Mobile Button Height | Button sizing, 25–55px. |
| Checkout Button Alignment | Left, Center or Right. |
| Row Gap | Spacing between button rows. |
| Hide Customer Consent | Hides the subscription buyer-consent text. |
Important — this module needs the buttons to already exist on the page. Shopify only renders accelerated checkout buttons where the theme places them. If your theme does not output them, the drawer has nothing to show.
The module page includes a ready-to-paste theme snippet and a Copy Code button. Paste it just below
<body>inlayout/theme.liquid. Alternatively, ask your theme developer or hire a Shopify Expert.
Trust Badge
A reassurance strip near the checkout button.
| Setting | What it does |
|---|---|
| Trust Badge Message | Text shown, e.g. "Secure checkout". |
| Trust Badge Icon Type | Payment Icon (built-in card logos) or Specific Icon (your upload). |
| Trust Badge Icon | Your own image — JPG, PNG or WebP. |
Terms & Conditions
A checkbox the customer must acknowledge before checking out.
| Setting | What it does |
|---|---|
| Checkbox Message | Text beside the checkbox. |
| Link Text, URL Link | Link to your terms page. |
| Checked by default | Pre-tick the box. |
| Must be checked | Block checkout until ticked. |
Checkout Button
| Setting | What it does |
|---|---|
| Button text | Label, e.g. "Checkout". |
| Background / Text color | Colours. |
| Border radius, Font size, Font weight | Shape and type. |
Settings
Cart summary, empty state and wording.
| Setting | What it does |
|---|---|
| Show subtotal row / Subtotal label | The subtotal line. |
| Show total row / Total label | A separate total line. |
| Show total on checkout button | Renders as e.g. Checkout • $540. |
| Show taxes/shipping note + text | Small print under the summary. |
| Summary text color, font size | Styling. |
| Show compare-at price | Strikethrough original price plus savings. |
| Show savings badge / Savings badge text | Badge on discounted lines. |
| Empty Cart Title / Description | Copy shown when the cart is empty. |
Sticky Cart
A floating cart button that stays visible while customers browse, showing the current item count. Configured under Sticky Cart in the main navigation, separately from the Cart Editor.
Settings cover the button's status, colours, radius, and the item-count bubble's text and background colour.
Analytics
The app home page shows attributed revenue for a selected period (7, 15 or 30 days):
| Card | What it counts |
|---|---|
| Upsells | Revenue from products customers added via the drawer's upsell section. |
| Additional Product | Revenue from the add-on / shipping protection module. |
| Total Revenue | The two above, combined. |
How attribution works
When a customer adds a product through an upsell or the add-on toggle, CartOn tags that cart line invisibly. When the order is placed, the app reads those tags and records the line's revenue. Discounts on the line are subtracted, and quantity is accounted for.
What this means in practice
- Only items added through the drawer are counted. A customer who adds the same product from a collection page is not attributed to CartOn.
- Figures reflect the order at the time it was placed. Refunds and cancellations are not currently deducted.
- Revenue is recorded in your shop's currency.
- Reward gifts are free by definition and contribute no revenue.
Attribution starts from the moment the tagging is live in your theme — orders placed before that are not counted retroactively.
Theme compatibility & troubleshooting
CartOn detects and takes over the cart on most themes automatically. It:
- opens the CartOn drawer when your theme's cart icon is clicked,
- keeps your theme's own cart drawer closed and hidden,
- intercepts add-to-cart forms so the drawer updates without a page reload,
- keeps your theme's header cart count in sync.
The cart drawer does not appear at all
- Confirm Cart Drawer is enabled in your live theme (see Quick start). This is the most common cause.
- Confirm Cart Status is set to Enable in the Cart Editor.
- Confirm you enabled the Bridge on the theme that is actually published — enabling it on a draft theme has no effect on your live store.
Both carts open, or the theme's cart flashes first
Your theme uses markup CartOn's automatic detection does not recognise. Fix it in Cart Editor → Basic:
| Field | Use it for |
|---|---|
| Cart Icon Selector | Elements that should open the CartOn drawer when clicked, if your cart icon is not being detected. |
| Hide Element Selector | Your theme's own cart drawer or notification, so it stays hidden. |
| Add To Cart Button Selector | Add-to-cart forms CartOn is not intercepting, on themes with a non-standard form action. |
| Blockers | Class names your theme adds to <body> to lock scrolling or dim the page. Class names only, no leading dot. |
Notes:
- Separate multiple entries with commas or new lines.
- These are added to the built-in detection — they never replace it, so adding one cannot break detection that already works.
- To find a selector, right-click the element on your storefront and choose Inspect,
then use its
id(e.g.#cart-drawer) or a class (e.g..mini-cart).
If you are not comfortable doing this, contact support with your theme name and we will supply the values.
Accelerated checkout buttons are missing
See Express Payment — the buttons must already be rendered somewhere on the theme page. The module page provides the snippet to add.
Rewards discount is not applying
The visual bar and the actual discount are separate. Save the Rewards module once to force the app to recreate its Shopify discount, and check the discount exists and is active under Discounts in your Shopify admin.
Limits and known behaviour
- Reward tiers: minimum 1, maximum 3.
- Trust badge uploads: JPG, PNG and WebP only.
- Express Payment button height: 25–55px.
- Analytics: refunds and cancellations are not deducted; date ranges are 7, 15 or 30 days.
- Draft themes: enabling Cart Drawer only affects the theme you enable it on. Publishing a different theme means enabling it again there.
- The add-on product must remain published for the module to work; CartOn keeps it hidden from customers.
Getting help
Use the Need help or customizations? section on the app home page. When reporting a storefront issue, include your theme name and version — it is the fastest route to a fix, and usually lets support hand you the exact selector values to paste into Basic.