Wix Stores: Adding and Setting Up an 'Add to Cart' Button
3 min read
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
Studio Editor
- Go to your editor.
- Click Add Elements
on the left side of the editor.
- Click Stores.
- 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:
- Click the Add to Cart button in your editor.
- Click Settings.
- (Optional) Edit the button text.
- 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:
- Click the Add to Cart button in your editor.
- Click Settings.
- Click Design.
- 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.
Did this help?
|