Edit and Customisation
Customise Bundle appearance
Your discount card's Template Layout determines how the volume discount offer appears on the product page. This is where you can choose the orientation, styling, and overall visual feel to match your brand and make it intuitive for your customers.
Layout Options
You can choose between Vertical and Horizontal layouts for how your quantity breaks or BOGO deals are displayed.
1. Vertical Layout
Each discount tier (e.g., Buy 2 Get 10%) appears stacked in a vertical list.
Great for mobile users or stores that prefer a clean, scrollable format.
Ideal when you have multiple tiers or want to include product variants.
Bonus: Only vertical layout supports “Let customers choose different variants” for each item.
2. Horizontal Layout
Discount options are displayed in a row format.
Works best for simple offers with fewer tiers (e.g., just 2–3).
Visually compact, perfect for fitting into tighter product page sections.Color Palette & Styling
Once you select a layout, you can also customize the look of your discount widget to match your store's brand.
💡 Tip: Keep contrast high between text and background for better readability.
You can preview all these changes in real-time within the BundleSuite editor before publishing.
Mobile Responsiveness
Both layouts are mobile-optimized, but the vertical layout generally performs better for mobile users, especially when multiple offer tiers or variant selectors are present
Change Bundle Rules & Settings
Once your layout is selected, the Style & Settings section lets you fine-tune the behavior and visual presentation of your volume discount widget. These controls help you improve the customer experience and align the discount display with your brand’s goals.
Key Settings Explained
1. Show Total Price
Purpose: Displays the total discounted amount for the quantity selected.
When this option is enabled, customers see the actual total price they’ll pay for the selected tier (instead of just the per-item discount).
Helpful for: Avoiding confusion and boosting conversion by clearly showing the deal value.
2. Enable Variant Selection (Vertical Layout Only)
Purpose: Allows customers to pick different variants (like color, size, etc.) within the same discounted tier.
Available only when the layout is set to Vertical, this setting lets each item in the tier show variant options — especially useful for fashion, accessories, or any product with options.
3. Display Below Add to Cart Button
Purpose: Controls the position of the discount widget on your product page.
When enabled, the discount widget shifts below the Add to Cart button instead of being above or inline.
Use this to maintain your current product page structure and avoid pushing critical content too far down.
Note: Placement may still depend on your theme's flexibility.
4. Skip Cart Directly to Checkout
Purpose: Speeds up the purchase process by redirecting users directly to checkout after clicking the offer.
Ideal for promotions where urgency matters (e.g., limited-time BOGO or flash sales).
Helps reduce drop-off at the cart stage.
Note: Be cautious if you have upsells or cross-sells in the cart — those will be bypassed.
5. Show Compare-at Price
Purpose: Highlights customer savings visually.
This option displays the original price with a strikethrough next to the discounted price, making the discount more obvious.
It helps reinforce perceived value and urgency to buy.
Advanced Customisation
BundleSuite supports advanced customizations through CSS and JS, allowing full control over styling and interactions.
To customize Discount styles:
Go to Theme Customizer → App Embeds
Open BundleSuite Embed
Use the Custom CSS and Custom JS fields
You can tweak fonts, layout, colors, animations, and more using discount-specific class selectors.
⚠️ For advanced users only — test before going live to avoid design conflicts.
Last updated