# Wix Stores: Adding and Setting Up an 'Add to Cart' Button

Source: https://support.wix.com/en/article/wix-stores-adding-and-setting-up-an-add-to-cart-button (updated 2026-02-13)
Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt

You can place a standalone 'Add to Cart' button anywhere on your site. The button is linked to the product you choose. This can come in handy when you're writing about a product somewhere on your site and want to make it easy for a customer to add the product to their cart.

---

## Step 1 | Add the 'Add to Cart' button

Start by navigating to the relevant page and then dragging the Add the Cart button from the Add Panel to the ideal spot.

![GIF showing how to add an Add to Cart button to a site page in a Wix site](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2021/07/18/234aebb8-c516-489b-820c-f52ad357231e/6b532574-6c60-4ea2-aba9-db0cd4161bcf.gif)

**Wix Editor:**

1. [Go to your editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26).
2. Click **Add Elements** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2024/06/06/5a975809-5f79-451e-a9d2-69846464cc83/be4d8503-f953-4d52-a839-62a62a75b70a.png)on the left side of the editor.
3. Click **Stores**.
4. Drag the **Add to Cart Button** to the page.

**Studio Editor:**

1. [Go to your editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26).
2. Click **Add Elements** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/cef22a14-dfc9-43c7-a54f-72ed83266050/741248d2-4240-497e-a282-2a7d15d8afac.png) on the left side of the editor.
3. Click **Stores**.
4. Drag the **Add to Cart Button** to the page.

---

## Step 2 | Connect the button to a product

For the button to work properly, you need to select which product is added to the customer's cart when clicked.

![Screenshot of the settings panel where you select which product is connected to the Add to Cart button](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2024/06/06/5b99fc82-6884-48b3-8ecf-8086d975ad17/5abade03-a830-4dd1-9972-46e9e790a981.png)

### To connect the button to a product:

1. Click the Add to Cart button in your editor.
2. Click **Settings**.
3. (Optional) Edit the button text.
4. Connect the button to a product. Select the default product or select a different product.

---

## Step 3 | Design the button

Now you can design the button to fit perfectly on the page.

### To customize the design of the button:

1. Click the Add to Cart button in your editor.
2. Click **Settings**.
3. Click **Design**.
4. Make any of the following customizations:  
   * Select a button style.  
   * Select a button color and drag the slider to adjust the opacity.  
   * Select a border color and drag the slider to adjust the border width.  
   * Drag the slider to make the corners rounder or more square.  
   * Select a text color or font.

![Screenshot of the design options available with the Add to Cart button](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2021/07/25/89103e08-5ea7-47c1-8243-c280beea60c3/d09b41c0-36ba-4e87-aaeb-ded95c132150.png)

> **Note:** When a product is out of stock, the button text changes to "Out of Stock". It is not possible to edit the design of the "Out of Stock" button.