Biscuits Bundles frontend UI displaying a soldout variant grid item.

Customisation Guide

In this guide we will customise Biscuits Bundles App to re-order/hide sold out grid items.

What this custom code will change:

By default Biscuits Bundles displays sold out products in their original order from the bundles admin, however they are greyed out and un-clickable.

If you would like to hide your sold out grid items follow these instructions:

Hide sold out gird items ›

If you would like to reorder your sold out grid items follow these instructions:

Biscuits Bundles admin UI hiding any soldout variant grid items.

We can use the CSS Variable --biscuits-soldout-display to tell Biscuits app block to hide all sold out grid items by setting it to none.

CUSTOM CSS CODE

#shopify-block-{{block.id}} .biscuits-bundle-form {
  --biscuits-soldout-display: none;
}

To learn more about Biscuit Bundles CSS Variables visit

Paste your edited code into the custom CSS field in the biscuits bundle app block

Biscuits Bundles admin UI displaying a soldout variant grid item at the end of the steps slider.

We can use the CSS Variable --biscuits-soldout-order to tell Biscuits app block to order all sold out grid items to the end of the grid/slider.

CUSTOM CSS CODE

#shopify-block-{{block.id}} .biscuits-bundle-form {
  --biscuits-soldout-order: 2;
}

This uses flex box property order to move all sold out grid items to the end of the list.

To learn more about Biscuit Bundles CSS Variables visit

Paste your edited code into the custom CSS field in the biscuits bundle app block

Always thoroughly test your custom JS to ensure if behaves as expected across all supported browsers and devices.

Stuck or got questions?

Use the chat widget below, or reach out to us at [email protected]

Happy coding, and thanks for teaming up with Biscuits Bundles!