The Volume Pricing Widget allows you to visually display quantity-based or amount-based discounts on your product pages. You can fully customize its layout, colors, text, and styling to match your storefront.
Step 1: Access the App Settings
From your Shopify dashboard, go to Apps.
Open ECA: B2B Wholesale.
From the navigation menu, click Settings.
Navigate to the Volume Breaked Widget section.
Step 2: Preview the Widget
Use Preview Mode to see how the widget will appear on product pages before saving changes.
Preview Types
Quantity Breaker Preview – Displays discounts based on item quantity.
Amount Breaker Preview – Displays discounts based on cart spend amount.
The preview updates in real time as you customize the widget.
Step 3: Select a Widget Template
Select the template that best matches your storefront layout and customer experience.
Step 4: Customize Colors and Styling
Header Styling
Background Color
Text Color
Row Styling
Row Background Color
Row Text Color
Active Row Background – Highlights the applicable discount range
Active Row Text Color
Border Styling
Border Color
Divider Color
Step 5: Border Settings
Fine-tune the widget layout:
Border Size – Set border width (e.g., 1px)
Border Style – Solid, dashed, etc.
Border Radius – Adjust corner roundness (e.g., 8px)
Step 6: Text and Label Settings
Widget Title
Show Title – Toggle title visibility
Title Text – Example: Volume Discounts
Title Color
Title Font Size
Font Sizes
Header Font Size – Table headings
Row Font Size – Discount rows
Quantity Breaker Labels
Quantity Label
Range Label
Discount Label
Amount Breaker Labels
Amount Label
Spend Label
Discount Label
Tip: Custom labels help align the widget language with your store’s tone.
Step 7: Add Custom CSS (Optional)
For advanced styling needs, you can add custom CSS:
.volume-widget-table {
/* Your custom styles */
}
Use this option only if you’re familiar with CSS, as it directly affects the widget’s layout and appearance.
Step 8: Save and Apply
Review the preview to confirm the widget looks as expected.
Save your changes.
The customized volume pricing widget will now appear on applicable product pages.
Best Practices
Maintain high contrast for readability.
Highlight the active discount tier to guide customer decisions.
Keep font sizes consistent with your theme for a seamless look.
Test both quantity and amount previews before saving.