Biscuits Bundles frontend UI displaying a soldout variant grid item.

❗ Heads up:
We’ve retired this guide. Support for show/hiding and reordering sold out product cards is now offered as a feature inside the Biscuit Bundle app. Learn more here: Bundle Layout Settings

Update

You can now choose the display setting for sold out product cards inside the Bundle Layout settings of a bundle.
​

​

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:

• Add custom css to change the look/position of sold out grid items

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:

Reorder sold out grid items ›

Hide sold out grid items

Biscuits Bundles admin UI hiding any soldout variant grid items.

1. Add the Custom CSS

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

Advanced Custom CSS ›

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

• If you need help finding where this is follow this guide.

How to edit Custom CSS ›

Reorder sold out grid items to the end

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

1. Add the Custom CSS

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

Advanced Custom CSS ›

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

• If you need help finding where this is follow this guide.

How to edit Custom CSS ›

Testing

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

Could not display content