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

## Demo

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FXEsoFn9p6y3P8gDisDdO%2Fimage.png?alt=media&#x26;token=dc29aacc-469d-432c-9e5b-aa9f158c8723" 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](https://docs.globo.io/product-variants-swatch/display-on-collection-page-home-page-other-pages)

### <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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fwp5DlCGbGLuwbd3NCT03%2Fimage.png?alt=media&#x26;token=ea328031-c72e-4d7f-801f-39c4c6acff78" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FJN6u6XHDgDWfmbqFRpEw%2Fimage.png?alt=media&#x26;token=946e67ff-d513-4ca8-b34d-3cd5b8f4fba2" 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