Display settings
Learn how to set up the appearance of Bundle Builder in this following guideline.
Once you’ve set up your bundle offer and customized the widget text, you can adjust the look and feel of the bundle page. To do this, click the Edit widget button under Customize widget.
The system will open the Display Settings screen with two tabs: Theme setting and Content setting.
How to set up
Theme settings
Step 1: Pick a theme preset
Click a Theme color swatch to apply a preset.
If colors don’t match your storefront, try another preset.
If you see “Widget color doesn’t match your theme”, click Check my theme. Sync theme color may be disabled when there’s a theme conflict.
Step 2: Set general colors
Header color: set the title color (e.g., “Build Your Perfect Bundle”).
Total price color: set the color used for the total in the Bundle summary.
Step 3: Style the buttons
Turn Gradient background on or off.
Set Background color start and Background color end.
Set Text color on button (e.g., for Add to Bundle / Add Bundle to cart).
Step 4: Style the bundle summary
Background color: set the summary panel background (subtotal, discount, total).
Text color: set the summary text color.
Step 4: Style the bundle summary
Use Desktop / Mobile preview on the right.
Adjust until headings, buttons, and totals are readable.
Click Save (top right) to keep the style changes.
Content setting (labels & dynamic text)
Step 1: Edit button labels
“Add to Bundle” label This is the text shown on each product card button that adds an item to the bundle.
“Add Bundle to cart” label The text shown on the main checkout button in the Bundle Summary box.
Step 2: Edit product list labels
“View products” label
Text for the link that lets customers see all available products in the bundle. Often used with the variable ({{product_quantity}}) to display how many products are listed.
“Selected” label Text shown above each product card that indicates how many units have been chosen.
Step 3: Edit bundle summary labels
“Bundle Summary” label
Title at the top of the summary panel, where totals and discounts are shown. You can use variables like ({{product_quantity}}) to show item count.
“Subtotal” label Text that appears before the pre-discount total amount.
“Bundle discount” label Text that indicates how much customers are saving with the discount.
“Total” label Final payable amount after the discount.
Step 4: Configure progress bar text
Progress bar
Short line of text showing bundle progress. Usually includes {{product_quantity}} to display how many products are selected.
Product quantity “items” label Defines how the word “items” is shown next to the count.
Discount “off” label → Defines how the discount is displayed. Often uses the variable
“Total” label Final payable amount after the discount.
Step 5: Add translations (optional)
Click Translation to localize all labels into different languages.
Select the language (e.g., German, French).
Enter translations for each label.
Keep variables like {{product_quantity}} or {{discount_amount}} unchanged so they remain dynamic.
Click Save to apply the settings.
Your Bundle Builder display is all set! 🎉 A well-styled widget makes shopping fun, clear, and rewarding, so customers add more and you grow your AOV. Preview, save, and enjoy watching your bundles shine! ✨
Last updated