---
title: "(Legacy) Show/Hide or Reorder sold out products"
description: "Hiding sold out components inside the bundle"
url: https://help.biscuitsbundles.com/en/articles/9219458-legacy-showhide-or-reorder-sold-out-products
collection: "Customisation Guides"
updated: 2026-07-07
language: en
---

# (Legacy) Show/Hide or Reorder sold out products

Hiding sold out components inside the bundle

**Heads up:** this guide covers the older method. The current way to show, reorder or hide sold-out products is in your bundle's **Bundle layout > General** settings.

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_9835.png)

_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](https://help.biscuitsbundles.com/en/articles/11103611-bundle-layout.md)

## Update

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

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_4959.png)

  
​

* * *

## 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 ›](#h_aff9b3aaa0)

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

## [Reorder sold out grid items](#h_f203dbe85d) ›

* * *

## Hide sold out grid items

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_6444.png)

_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**

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

To learn more about Biscuit Bundles CSS Variables visit

[Advanced Custom CSS ›](https://help.biscuitsbundles.com/en/articles/9045765-advanced-custom-css.md)

**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 ›](https://help.biscuitsbundles.com/en/articles/9310095-how-to-edit-custom-css.md)

* * *

## Reorder sold out grid items to the end

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_9621.png)

_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**

```javascript
#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 ›](https://help.biscuitsbundles.com/en/articles/9045765-advanced-custom-css.md)

**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 ›](https://help.biscuitsbundles.com/en/articles/9310095-how-to-edit-custom-css.md)

* * *

## Testing

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

**Could not display content**