The Cart Savings widget shows customers exactly how much they're saving before they check out — a running total that updates automatically as they add, remove, or change items in their cart. It's a simple nudge that reinforces the value of a sale and encourages customers to complete their purchase.
Setting it up takes three things: creating a widget, turning on its app embed, and publishing it. Miss any one of the three and it won't appear on your storefront — this guide walks through all of them.
What the Cart Savings widget shows customers
The widget displays a label and a running savings total, for example:
Total savings: $12.50
That total is made up of two things:
Compare-at savings — the difference between a line item's compare-at price and its current price, multiplied by quantity.
Discount savings — any additional amount taken off the cart total by discount codes or automatic discounts.
The widget watches the cart for changes (adding items, updating quantities, applying a discount code) and updates the total live, without a page reload. If a cart has no savings — for example, an empty cart, or a cart with no discounted items — the widget hides itself automatically rather than showing $0.00.
Creating a widget: label text and currency display
In GetSale, go to Cart Savings.
Click Create Widget.
Give it an internal Name (e.g. "Holiday Cart Savings"). This is only for your own reference in the widget list — customers never see it.
Under Content, set:
Label text — the text shown before the amount. Defaults to "Total savings."
Show currency code — when enabled, appends the currency code after the amount (e.g. "$12.50 USD"). Useful on multi-currency storefronts.
A live preview at the top of the page updates as you edit, so you can see roughly how the widget will look before saving.
Enabling the Cart Savings app embed in your theme
Creating a widget doesn't put it on your storefront by itself — the Cart Savings app embed also needs to be turned on in your theme. This only needs to be done once per theme.
The Cart Savings page shows an App Embed Status card at the top, telling you whether the embed is currently Enabled or Disabled for your published theme.
To enable it:
On the Cart Savings page, find the App Embed Status card.
Click Configure App Embed. This opens your theme editor with the app embeds panel already open.
Toggle on GetSale Cart Savings.
Click Save in the theme editor.
If you'd rather do it manually, or you're enabling it on a theme other than your published one:
Go to Online Store > Themes.
Next to the theme you want to edit, click Customize.
In the left-hand panel, click App embeds (usually near the bottom).
Toggle on GetSale Cart Savings.
Click Save.
If you switch to a new theme later, you'll need to enable the app embed again on that theme — embed settings don't carry over automatically.
Publishing a widget (only one can be live at a time)
Creating a widget saves it as a draft — it isn't visible on your storefront until you publish it. Only one Cart Savings widget can be live on your store at a time.
To publish:
On the Cart Savings page, find your widget in the list.
Click Publish. A Published badge appears once it's live.
If another widget is already published, publishing a new one shows a warning:
"This store already has a published cart savings widget. If you proceed to publish the new widget, the currently published widget will be unpublished."
Confirming automatically unpublishes the old widget and publishes the new one — there's no manual unpublish step required first.
When saving a widget you've just created or edited, GetSale will also ask if you'd like to Save & Publish in one step, or Just Save it as a draft.
A couple of things worth knowing:
You can't delete a published widget. Unpublish it first, then delete it.
Unpublishing a widget just takes it off your storefront — it isn't deleted, and you can re-publish it later.
Customizing design: colors, fonts, padding, and plan-gated options
Open a widget (Edit) to reach the Design card, where you can set:
Colors — background color, label text color, and savings amount color, each via a color picker.
Typography — label font size and savings font size (1–35px), and border radius (0–99).
Padding — top, right, bottom, and left, in pixels.
Note: Full design customization requires a Standard plan or higher. On the Basic plan, you can still create, publish, and place a Cart Savings widget — the Design card will show as locked until you upgrade. The Cart Savings widget isn't available at all on the Free plan.
CSS-selector placement and the shop-wide default in Settings
The Placement card on each widget controls where it's injected on the page:
CSS Selector — the element the widget attaches to. Defaults to
.cart__footer, .cart-footer, which matches the cart footer on most Online Store 2.0 themes. Use Reset to return to this default at any time.Position — Above or Below the matched element.
If your theme's cart page uses different markup than the default selector expects, the widget will have nothing to attach to and simply won't appear — see Troubleshooting below.
Setting a shop-wide default: If you find yourself entering the same custom selector every time, set it once in Settings > Widget placement. This section (shared with the Timer and Quantity Breaks widgets) has its own Cart Savings Selector and Cart Savings Placement fields. Whatever you save there becomes the starting selector/position for any new Cart Savings widget you create afterward — it doesn't retroactively change widgets you've already created or edited.
Troubleshooting / FAQ
Nothing is showing up on my storefront. Work through these in order:
Is the widget published? Check for the "Published" badge on the Cart Savings page.
Is the app embed enabled? Check the App Embed Status card — it must say "Enabled," not "Disabled."
Does your CSS selector actually match an element on your cart page? Right-click the area near your cart footer, choose Inspect, and confirm an element with that class or selector exists. If your theme doesn't use
.cart__footeror.cart-footer, update the selector to match your theme.Is there actually anything to save on? If the cart has no compare-at pricing and no discount applied, the widget hides itself — this is expected, not a bug.
I published a second widget and my first one disappeared. That's expected — only one Cart Savings widget can be live at a time. Publishing a new one automatically unpublishes whichever was previously live.
I can't delete a widget. Published widgets can't be deleted directly. Unpublish it first, then delete it.
The Design card is greyed out. Custom colors, fonts, and padding require the Standard plan or higher. You can still use the widget with default styling on the Basic plan.
The default selector in Settings didn't update my existing widget. That's by design — the shop-wide default in Settings only pre-fills the selector for widgets created after you save it. Edit an existing widget's Placement card directly if you want to change its selector.
If you've checked all of the above and the widget still isn't appearing, reach out to us through the GetSale app and our team can take a look — we can usually match a custom design or diagnose a placement issue within 48 hours.