# Change Add to Cart Button Color in Squarespace

**URL:** <https://community.elfsight.com/t/change-add-to-cart-button-color-in-squarespace/57755>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [June 20, 2024, 3:58am UTC](https://community.elfsight.com/t/change-add-to-cart-button-color-in-squarespace/57755 "2024-06-20T03:58:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [June 20, 2024, 3:58am UTC](https://community.elfsight.com/t/change-add-to-cart-button-color-in-squarespace/57755/1 "2024-06-20T03:58:21Z")

</div>

Add to Cart Button uses Primary Button Style, so you can change it in Site Styles or use Custom CSS.

## **A. Use Site Styles**

**#1.** Click the **Site Styles icon**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/8/688f681f104a8e3de47ca5a483e0230b1f2cdf16.png)

**#2.** Click **Colors**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/8/186355ae6018b4dc50ea576473bbb8bcc7cd4c8e.png)

**#3.** Choose a theme color

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/f/7f2d22db1d17cd26dfefb654b12b6684aeed3b52.png)

In my example, it is **LIGHTEST 1**. To find this, just open a Product in edit mode \> Click **Site Styles icon** \> **Colors** \> You will see the theme name.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/4/e44f899e483d6a4aae84057dcf56b06a8d1dbb14.png)

**#4.** Scroll down to this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/3/03eb275db685ed529d2b046b4d6c24fab19c27ef.jpeg)

## **B. Use CSS**

Just use this code to Custom CSS box

```auto
div.sqs-add-to-cart-button-inner {
    color: #f1f !important;
}
div.sqs-add-to-cart-button {
    background-color: #ff0 !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/6/56711223091e9a8b4003c16443620ca7266ade73.jpeg)

**Result**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/6/86e9f194bfedbd97039c70dc535a453f24e6d1ed.png)