> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/appearance/out-of-stock-styles.md).

# Out-of-stock styles

Choose how unavailable option values are shown to shoppers.

Each swatch style decides for itself how a sold-out value looks. The setting lives in the **Sold out** group of that style's editor.

## Set it

1. Go to **Appearance** and pick the **Product page** or **Collection page** tab.
2. Click **Customize** on the style.
3. Open the **Sold out** group and choose a **Treatment**.
4. Click **Save**.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-411bb3459181e058fb6d99bbcb4070a47a939e29%2Fimage%20(45).png?alt=media" alt=""><figcaption></figcaption></figure>

## The treatments

| Treatment     | What shoppers see                                        |
| ------------- | -------------------------------------------------------- |
| **Default**   | The value looks normal. Nothing marks it as unavailable. |
| **Dim**       | The value is faded.                                      |
| **Cross out** | A line is drawn across the swatch.                       |
| **Hide**      | The value is removed from the list entirely.             |

**Button without border** has a fifth choice, **Strikethrough**, which strikes through the text itself.

### Cross out options

Choosing **Cross out** reveals:

* **Line color**
* **Shape** — **Diagonal** or **X**
* **Flip direction** — with **Diagonal**, tilt the line the other way

## Choosing between them

* **Dim** and **Cross out** keep the value visible, so shoppers can see the colour exists and might come back for it. This is the usual choice for fashion.
* **Hide** gives the cleanest list but hides demand — shoppers can't tell the colour was ever offered.
* **Default** only makes sense when you always keep stock, or when the product page explains availability another way.

## How availability is worked out

* For a product with one option, sold-out applies to the product.
* For a product with several options, it applies to the specific combination — Blue + Small can be sold out while Blue + Medium is available.
* Availability updates as the shopper chooses: picking a colour reveals which sizes are left. It does not work backwards, so choosing a size will not dim the colours that don't come in it.

{% hint style="warning" %}
On collection pages, hiding an option (setting it to **Do not show (Default)**) while other options stay visible can make a product look sold out when it isn't — the card works out availability from the first value of the hidden option. If Pink is out of stock in S but available in M and L, hiding **Size** can mark Pink as unavailable.

To show sold-out values correctly, [show all of the product's options](/swatch/options/show-swatches-on-collection-pages.md) on collection pages — **Color** and **Size**, not **Color** alone. A shopper who picks Pink then sees only S marked as sold out, and can still choose M or L. Product cards get a little busier, but the stock they show is accurate.
{% endhint %}

## Related pages

* [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md)
* [Show swatches on collection pages](/swatch/options/show-swatches-on-collection-pages.md)