> 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/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/show-add-to-cart-button-on-product-list.md).

# Show add to cart button on product list

## Demo

<figure><img src="/files/32fov0AGZFTEl9YkPNQA" alt=""><figcaption><p>Demo</p></figcaption></figure>

## Guide

<mark style="color:blue;">Step 1. Enable GLO Color Swatch on the collection page</mark>

To use this feature, please make sure the swatches are enabled on your collection pages through the app settings.

<figure><img src="/files/7g674wnwo2M7rcGffWvA" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Step 2. Enable the show add to cart button option below.</mark>

<figure><img src="/files/7PGy8wdIMztJ15B8VLhG" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Step 3. Adjust button texts (optional)</mark>

* **Available label:** Displayed when the selected variant is available for purchase.
* **Added to Cart label:** Displayed when the selected variant has already been added to the cart.
* **Out of Stock label:** Displayed when the selected variant is unavailable or out of stock.

<mark style="color:blue;">Step 4. Enable Ajax Add to cart (optional)</mark>&#x20;

**Default:** When customers click **Add to Cart**, they will be redirected to the cart page.

**Enabled:** Allows customers to add products to their cart without leaving the current page.

**Choose Theme:** Only the themes listed in the dropdown support the Ajax **Add to Cart** feature with a cart drawer or popup cart. For other themes, products will still be added to the cart via Ajax, but the cart drawer or popup may not open automatically.

<figure><img src="/files/7jF90vayUCnmco3bld0U" alt=""><figcaption></figcaption></figure>

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!