Display settings
Learn how to customize how your discount tiers appear on product pages, making them clear and attractive to customers.
Introduction
After creating your Volume Discount rules, the next step is to decide how the offer looks on your store. Display settings control the widget’s layout, wording, translations, and customer experience. A clear, well-designed widget helps shoppers quickly understand the deal and encourages them to buy more.
How to set up
Step 1: Display settings
From the Offer setting screen, click Step 2: Display setting at the top.
The widget editor will open, showing both content options on the left and a live preview on the right.
Choose widget layout
Horizontal – products are shown in a row.
Vertical – products are stacked in a column.
Tip: Horizontal works well for desktop, vertical fits better on mobile. Use the live preview to see which option looks clearer for your products.
Edit content text
Title: The main heading above the discount widget. Example: “Get more, save more.”
Description: Short explanation of the offer. Example: “Unlock greater savings as you purchase more items.”
Translation:
Click the Translation button to add text in other languages.
Select a language from the dropdown.
Enter translations for Title and Description.
Keep variables like
{{product_quantity}}or{{discount_value}}in place—they will automatically update with the correct values.
Redirect after Add to cart
Choose what happens after a customer adds a discounted item:
Current page: Customers stay on the product page.
Cart page: Customers are redirected to their cart immediately.
Keep customers on the product page if you want them to keep shopping; redirect to cart if your goal is faster checkout.
(Optional) Enable Cart tips
Cart tips encourage customers to reach the next tier by showing progress in the cart.
Click Preview to see how tips will look.
Click Edit to customize the tip text.
Example: “Add 1 more item to unlock 25% off.”
If cart tips are not visible, click Contact us for support.
Preview and save
Use the live preview panel on the right to see how the widget looks on desktop and mobile.
Adjust content or layout if needed.
When satisfied, click Save to publish your settings.
Step 2: Theme and content settings
To adjust the widget design and text, click Edit widget at the top of the Display settings section. Inside the editor, you can switch between two tabs: Theme setting and Content setting.
Theme setting
This tab lets you control the visual style of the Volume Discount widget.
Select layout widget
Horizontal or Vertical (already chosen earlier, but adjustable here).
Themes
Select a preset color palette from the swatches.
If widget colors don’t match your theme, you may see: “Widget color doesn’t match your theme.”
Use Sync theme color (if available) or Check my theme to request support if syncing is disabled.
Styles – Background
Enable Gradient background (optional).
Background color: set the main widget background.
Styles – General
Header text color: color for the widget title (“Get more, save more”).
Badge color: highlight tier badges (e.g., “Most Popular”).
Tag saving color: highlight savings labels (e.g., “Save 20%”).
Icon/text colors: customize colors for badges and saving tags.
Stroke color: outline around elements.
Styles – Button
Gradient background (optional).
Button background color.
Button text color.
Content setting
This tab lets you control the text and wording inside the widget.
Tier content
“Add to cart” button. Example: Add to cart.
“Item added to your cart” button. Example: Item added to your cart.
“See more” label: expands tier list. Example: See more.
“See less” label: collapses tier list. Example: See less.
“Free” text: label for free gifts. Example: Free.
“Saving” text: label for savings. Example: Save.
Translations
Click the Translation button.
Select a language and enter translations for all text labels.
Keep placeholders intact (e.g.,
{{discount_value}}or{{product_quantity}}).Example: “Save” → Sparen in German.
Step 3: Preview and save
Use the live preview panel on the right to see how the widget looks on desktop and mobile.
Adjust colors and text until the widget matches your brand and is easy to read.
Click Save to apply changes.
Your Volume Discount widget is now fully customized 🎉. By combining clear text with consistent branding, you’ll make it easier for customers to see the value of buying more and boost your sales.
Last updated