Sidebar widget

The panel that shows what's in the bundle, the total, and the add-to-cart button.

The sidebar is where the customer sees their progress and checks out. Style it in Design → Sidebar Widget.

1 the template picker (currently List Sidebar), 2 the title text, 3 the instruction text with its variable tokens.

Choose a template

Open your builder and go to the Design tab.

Click Sidebar Widget to expand it, then click Choose Template.

Under the template you want, click Select Template. The window closes on its own — or close it with Done.

Template	Layout	Best for
List Sidebar	A running list of chosen items, with the box selector as a dropdown.	Most builders.
Grid Sidebar	Product slots that fill up visually, with the box selector as tabs.	Fixed box sizes — the empty slots pull people to finish.
Buy Box	A floating box pinned to the bottom of the screen — bottom-right on desktop, full width on phones. It appears when the first item is added, and customers can close it with the ×. It has no box selector.	Long product lists where a sidebar would scroll away.

Fill in the title field — List Sidebar Title Text, Grid Sidebar Title Text or Buy Box Title Text, depending on your template. The default is Build a Kit. Leave it empty and no title is shown (the Buy Box then says "added to your bundle").

Fill in Instruction Text. It supports variables — type them exactly as shown:

{maxItems} — how many items the box holds
{remainingItems} — how many more items the customer needs
{selectedItems} — how many items they have so far
{{total_saving}} or {{total_discount}} — the money saved on the current bundle, for example $12.50
{{discount_percentage}} — the selected box's percentage, for example 10% (empty unless the box is % Off)
{{discount_value}} and {{discount_amount}} — the number typed into the selected box. On a Fixed Price box that's the box's price, not the saving.

To insert a variable instead of typing it, click the code icon above the field and choose one. It's added at the end of your text. The menu lists Max Items, Total Discount, Total Saving, Discount Percentage, Discount Amount and Discount Value (Raw) — type {remainingItems} and {selectedItems} yourself.

A good default: Add {maxItems} product(s) to complete your bundle. The instruction shows under the item count (List Sidebar), under the box tabs (Grid Sidebar) or under the total (Buy Box).

Discount badge

The badge sits on the box tabs, so it only exists on the Grid Sidebar.

Choose the Grid Sidebar template. The Discount Badge settings appear at the bottom of the Sidebar Widget section.

Make sure the Discount Badge toggle is on. It is by default.

Write your Badge Text. Three tokens are available: {{discount_amount}}, {{discount_percentage}}, and {{discount_value}} for the raw number without a symbol.

Set Badge Background Color and Badge Text Color.

Each tab shows its own box's badge, and only boxes that have a discount get one. The default SAVE {{discount_amount}}{{discount_percentage}} reads SAVE 10% on a % Off box. On a Fixed Price box it shows the fixed price — SAVE $40.00 on a box that costs $40 — so write your own text for those, such as Box for {{discount_amount}}.

Add to cart button

Add to Cart Button Colors covers the label (Button Text, default Add to Cart), the active colors, and the disabled colors used while the bundle is incomplete. The Buy Box shows the label in capitals.

Make the disabled state visibly muted. Customers should be able to tell at a glance that they still have items to pick.

Skip the cart

In the same section, under Builder Settings, there's one option:

Setting	What it does
Skip cart and go to checkout	Sends customers straight to `/checkout` after they add the bundle, instead of opening the cart.

Worth turning on when the bundle is the order — a build-your-own-box page is often a self-contained purchase, and the cart step just adds a click. Leave it off if you run cart upsells or a free-shipping progress bar that customers should see.

Test a real order after switching it on

Some checkout providers behave differently when the cart is bypassed. Place one test order end to end and confirm the whole bundle arrives at checkout with the right discount.

Sizing and colors

List Sidebar Dimensions and Styling section with the sidebar container sliders, add-to-cart button radius, and bundle content colours numbered

1 the sidebar container width and borders, 2 the add-to-cart button radius, 3 the bundle content colours.

Section	What you control
Dimensions & Styling	Sidebar width (250–450px; List and Grid only), border radius and width, item card borders (List only), tab radius (Grid only) and the add-to-cart button radius. The Buy Box has just border width, border radius and button radius.
Sidebar Colors	Background and border of the sidebar container.
Bundle Content Colors / Typography	Bundle title, price, and item description.
Product Slot Colors	Empty and filled slot borders. Grid layout only.
Box Selector Tabs	Colors and typography of the box size tabs. Grid layout only.

Each section is labelled for the template you selected — List Sidebar Colors, Grid Sidebar Colors, or Buy Box Colors — so you always know what you're editing.

Grid sidebar converts well on fixed boxes

Empty slots create an obvious unfinished task. If your builder uses fixed box sizes, try the Grid Sidebar before anything else.

Want the sidebar somewhere else entirely?

Moving the panel above or below the products grid — rather than beside it — is a job for the Full layout custom template.