Customize Product Discount
This doc explains how to customize the discount display of your product and the Countdown widget - helping you show the discounted price clearly and create urgency with a timer on your product pages.
Customizing these with BOGOS includes the 4 steps:
In BOGOS Admin, open Customize > Discount > Product Discount.
Click Save.
Customize Countdown Widget
The Countdown widget appears on your product pages to show customers how much time is left on the discount, creating urgency to buy before the offer ends.
General
Enable countdown widget: Show the countdown timer on your product pages. The countdown displays based on your offer's Start/End time and Repeat discount in a time range settings.
Widget style: Choose between Bar (slim look) or Banner (more attention).
Wrap number background: Add a background block behind each countdown digit.
Show labels (for Banner widget style only): Enable to display text labels below each countdown unit. You can customize all the label text available.
Widget border radius: Drag the slider (0–24px) to adjust the corner roundness of the widget. The background behind each digit rounds at half that value automatically.
Color
BOGOS allows you to customize the colors of all elements with any of the 3 methods below:
Choose a ready-made color set from the dropdown.
Manually adjust each color field for all the available colors.
Contact the BOGOS support team to get help with color customization.
Click Save when done.
Customize Discount Price Display
The Discount price display appears on your product pages to show customers the discounted price and how much they are saving.
General
Custom discount price display: Enable to show the discounted price in a compared-at price style.
If turned off, the product page only shows the original price until it’s added to cart.
Show discount label: Show a label next to the price to display the discount. When enabled, set:
Discount label: The discount text shown on the label. Use {{discount_amount}} to dynamically display the discount value (e.g., "10% OFF").
Typography
Discount price: Set the font size and weight (Regular or Bold) for the discounted price.
Original price: Set the font size and weight (Regular or Bold) for the original price.
Cross out original price: Enable to display the original price with a strikethrough (e.g., $165).
Color
BOGOS allows you to customize the colors of all elements with any of the 3 methods below:
Choose a ready-made color set from the dropdown.
Manually adjust each color field for all the available colors.
Contact the BOGOS support team to get help with color customization.
Click Save when done.
Need Help?
If you need any assistance, feel free to reach out to our customer support team via live chat within our BOGOS app.
Last updated
Was this helpful?