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:
Quantity Options
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 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.
AI Theme Detector
BOGOS AI scans your online store and detects your brand's primary, secondary, and text colors, then generates a full widget color palette automatically.
Your store must NOT be password-protected for AI to access and detect your brand colors.
To edit the colors with BOGOS AI:
Click the pen icon.
Click Scan again to let BOGOS AI re-detect, or manually adjust the Primary color, Secondary color, or Text fields.
Click Apply for preview to apply the colors to the widget preview.
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 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.
AI Theme Detector
BOGOS AI scans your online store and detects your brand's primary, secondary, and text colors, then generates a full widget color palette automatically.
Your store must NOT be password-protected for AI to access and detect your brand colors.
To edit the colors with BOGOS AI:
Click the pen icon.
Click Scan again to let BOGOS AI re-detect, or manually adjust the Primary color, Secondary color, or Text fields.
Click Apply for preview to apply the colors to the widget preview.
3. Add Volume Discount to other pages besides Product Page
You can place the Volume díccount block on any page of your store, except the Checkout page.
Step 1: Navigate to your Online Stores 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].
Last updated