> For the complete documentation index, see [llms.txt](https://docs.bogos.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bogos.io/detailed-guide/customize/customize-volume-discount.md).
# Customize Volume Discount
Overview of customizing the appearance of the Volume discount on the product page.
BOGOS provides 2 widget types for Volume Discount offers:
1. Quantity Options
2. Quantity Discount Table
Each widget has its own content and display settings, allowing you to control exactly what customers see.
## 1. Quantity options
### 1.1 Content
**Show description:** Enable to display a description below the title (e.g: Best deals selected for you!).
**Each tier will show** (choose between):
* Total price: Shows the full price of each tier (e.g: $50)
* Price per item: Shows the price for each item of each tier. Enter per item text to make it clearer (e.g: $10 per item)
**Options to change text:**
* Text format: Edit the discount label shown on each tier. Keep the variable {{discountAmount}} to dynamically display the discount value.
* Total price text: The label shown next to the total price.
* Button text (the text on the button of the widget): The text displayed on the widget's action button.
* Select variant text: The text shown when customers need to select a product variant.
**Shipping discount:** select available shipping icons or upload your own (Accepts image, gif.)
**Subscription:** display subscription options within the widget (if you're set up in Create Volume Discount).
1\. Select a layout: choose between Radio or Checkbox.
2\. Edit the following text fields:
* Subscription title: The heading shown above the subscription options.
* Option label: The label text for each subscription option.
### 1.2 Color
BOGOS allows you to customize the colors of all elements with any of the 4 methods below:
* Choose a **ready-made color set** from the dropdown.
* **Manually adjust** each color field for all the available colors.
* Use [AI Theme Detector](/detailed-guide/customize/ai-theme-detector.md) to auto-generate a full widget color palette based on your store's branding.
* **Contact the BOGOS support team** to get help with color customization.
Click **Save** when done.
### 1.3 Add-on
Customize how add-ons appear on the widget. Each offer can have its own set of add-ons.
**Countdown:** Show a countdown timer to motivate customers to buy before the offer ends.
* **Choose countdown display mode:** Top bar / In-widget bar / Banner / Badge.
* **Countdown text:** The text shown next to the countdown (e.g., "Expiring in").
* **Countdown content align:** Left, Center, or Right.
* **Countdown background style:** Flat color or Gradient color.
* **Customize colors for:** Background, Number text, Number wrap, Description text.
**Free gift:** Customize how the free gift indicator and gift section appear.
* **Select icon:** Choose from available gift icons or upload your own (image or gif).
* **Customize colors for:** Label color, Label text.
* **Gift section title:** The heading above the gift product list.
* **Free price text:** The text shown as the price of each gift (e.g., "FREE").
**Shipping discount:** Customize how the shipping discount banner appears.
* **Shipping icon:** Choose from available shipping icons or upload your own.
* **Customize colors for:** Banner color, Banner text.
## 2. Quantity discount table
### 2.1 Content
**Show description:** Enable to display a description below the title (e.g, Best deals selected for you!).
**Each tier will show** (choose among):
* Discount value: Shows the discount of each tier (e.g: 20% OFF)
* Discount value with label: Shows the discount of each tier with a background color.
* Total price: Shows the full price of each tier (e.g: $50)
* Price per item: Shows the price for each item of each tier. Enter per item text to make it clearer (e.g: $10 per item)
**Text format:** Edit the discount label shown on each tier. Keep the variable {{discountAmount}} to dynamically display the discount value.
**Shipping discount:** select available shipping icons or upload your own (Accepts image, gif.)
### 2.2 Display
**Widget header & description**: Select their alignment on the widget among Left, Center, or Right.
**Body style**: Choose how the table rows are visually separated between Line or Zebra.
**Hide lines between column** (optional): Remove the vertical dividers between table columns for a cleaner appearance.
### 2.3 Color
BOGOS allows you to customize the colors of all elements with any of the 4 methods below:
* Choose a **ready-made color set** from the dropdown.
* **Manually adjust** each color field for all the available colors.
* Use [AI Theme Detector](/detailed-guide/customize/ai-theme-detector.md) to auto-generate a full widget color palette based on your store's branding.
* **Contact the BOGOS support team** to get help with color customization.
Click **Save** when done.
### 2.4 Add-on
Customize how add-ons appear on the widget. Each offer can have its own set of add-ons.
**Countdown:** Show a countdown timer to motivate customers to buy before the offer ends.
* **Choose countdown display mode:** Top bar / In-widget bar / Banner / Badge.
* **Countdown text:** The text shown next to the countdown.
* **Countdown content align:** Left, Center, or Right.
* **Countdown background style:** Flat color or Gradient color.
* **Customize colors for:** Background, Number text, Number wrap, Description text.
**Shipping discount:** Customize how the shipping discount banner appears.
* **Shipping icon:** Choose from available shipping icons or upload your own.
* **Customize colors for:** Banner color, Banner text.
## 3. Add Volume Discount to other pages besides Product Page
{% hint style="info" %}
You can place the Volume discount block on any page of your store, except the Checkout page.
{% endhint %}
**Step 1:** Navigate to your **Online Store** in the **Shopify navigation menu** => choose **Themes** => **Customize**
**Step 2:** In the **Shopify Theme Editor**, go to the page where you want to add the **Volume discount** block.
Then, on the left panel, scroll down, click **Add section**, choose **Apps**, find and select **BOGOS: Volume Discount** block.
**Step 3**: In the top-right panel, complete the setup fields.
* **Offer ID**: Enter the ID of the Volume discount offer you want to display.
* **Product show**: Select a product from your store. All Volume discount offers linked to this product will be displayed on the current page.
For more details, please visit our \[[Adjust BOGOS Blocks](/quick-start-guide/adjust-bogos-blocks.md)].
## 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://docs.bogos.io/detailed-guide/customize/customize-volume-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.
* **Choose countdown display mode:** Top bar / In-widget bar / Banner / Badge.
* **Countdown text:** The text shown next to the countdown.
* **Countdown content align:** Left, Center, or Right.
* **Countdown background style:** Flat color or Gradient color.
* **Customize colors for:** Background, Number text, Number wrap, Description text.
**Shipping discount:** Customize how the shipping discount banner appears.
* **Shipping icon:** Choose from available shipping icons or upload your own.
* **Customize colors for:** Banner color, Banner text.
## 3. Add Volume Discount to other pages besides Product Page
{% hint style="info" %}
You can place the Volume discount block on any page of your store, except the Checkout page.
{% endhint %}
**Step 1:** Navigate to your **Online Store** in the **Shopify navigation menu** => choose **Themes** => **Customize**
**Step 2:** In the **Shopify Theme Editor**, go to the page where you want to add the **Volume discount** block.
Then, on the left panel, scroll down, click **Add section**, choose **Apps**, find and select **BOGOS: Volume Discount** block.
