Full bundle page
Studio
The recommended guided box builder, with campaign-led steps, catalog search and filters, a live summary, and a final review.
Built for: Most stores — especially gift boxes, routines, meal kits, sample packs, and larger catalogs that benefit from a guided flow.
Interactive demo
Use the controls merchants actually get.
The catalog data is illustrative. Every configurable section and block setting, plus each folded variant, is synced from the committed Liquid schema.
Custom bundle · illustrative catalogBuild your boxAdd 1 more to unlock 15%
Campaign coverage
How Studio handles each offer.
The four campaign tabs in the demo show one illustrative state per supported builder mode, including selectable, preselected, and locked gift states. Fixed bundles use a standard product page and expand at checkout.
| Campaign state | Rendering in this design |
|---|---|
| Custom bundle | Product selection, progress, qualifying step, totals, and add-to-cart. |
| Build-a-box sections | Named groups and live section counts within the shared storefront payload. |
| Quantity breaks | Compatible rendering through the design’s product and step UI. |
| Free gifts | Selectable, preselected, and locked gift states; locked gifts can render as Included free. |
| Fixed bundle | Not applicable. Shoppers buy the fixed parent product through its standard product form. |
Every setting
The schema, rendered without drift.
139 settings across the section and its reorderable blocks.
| Group | Setting | Type | Options | Default | What it changes |
|---|---|---|---|---|---|
| Section | Campaign ID (optional) | text | — | Theme default | Empty = automatic: on a product page, the campaign whose bundle product this is; otherwise the highest-priority published campaign with a landing placement. IDs (cmp-…) appear in the app's campaign editor URL and Diagnostics page. |
| Section | Heading | text | — | Build your box | Controls this part of the section in the Theme Editor. |
| Section | Subheading | text | — | A few easy steps — pick your favorites, we’ll handle the rest. | Controls this part of the section in the Theme Editor. |
| Section | Summary heading | text | — | Your box | Controls this part of the section in the Theme Editor. |
| Section | Summary | select | Sticky sidebar, Bottom bar | side | Phones always use the bottom bar with a pull-up summary. |
| Section | Keep the sidebar visible while scrolling | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Section | Sticky offset (fallback) | range | — | 80 | The stepper and sidebar sit below your theme header automatically. This is a minimum used only if no sticky header is found. |
| Section | Accent color | color | — | #e94f64 | Controls this part of the section in the Theme Editor. |
| Section | Gift accent color | color | — | #b8863b | Controls this part of the section in the Theme Editor. |
| Section | Text color | color | — | #191817 | Controls this part of the section in the Theme Editor. |
| Section | Card background | color | — | #ffffff | Controls this part of the section in the Theme Editor. |
| Section | Summary background | color | — | #ffffff | Controls this part of the section in the Theme Editor. |
| Section | Summary text color | color | — | #191817 | Controls this part of the section in the Theme Editor. |
| Section | Section background | color | — | Theme default | Leave empty to inherit the theme background. |
| Section | Image fit | select | Cover (crop to fill), Contain (show whole product) | cover | Cover fills the shape and crops edges; Contain shows the whole product without cropping. |
| Section | Card frame | select | Boxed, Bare | box | Boxed draws a border and background around each card; Bare removes them so the image runs edge to edge and blends into the page. |
| Section | Corner style | select | Rounded, Soft, Square | rounded | Controls this part of the section in the Theme Editor. |
| Section | Button style | select | Rounded, Pill | rounded | Controls this part of the section in the Theme Editor. |
| Section | Content width | range | — | 1280 | Controls this part of the section in the Theme Editor. |
| Section | Variant options | select | Color swatches and buttons, Buttons, Dropdowns | swatches | Products with multiple options show one row per option, such as Color and Size. |
| Section | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Section | Step kicker ({step}, {steps}) | text | — | Step {step} of {steps} | Controls this part of the section in the Theme Editor. |
| Section | Products step label | text | — | Choose your items | Controls this part of the section in the Theme Editor. |
| Section | Review step label | text | — | Review | Controls this part of the section in the Theme Editor. |
| Section | Review step sub-label | text | — | Confirm | Controls this part of the section in the Theme Editor. |
| Section | Review heading | text | — | Review your box | Controls this part of the section in the Theme Editor. |
| Section | Review empty state | text | — | Nothing added yet — step back and pick something. | Controls this part of the section in the Theme Editor. |
| Section | Back button | text | — | ← Back | Controls this part of the section in the Theme Editor. |
| Section | Continue button | text | — | Continue | Controls this part of the section in the Theme Editor. |
| Section | Continue to review button | text | — | Review your box | Controls this part of the section in the Theme Editor. |
| Section | Skip optional step button | text | — | Skip this step | Controls this part of the section in the Theme Editor. |
| Section | Step minimum hint ({remaining}, {label}) | text | — | Add {remaining} more to continue | Controls this part of the section in the Theme Editor. |
| Section | Swap button on full single-choice steps | text | — | Choose this instead | Controls this part of the section in the Theme Editor. |
| Section | Remove label | text | — | Remove | Controls this part of the section in the Theme Editor. |
| Section | Edit step label | text | — | Edit | Controls this part of the section in the Theme Editor. |
| Section | Summary title | text | — | Your box | Controls this part of the section in the Theme Editor. |
| Section | Open summary label (phones) | text | — | View box | Controls this part of the section in the Theme Editor. |
| Message bar | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Message bar | Show progress track | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Message bar | Show discount labels on the track | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Message bar | Empty state | text | — | Add your first product to start your box | Controls this part of the section in the Theme Editor. |
| Message bar | Progress ({remaining}, {label}, {discount}) | text | — | Add {remaining} more to unlock {discount}% off | Controls this part of the section in the Theme Editor. |
| Message bar | Gift prompt ({remaining}) | text | — | Nice! Choose your free gift | Controls this part of the section in the Theme Editor. |
| Message bar | Ready ({discount}) | text | — | {discount}% off unlocked — add your box to the cart! | Controls this part of the section in the Theme Editor. |
| Message bar | Adding | text | — | Adding your box… | Controls this part of the section in the Theme Editor. |
| Message bar | Added | text | — | Your box is in the cart 🎉 | Controls this part of the section in the Theme Editor. |
| Message bar | Over largest box | text | — | You’ve exceeded the largest box size — remove some items | Controls this part of the section in the Theme Editor. |
| Message bar | Step below minimum ({remaining}, {label}) | text | — | Add {remaining} more to {label} | Controls this part of the section in the Theme Editor. |
| Message bar | Items count ({count}) | text | — | {count} in your box | Controls this part of the section in the Theme Editor. |
| Message bar | Editing a carted box | text | — | You’re editing a box from your cart — updating replaces it. | Controls this part of the section in the Theme Editor. |
| Message bar | Editing: unavailable items ({dropped}) | text | — | Heads up: {dropped} item(s) from your original box are no longer available and won’t be included. | Controls this part of the section in the Theme Editor. |
| Message bar | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Countdown timer | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Countdown timer | Label | text | — | Ends in | Controls this part of the section in the Theme Editor. |
| Countdown timer | Ended text | text | — | Offer ended | Controls this part of the section in the Theme Editor. |
| Products | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Products | Columns (desktop) | range | — | 4 | Controls this part of the section in the Theme Editor. |
| Products | Columns (tablet) | range | — | 3 | Controls this part of the section in the Theme Editor. |
| Products | Columns (phones) | range | — | 2 | Controls this part of the section in the Theme Editor. |
| Products | Image shape | select | Square, Portrait, Landscape | 1/1 | Controls this part of the section in the Theme Editor. |
| Products | Add button label | text | — | Add to box | Controls this part of the section in the Theme Editor. |
| Products | Added button label | text | — | Added | Controls this part of the section in the Theme Editor. |
| Products | Show product badges | checkbox | — | Off | Short labels like New or Refillable, from the badges saved on each product. |
| Products | Show review stars | checkbox | — | Off | Uses the rating your reviews app saves on each product. |
| Products | Review count suffix | text | — | Theme default | Shown after the number, e.g. (128 Reviews). Leave empty to show only the number. |
| Products | Per-product limit note ({max}) | text | — | Limit {max} per product | Controls this part of the section in the Theme Editor. |
| Products | Sold-out products | select | Hide them, Show them grayed out | hide | Controls this part of the section in the Theme Editor. |
| Products | Sold out label | text | — | Sold out | Controls this part of the section in the Theme Editor. |
| Products | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Products | Show the toolbar from | range | — | 9 | Controls this part of the section in the Theme Editor. |
| Products | Search | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Products | Search placeholder | text | — | Search items in this step | Controls this part of the section in the Theme Editor. |
| Products | Sorting | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Products | Sort: featured | text | — | Featured | Controls this part of the section in the Theme Editor. |
| Products | Sort: price up | text | — | Price: low to high | Controls this part of the section in the Theme Editor. |
| Products | Sort: price down | text | — | Price: high to low | Controls this part of the section in the Theme Editor. |
| Products | Sort: title A–Z | text | — | Title: A to Z | Controls this part of the section in the Theme Editor. |
| Products | Sort: title Z–A | text | — | Title: Z to A | Controls this part of the section in the Theme Editor. |
| Products | Filters | checkbox | — | On | Filter chips are built from each product's options (like Color or Size) and the step's price range. |
| Products | Filter button label | text | — | Filter | Controls this part of the section in the Theme Editor. |
| Products | Load products in pages | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Products | Products per page | range | — | 24 | Controls this part of the section in the Theme Editor. |
| Products | Load more button ({count}) | text | — | Show more ({count} left) | Controls this part of the section in the Theme Editor. |
| Products | Result count ({count}) | text | — | {count} products | Controls this part of the section in the Theme Editor. |
| Products | Result count, paged ({shown}, {count}) | text | — | Showing {shown} of {count} | Controls this part of the section in the Theme Editor. |
| Products | No results heading | text | — | No products found | Controls this part of the section in the Theme Editor. |
| Products | No results hint | text | — | Try a different search or clear the filters. | Controls this part of the section in the Theme Editor. |
| Products | Clear filters label | text | — | Clear all filters | Controls this part of the section in the Theme Editor. |
| Products | Selected items hidden note ({count}) | text | — | {count} selected item(s) are not shown right now. | Controls this part of the section in the Theme Editor. |
| Products | Show hidden items button | text | — | Show them | Controls this part of the section in the Theme Editor. |
| Products | Price filter label | text | — | Price | Controls this part of the section in the Theme Editor. |
| Products | Price filter: under ({price}) | text | — | Under {price} | Controls this part of the section in the Theme Editor. |
| Products | Price filter: over ({price}) | text | — | Over {price} | Controls this part of the section in the Theme Editor. |
| Products | Step status ({count}, {max}) | text | — | {count} of {max} chosen | Controls this part of the section in the Theme Editor. |
| Products | Step status, no max ({count}, {min}) | text | — | {count} chosen — pick at least {min} | Controls this part of the section in the Theme Editor. |
| Products | Step status, optional ({count}) | text | — | {count} chosen | Controls this part of the section in the Theme Editor. |
| Products | Step full note | text | — | This step is full — remove an item to choose another | Controls this part of the section in the Theme Editor. |
| Products | Tier deal ({min}, {discount}) | text | — | Buy {min}+ — save {discount}% | Controls this part of the section in the Theme Editor. |
| Products | Per-unit price ({price}) | text | — | {price} each | Controls this part of the section in the Theme Editor. |
| Quick view | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Quick view | Photo hover label | text | — | Quick view | Controls this part of the section in the Theme Editor. |
| Quick view | Show the price | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Quick view | Show review stars | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Quick view | Show badges as checkmarks | checkbox | — | On | The product's badges, listed like feature checkmarks. |
| Quick view | Show the description | checkbox | — | On | Loads the product's own description when the window opens. |
| Quick view | Description length | select | Short, Medium, Long | medium | Controls this part of the section in the Theme Editor. |
| Quick view | Show an add button | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Quick view | Add button label | text | — | Add to box | Controls this part of the section in the Theme Editor. |
| Quick view | Added button label | text | — | ✓ Added | Controls this part of the section in the Theme Editor. |
| Quick view | Link to the product page | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Quick view | Product page link label | text | — | View full details | Controls this part of the section in the Theme Editor. |
| Free gifts | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Free gifts | Gift step label | text | — | Choose your gift | Controls this part of the section in the Theme Editor. |
| Free gifts | Gift step sub-label | text | — | Free with your box | Controls this part of the section in the Theme Editor. |
| Free gifts | Locked hint ({remaining}) | text | — | Add {remaining} more item(s) to unlock your free gift | Controls this part of the section in the Theme Editor. |
| Free gifts | Pick hint, exact ({count}) | text | — | Choose {count} | Controls this part of the section in the Theme Editor. |
| Free gifts | Pick hint, range ({min}, {max}) | text | — | Choose {min}–{max} | Controls this part of the section in the Theme Editor. |
| Free gifts | Pick hint, up to ({count}) | text | — | Choose up to {count} | Controls this part of the section in the Theme Editor. |
| Free gifts | Gift card flag | text | — | Free gift | Controls this part of the section in the Theme Editor. |
| Free gifts | Free price label | text | — | FREE | Controls this part of the section in the Theme Editor. |
| Free gifts | Gift card, not chosen | text | — | Choose this gift | Controls this part of the section in the Theme Editor. |
| Free gifts | Gift card, chosen | text | — | ✓ Chosen | Controls this part of the section in the Theme Editor. |
| Free gifts | Guaranteed-gift label | text | — | Included free | Shown on a preselected gift the customer can't change. |
| Free gifts | Reset gifts label | text | — | Reset to the included gifts | Controls this part of the section in the Theme Editor. |
| Totals | Subtotal label | text | — | Subtotal | Controls this part of the section in the Theme Editor. |
| Totals | Discount label | text | — | Discount | Controls this part of the section in the Theme Editor. |
| Totals | Total label | text | — | Estimated total | Controls this part of the section in the Theme Editor. |
| Totals | Show a savings line | checkbox | — | Off | The discount plus the value of any free gifts, using the wording below. |
| Totals | Savings line ({value}) | text | — | You save {value} | Controls this part of the section in the Theme Editor. |
| Add to cart | Button label | text | — | Add box to cart | Controls this part of the section in the Theme Editor. |
| Add to cart | Button label while items are needed ({remaining}) | text | — | Theme default | Shows on the button until the box qualifies, for example "Add {remaining} more items". Leave blank to keep the main label. |
| Add to cart | Show the total on the button | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Add to cart | Show the button only on the Review step | checkbox | — | Off | Controls this part of the section in the Theme Editor. |
| Add to cart | Button label while editing a carted box | text | — | Update box | Controls this part of the section in the Theme Editor. |
| Add to cart | Updated message | text | — | Your box is updated 🎉 | Controls this part of the section in the Theme Editor. |
| Add to cart | Show error messages | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Add to cart | Open the cart after adding | checkbox | — | On | Opens your theme's cart drawer when the bundle is added. Themes that don't support this ignore it. |
| Add to cart | View cart label | text | — | View cart | Controls this part of the section in the Theme Editor. |
| Add to cart | Build another label | text | — | Build another box | Controls this part of the section in the Theme Editor. |
Text and labels
Your words stay in the theme.
Generic storefront wording is theme-owned. The campaign keeps only the cart title and each step’s message and badge.
Before and after
Section · HeadingBuild your box
Build your summer set
Editable in this design
- Campaign ID (optional)Section
- HeadingSection
- SubheadingSection
- Summary headingSection
- Step kicker ({step}, {steps})Section
- Products step labelSection
- Review step labelSection
- Review step sub-labelSection
- Review headingSection
- Review empty stateSection
- Back buttonSection
- Continue buttonSection
Reorderable blocks
Keep what earns its place.
Removing a block removes that presentation layer, not the checkout rule. Shopify still validates the price.
01
Message bar
Removes the progress, ready, and status message area.
02
Countdown timer
Removes the schedule-bound countdown from this design.
03
Products
Removes the product or quantity selection surface.
04
Quick view
Removes the optional product quick-view modal.
05
Free gifts
Removes the dedicated free-gift presentation area.
06
Totals
Removes the illustrative subtotal, savings, and total display.
07
Add to cart
Removes the design’s add-bundle button.
Installation paths
Pick the least complicated path that fits.
01
Theme app block
The standard no-theme-write route. It uses the app-block renderer rather than installing this committed design file.
02
One-click is gated
This path stays hidden in production until the protected theme-write capability is available.
03
Manual install
Copy the self-contained section, then create or assign the corresponding page or product template.
Remixable display layer
Change the presentation without changing the pricing authority.
The theme renders the campaign, the storefront engine owns selection and cart intent, and Shopify checkout validates the result.
Three layers, one direction
- Theme and published Shopify data
- Selection and cart engine
- Shopify checkout pricing