Overview
A collection page can show a bundle card with a quick add button, but shoppers may still need to choose the items inside that bundle. Biscuits Bundle Builder can open its bundle form in a modal or drawer from a theme quick add button, so customers can make those choices before adding to cart. You can also send shoppers to the bundle product page. The right route depends on your theme's buttons and how much room the bundle form needs.
Contents
- Why can a bundle quick add button fail on a collection page?
- What are your options for bundle quick add?
- How do you enable a bundle quick add dialog in Biscuits?
- Should you use a modal or a drawer?
- How do you test bundle quick add before publishing your theme?
- What if your theme uses a custom quick add?
Why can a bundle quick add button fail on a collection page?
Quick add is controlled by the storefront theme. A product card may submit a product variant directly, open its own option picker, or link to the product page. The path that works for an ordinary product may skip the selection form needed by a configurable bundle.
What does the theme try to add before the shopper chooses products?
There is a useful distinction between Shopify Bundles and a Biscuits bundle that asks the shopper to select component products. Shopify Bundles represents the offered option combinations through variants of the bundle product. A theme can add a single available variant directly; if there are several, its quick add can let shoppers choose one. For example, Shopify's Dawn theme uses a direct add for a simple one-variant card and a “Choose options” dialog when the product has multiple variants. That is why Shopify Bundles can work with a theme's ordinary quick add flow, subject to the theme and the bundle's variants. It does not mean every possible component combination exists as a separate variant in every bundle configuration.
A configurable Biscuits bundle instead needs the shopper's selections in its bundle form. Submitting the parent product's default variant from a generic quick add button does not, by itself, collect those component choices. Open the Biscuits form or link to its product page before the add to cart action.
Where else can a quick add button appear?
Check collection grids, search results, featured collections and recommendations that use product cards. Some themes also offer quick view. The Biscuits app embed lets you set how its bundle cards respond to the theme's quick add and quick view actions; it does not change quick add for ordinary products.
What are your options for bundle quick add?
Choose the route that gives shoppers a clear opportunity to configure the bundle. Both routes rely on the theme exposing a usable button on the product card.
When should you link to the bundle product page?
Use a product-page link when the bundle has several steps, needs more explanation, or your theme's product-card integration does not open the form reliably. In the Biscuits app embed, choose Replace for Theme quick add to send the shopper to the product page, and Hide for Theme quick view if quick view would bypass the form. Test the button wording and destination in the actual theme. The shopper then selects items on the full bundle page.
When should you open the bundle form in a dialog?
Choose Quick add dialog when shoppers can make the required choices comfortably without leaving the grid. Biscuits replaces the bundle card's quick add behavior with its form in a modal or drawer. The theme's button text is retained. This is particularly useful for a short, visual bundle, provided the button is present and the form fits on desktop and mobile.
How do you enable a bundle quick add dialog in Biscuits?
In Shopify, open Online Store → Themes → Customize → App embeds and turn on the Biscuits app embed. In the theme editor, confirm that the collection or product-grid section has its quick add buttons enabled. Save and preview the theme after choosing the following Biscuits settings.
Which app embed settings control quick add and quick view?
Set Theme quick add to Quick add dialog. Set Theme quick view to Quick add dialog if its quick view button should open the same bundle form, or to Hide if you do not want that shortcut. Then select Modal or Drawer for the dialog style. These settings apply to Biscuits bundle cards, while non-bundle cards keep the theme's usual behavior.
The form uses the bundle's app block styling, including supported custom CSS. Custom JavaScript from that block does not run in the dialog, so check any behavior that depends on your own script. Biscuits retains the last few bundle selections while the current page stays open; reloading clears them. Check prices and translations in the markets you sell to.
How can related bundle cards open the same dialog?
Biscuits documents that a Related Bundles app block can also open the quick add dialog, even without the app embed enabled. If you use that block on a product page, preview its cards separately from a collection grid and make sure the opened form belongs to the selected related bundle.
Should you use a modal or a drawer?
Both show the Biscuits bundle form; choose the one that leaves enough space for the decisions your shoppers must make. A modal sits over the page, while a drawer enters from the right on a desktop screen. Biscuits displays the modal at the bottom on smaller screens, so always inspect the mobile layout as well.
What should shoppers see before adding the bundle?
They should be able to identify the bundle, choose every required component, understand the price or discount, and find the add to cart action. A short bundle may fit naturally in a modal. If product choices need more vertical room, compare the drawer and full product page. Do not treat the first view of the dialog as proof that checkout will contain the chosen items.
What changes on a small screen?
Open the collection on a phone-sized viewport and check that every choice, quantity control, validation message and cart button can be reached without fighting the page behind the dialog. Verify the form can be dismissed and reopened. The drawer example below shows how the same selectable bundle can occupy a separate panel on a wide screen.
How do you test bundle quick add before publishing your theme?
Use a theme preview and perform one full shopper journey for each button placement and dialog style you intend to offer. Repeat with a bundle that has required choices and one with optional choices if both are in your catalog.
Do selections and discounts survive the add to cart?
Open the card's quick add, choose a specific combination, and submit it. Inspect the cart line items and quantities, then proceed far enough through checkout to confirm the bundle components and total. Repeat with another combination and any relevant discount threshold. A successful test has the same selected products and price throughout the form, cart and checkout. Compare this with the full product-page path if you are considering the link alternative.
Does the cart update or open as expected?
Biscuits documents that a supported theme may open its cart after the bundle is added. Otherwise the dialog shows an added state and closes after a short delay; the bundle should still be in the cart. Test the cart drawer or cart page your theme actually uses, including refreshing it, and confirm a second add does not duplicate the wrong combination. The exact transition depends on the theme.
What if your theme uses a custom quick add?
A custom or heavily modified theme may use different product-card markup or launch its own quick view. First check that its buttons are enabled and that the Biscuits app embed is on. Test a normal collection card and any separately built product grid, since they may use different markup.
When might a product template or content selector help?
The Biscuits app embed offers an advanced product template suffix and content CSS selector for themes whose dialog needs to target a different product template or content region. Use those controls only after checking what the theme actually renders. A selector that matches the wrong element can produce a blank or incomplete form, so preview and retest after each change.
When should you contact support about the theme integration?
If the button opens the theme's generic form, the Biscuits form is empty, or the cart loses component selections after the documented settings are saved, collect your theme name, affected collection URL, button placement and a short reproduction sequence. Share those details with Biscuits support. Meanwhile, a product-page link is a practical route for customers while the custom theme integration is investigated.
View on app store