This documentation will guide you on how to set an 'Out of Stock' state for your 'Add to Cart' button in your page. This feature is particularly useful when you have a product with multiple variants (e.g., small, medium, and large sizes), and you want the 'Add to Cart' button to update accordingly when any of those variants is out of stock.

Step 1: Select the 'Add to Cart' Button

First, navigate to the product section and click on the 'Add to Cart' button. This is the button that you will be modifying to reflect the 'Out of Stock' state.

Step 2: Add a New State

Once you have selected the 'Add to Cart' button, add a new state called 'Out of Stock'. This state will be used to indicate when a product variant is unavailable.

Step 3: Set the Condition for the 'Out of Stock' State

The 'Out of Stock' state should only show when the selected variant is unavailable. Therefore, set this as the condition for the 'Out of Stock' state to appear.

Step 4: Modify the 'Add to Cart' Button for the 'Out of Stock' State

When the 'Out of Stock' state is active, the 'Add to Cart' button should reflect this status. Change the button text to 'Out of Stock' and modify the background color to red (or any color that indicates unavailability).

Step 5: Change the Cursor Type

To further indicate that the product is unavailable, change the cursor type from 'default' to 'no cursor' when the 'Out of Stock' state is active.

Step 6: Remove Interactions

When a product is out of stock, the 'Add to Cart' button should not be clickable. To achieve this, click on 'Interactions' and remove all forms of interaction on the button while the 'Out of Stock' state is active.

Step 7: Verify the Changes

Click on the 'Default' state to ensure that the interactions and stylings are in place. When a variant is out of stock, the 'Add to Cart' button should now reflect that it's out of stock.

If you have any questions or need further assistance, please reach out to our support team. Thank you for using our platform.