How to set up and customize the Quantity/Value table widget in Discounty?
Show Quantity discount and Cart goal tiers on product pages and a discount badge on collection cards with the Quantity/Value table widget.
"Buy more, save more" offers only work when customers can see them. The Quantity/Value table widget shows your Quantity discount and Cart goal tiers on the product page, and a small discount badge on product cards while customers browse. You manage both from one page:
A tier table on the product page, so customers can see how much they save as they buy more.
A small discount badge on product cards on your home and collection pages, so the offer shows while customers are still browsing.
The widget only displays the offer. It doesn't change the product price. Your campaign applies the discount.
Before you start
Make sure the Discounty app embed is enabled on your active theme (see How to activate Discounty widgets on your Shopify store?). The Customization page shows a banner if the app embed isn't active.
Have an Active Quantity discount or Cart goal campaign. The table and badge only appear on products included in an Active campaign.
Where to find the widget
In the Discounty app, open Customization.
Select the Quantity/Value table card. It's listed under the Quantity discount and Cart goal filters.
The widget page opens with the title Quantity & volume discount. All settings for the table and the badge are on this page.
Step 1: Choose where the widget shows
At the top of the page, under Display widget on, turn on the places you want:
Product page: shows the tier table on product pages.
Home & collection page: shows the discount badge on product cards outside product pages, such as your home page and collection pages.
The Product page toggle is the main switch for the widget. If it's off, the badge doesn't show on your storefront either, even when Home & collection page is on.
Step 2: Customize the product-page table
The table lists your discount tiers on the product page. It follows the variant the customer has selected, so it only appears when that variant is part of an Active campaign.
Text customization
Under Text customization you can edit two groups of text:
Header texts: the Title (default:
Buy more, Save more), and the "Buy" text and "Get" text column labels.Discount content: how each tier's reward reads:
"Off" text: used for percentage and fixed-amount tiers. The
#{{discount}}variable is required. Discounty replaces it with the tier's value (for example20%or$10). Default:#{{discount}} off.If the discount is taken off each eligible item: extra wording added after the "Off" text when the campaign takes a fixed amount off each item (default:
on each). As the tooltip says, it's only shown if the campaign's "Only apply discount once per order" option isn't ticked.If the "Discount/Price" is set to "New price": used when the campaign sets a new price. The
#{{new-price}}variable is required (default:each item #{{new-price}})."Eligible items" link text: the wording of the link shown under the table, and the title of the window it opens (default:
Eligible items). The field is required. See "Eligible items link" below.
Quantity table
Under Quantity table, choose how tiers are written with Quantity display format:
Range: shows tiers as exact ranges, for example
2 - 4,5 - 7,8+. The last tier always ends with a plus.Plus notation: shows each tier with a plus, for example
2+,5+,8+.
For Cart goal campaigns, the tiers show amounts in your store currency instead of quantities.
Eligible items link
Under the tier table on the product page, shoppers see an Eligible items link. It opens a window listing every product the campaign applies to, with its image, title and a link to the product, so shoppers can find the qualifying products without leaving the page.
The link only appears when the campaign covers 2 or more products.
The list loads 100 products at a time. Select Load more to show the next batch.
If only some options of a product qualify, that product shows Eligible options followed by the matching variants, for example "Eligible options: Blue / M, Blue / L". Products where every option qualifies show no note.
You can change the link wording, which is also the window's title, in Text customization > Discount content > "Eligible items" link text. The default is "Eligible items".
Step 3: Customize the home & collection page badge
When Home & collection page is on, a Home & collection page badge content section appears under Discount content. Pick a Display mode:
Show maximum discount: for example, "Up to 20% off". Edit the wording in Max discount text. The
{discount}variable is required and is replaced by the value of the largest tier.Show lowest price after discount: for example, "From $9.99". Edit the wording in Lowest price text. The
{price}variable is required and is replaced by the lowest price a customer can reach with the largest tier, in your store's currency format.
Both modes take their values from your Active campaign, so there's nothing to enter by hand. The defaults are Up to {discount}% off and From {price}. {discount} is replaced by the number only, so if your campaign uses a fixed amount instead of a percentage, change the text around it.
The badge appears on product cards for products with an Active Quantity discount or Cart goal campaign. Cards without a discount show no badge.
The badge texts can't be translated yet. They show in the language you write them in on every version of your store.
Step 4: Styles
Under Styles you can set:
Table background color and Table text color.
Title color and Border color.
Border radius: how rounded the table corners are (0 to 35 px). The badge uses the same radius.
The Header & badge colors section is optional and defaults to your table colors. Its Header background color and Header text color set the table's header row and are also used for the discount badge on product cards, so the badge always matches your table.
Styles is included on the Lite plan and above. If your plan doesn't include it, a lock icon appears next to Styles. Click it to upgrade. Style fields are also disabled while the Product page toggle is off.
Step 5: Preview and save
The Preview on the right updates as you type:
Switch between the Product page and Collection & home views to check both.
In the product page view, use the Text format switch (Discount / New price) to see how each type of tier reads.
Each section has a Reset to default link if you want to start over. When you're happy with the result, click Save. Your changes go live on your storefront right away.
Translating the widget text
The Title, the column labels, the three discount texts and the "Eligible items" link text can be translated into each language your store sells in, from the Translations section on the same page. The home & collection page badge texts can't be translated. See How do I translate Discounty widgets for a multi-language store?.
When the table or badge doesn't appear
The table or badge is hidden if any of these apply:
The Product page toggle is off. This hides both the table and the badge.
For the badge: the Home & collection page toggle is off.
The product isn't part of an Active Quantity discount or Cart goal campaign. Check that the campaign is Active and that the product (and the selected variant) is in the campaign's product selection.
The Discounty app embed isn't enabled on your active theme.
For the badge: you're on a product page. Product pages show the full table instead.
The campaign targets a purchase type (subscription or one-time) that doesn't match what the customer is viewing.
For the "Eligible items" link: the campaign covers only one product. The link only shows when a campaign covers 2 or more products.
If everything above checks out and the widget still doesn't show, your theme or page builder may need a manual adjustment. Contact support with your theme name.
Custom CSS
The Custom CSS card on this page has two boxes, one for the table and one for the badge. Each applies to its own widget only, and the preview updates as you type. See How to add custom CSS to your Discounty widgets?
Related articles
Need a hand? Contact our support team through the app — we're happy to help.