The savings widget shows shoppers the regular price of their cart and how much they save. It counts sale prices (a compare-at price above the current price) and discounts applied to products in the cart. The widget appears only when the cart has savings.
1. Configure the widget
To set up the widget, go to Widgets → Savings widget · Cart page and click Customize.
Go through the Content and Design settings and adjust them to match your store's design and brand voice. Check the result in Preview and click Save.
The setup is different for Online Store 2.0 themes (most current Shopify themes) and vintage themes. Alpha Sale detects your theme type and shows the right options.
2a. Add the widget in an Online Store 2.0 theme
Scroll down to the Placement section and click Add in Theme Editor.
The theme editor opens your cart page template with the Savings widget block already added. Move the block to where you want it and click Save.
Back in Alpha Sale, the App block in Theme Editor section shows Placed. Open your store and check that the widget looks exactly the way you want.
If the app block doesn't work for your theme, turn on Alternative placement methods.
Two more placement options appear. Both need the Alpha Sale app embed to be on.
Placement via CSS selector. We've set up CSS selectors for many popular themes, so the widget may be placed automatically. Make sure the app embed is on, then open your cart page and check where the widget appears.
Manual placement via code snippet. If the CSS selector doesn't put the widget where you want it, add a code snippet to place it exactly where you need.
The app block always comes first. If the block is still in your cart template, the alternative methods show Not used. To use them instead, remove the block in the theme editor.
2b. Add the widget in a vintage theme
Vintage themes don't support app blocks, so the widget is shown through the Alpha Sale app embed. Make sure the app embed is on, then click Activate on the widget card.
The Placement section shows how the widget is placed:
Placement via CSS selector. We've set up CSS selectors for many popular themes, so the widget is often placed automatically. First, open your cart page and check that it appears where you want it.
If you don't see the widget in your cart, or you want it somewhere else, use the other option:
Manual placement via code snippet. To choose the exact spot yourself:
In Shopify admin, go to Online Store → Themes → Edit code.
Open your cart template.
Paste this code where the widget should appear:
<div class="alpha-sale-savings"></div>and click Save.Back in Alpha Sale, click Recheck.
The snippet takes priority over the CSS selector. If you place the snippet, the CSS selector placement shows Not used.
If neither works for your theme, or you'd like help placing the widget — just contact us and we'll set everything up for you.