How to set up an Inpage BYOB bundle in Flash Box Builder

A build-your-own bundle normally gets a page of its own, laid out by the app. That is great for a big “build your box” moment, but some stores want the bundle to look like every other product they sell: same header, same title, same fonts, the builder sitting where the buy button usually is.

That is what Inpage BYOB in Flash Box Builder does. It is the same mix-and-match builder as the BYOB bundle, fitted into your theme’s own product page. This post sets one up from scratch, publishes it on a real store, and covers the few things worth knowing.

The Create a Bundle page in Flash Box Builder with the Inpage BYOB tab selected: a drawing of a product page where the builder sits beside the product photo, with tiers of 2 items 10% off and 4 items 20% off, a Vases & Stems set and an Add To Cart button for $45.00, next to the key features and a Create Bundle button — Inpage BYOB is the third tab on the Create a Bundle page.

Create the bundle

Open Flash Box Builder, go to Bundles and click Create New Bundle.
Pick the Inpage BYOB tab and click Create Bundle. The editor opens with settings on the left and a live preview on the right. Nothing is saved until you click Save.
Under Bundle details, give it a Bundle name. It becomes the title of the bundle’s product page. The Bundle description becomes that product’s description, so it shows wherever your theme shows one.

The Inpage BYOB editor: a Finish this bundle checklist at 3 of 4, Bundle details with the name Snow Day Kit and the description Pick any 3 pieces and save 10%. Make it 5 and save 15%, and a preview with tier buttons for 3 items 10% off and 5 items 15% off above a Boards & wax set of snowboards — The checklist at the top tracks what is left before the bundle can go live.

One thing to be clear on: an Inpage bundle does not attach itself to a product you already sell. When you save, the app creates a new product for the bundle, and the builder shows up on that product’s page, inside your theme’s layout.

Products, limits and the discount

This part works exactly like a regular BYOB bundle. In Products, give the set a Set name and Set description, choose Products or a Collection, and click Select products. Add more sets with Add Another Set.

Limit selections sets Minimum items and Maximum items for a set. The shopper cannot add the bundle to the cart until the minimum is met.
Discount is No discount, Flat percentage off or Add tiered discounts. A new bundle starts with 3 items for 10% and 5 items for 15%.

Limit selections switched on with a minimum of 3 and a maximum of 6, the Discount section set to Add tiered discounts, and a preview where three snowboards are picked, the 3 items 10% off tier is highlighted, the set header reads 3/6, and a line says Add 2 more to get 15% off — Three picked: the first tier lights up and the builder points at the next one.

Place it on the product page

This is where Inpage differs. There are no templates to pick, because the builder takes its look from your theme’s page. Instead, the Appearance tab has Container, Products, Layout and Texts. Open Layout:

Widget Position: Above the buy buttons (the default), Below the buy buttons, or at the top or bottom of the product details.
Hide The Theme’s Add To Cart: on by default. Leave it on. The theme’s own button can only add the empty bundle product, not what the shopper picked.
Hide The Theme’s Price: off by default. Switch it on, for the reason below.
Set Display: Accordion, sets that open and close, or All sets expanded. Further down, switches show or hide each part of the builder: the tiers, the progress line, the savings, and a sticky Add To Cart on phones.

The Appearance tab with the Layout section open: Placement On The Product Page with Widget Position set to Above the buy buttons, Hide The Theme's Add To Cart switched on, Hide The Theme's Price switched off, and Set Display set to Accordion — Layout decides where the builder sits and what of your theme it replaces.

Publish it

Flip the Draft switch beside Save to Active and click Save. The app creates the bundle’s product and tells you Your bundle offer is active!
If the app has never been used on this theme, switch on its app embed once. On the app’s home page, Open app embed takes you to it in the theme editor. It is called BYOB Bundle Pages; it opens already switched on, so just click Save.
Click View Bundle to see it on your store, and use the copy button by the address to link to it from your menu or a banner.

The editor after saving: a banner reading Your bundle offer is active! Does it look right on your store? with View Bundle, Looks good! and Report issue buttons, the status switch on Active, and the bundle address /products/snow-day-kit above the preview — Saved and active. The address above the preview is the bundle’s product page.

What the shopper sees

A normal product page from your theme, with the builder in the product details. Products that are out of stock show as Sold out and can’t be picked, and the total, the discount and “You Save” update with every pick.

The live Snow Day Kit product page on a dark theme: the theme's title, a $0.00 USD price and a quantity box, then the builder with the 3 items 10% off tier highlighted, the Liquid snowboard at quantity 2 and the ski wax at 1, Hydrogen, Oxygen and the Complete Snowboard sold out, and a total of $1,372.37 with You Save $152.49 above an Add To Cart button — The bundle live on a store. The theme’s $0.00 price is the one to hide, see below.

The bundle goes into the cart as one line. At checkout, a Shopify Function, which is Shopify’s way of letting an app run its own logic inside checkout, opens that line back up into the products the shopper chose, each at its discounted price. The total on the page is the total charged.

Things to know

The bundle product costs $0 on its own. That is on purpose: the price comes from what the shopper picks. It does mean your theme shows $0.00 on the page and in collections and search. Switch on Hide The Theme’s Price, give the bundle a picture with Add product image, and don’t edit its price in Shopify, because the app sets it back to $0 on the next save.
Your theme stays your theme. Anything the theme puts in the product details, like its quantity box, still shows around the builder.
Percentages only, flat or tiered, and one builder per page.
Collections are read when you save. A set built from a collection shows up to 50 of its active products; save the bundle again after adding new ones.

Inpage BYOB is live for every store on Flash Box Builder. If you set one up and it sits somewhere odd on your theme, send me the page and I’ll take a look.