# Back in Stock UX Practices

If a brand is using back in stock on their website, then it is important to ensure that the relevant communication across the collection pages and product pages make sense for customers.

If a brand is using back in stock integrations, then the UX needs to be right in order to smoothly navigate customers to their desired result.

Firstly, it is important to understand that back in stock forms should only load on the product pages, not the collection pages. So the job of the product card on the collection page is to accurately communicate the status and availability of a product.

If a product card has an quick add or add to cart behaviour on the product card, but that product is unavailable, and BIS is active, then the button text should change to "Notify Me" or the request text from a client. On click, the user is taken to the product page for that product where they can click the add to cart button, which, in this case will have changed it's text to "Notify Me". If using Klaviyo, then clicking this will open the notify modal for the user to enter their email.

On the collection page, if there is a product that has some variants in stock, and others out of stock, then the quick add / add to cart should only work for the "first default" that is in stock.

However, in this case, if a product card has variants, and on interaction with the product card, it indicates that a product is out of stock wit a strike through of similar behaviour, then we don't need to prioritise the indication that this product can be signed up to be notifed for - this is because the job of the collection page is to driven clear quick communication on what IS in stock.

If a customer in this case wants to "enquire" further to see if they can sign up for notifications, then they click into the product and can then see it is available for notify notiications.

{% embed url="<https://www.loom.com/share/be229166b8994b0a9d966618143f183a>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.almond.studio/configuration-guides/back-in-stock-ux-practices.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
