> For the complete documentation index, see [llms.txt](https://bogos-guideline.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-product-discount.md). # 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: 1. In BOGOS Admin, open Customize > Discount > Product Discount. 2. [Customize the Countdown widget](#customize-countdown-widget). 3. [Customize the Discount price display](#customize-discount-price-display). 4. 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. ![](/files/Y0KXGg6jiLH6RXOQ7CHj) ### 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. ![](/files/QgLeq3SFFZiifeFIiUVz) #### General * **Custom discount price display**: Enable to show the discounted price in a compared-at price style. {% hint style="warning" %} If turned off, the product page only shows the original price until it’s added to cart. {% endhint %} * **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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://bogos-guideline.gitbook.io/user-guide/detailed-guide/customize/customize-product-discount.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.