# Show add to cart button on slider, grid, list products

## Demo

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

## Guide

### <mark style="color:blue;">1. Enable swatch on collection page</mark>

To use this feature you need to make sure you have **enabled swatch app on the collection page**. \
Read this page [Display on collection page, home page, other pages](/product-variants-swatch/display-on-collection-page-home-page-other-pages.md)

### <mark style="color:blue;">2. Enable s</mark><mark style="color:blue;">**how add to cart button**</mark>

&#x20;In settings page, **enable** show add to cart button and **save** setting<br>

<figure><img src="/files/fbLIQgFW0urYz3EnPfNt" alt=""><figcaption><p>Enable show add to cart button on collection page</p></figcaption></figure>

### <mark style="color:blue;">**3 Option setting add to cart**</mark>

#### Change text:&#x20;

* <mark style="color:orange;">Available label</mark>: Displayed when variant is available to buy
* <mark style="color:orange;">Added to cart label</mark>: Displayed when variant have been already in card
* <mark style="color:orange;">Out of stock label</mark>: Displayed when variant is out of stock

#### Ajax to cart:&#x20;

<mark style="color:orange;">Default</mark>: When click add to cart, user will be redirected to the cart page.

<mark style="color:orange;">Enable</mark>: Allows users to include product in the cart without leaving site

<mark style="color:orange;">Choose theme</mark>:  Only the themes listed in the dropdown above support the Ajax 'Add to Cart' feature, which opens the sidebar or popup cart. Otherwise, the Ajax 'Add to Cart' will only remain in the page and add the item to the cart.

<figure><img src="/files/zB7TuqXov21itDxt6kkp" alt=""><figcaption><p>Option setting add to cart</p></figcaption></figure>

<mark style="color:orange;">**List theme support card popup / cart  modal**</mark>

1. Be Yours
2. Broadcast
3. Colorblock
4. Concept
5. Craft
6. Crave
7. Custom
8. Dawn
9. Enterprise
10. Focal
11. Impact
12. Impulse
13. Motion
14. Origin
15. Palo Alto
16. Pipeline
17. Prestige
18. Publisher
19. Refresh
20. Ride
21. Sense
22. Shapes
23. Sleek
24. Spotlight
25. Studio
26. Symmetry
27. Taste
28. Trade
29. Warehouse
30. Xtra


---

# 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.globo.io/product-variants-swatch/display-on-collection-page-home-page-other-pages/show-add-to-cart-button-on-slider-grid-list-products.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.