How to Customize the Add to Cart Button in Squarespace

Product/Shop
Written By Caroline Gell

Want to customize the “Add to Cart” button on your Squarespace site? In the tutorial below, I’ll show you exactly how to update the button’s background color, add a border, adjust its shape, change the text color and size, and even style the hover effect, all with just a few lines of CSS!

Know Before You Style

There are three different types of Add to Cart buttons in Squarespace, and each has its own code name. You’ll want to target them separately if you want to give each one a unique look or combine the selectors if you want the same style applied site-wide.

  • Product List (like a storefront view)
    .product-list .sqs-add-to-cart-button

  • Product Detail Page (individual product)
    .product-detail .sqs-add-to-cart-button

  • Product Block (content block)
    .product-block .sqs-add-to-cart-button

Changing The Button Background & Text Color

Changing the text color or background.

.product-list .product-list-item .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    color: #F47068 !important;
    background: #FFE9D6 !important; }

Customize Button Border & Shape

Changing the text color or background.

Hello, World!

Customize Button Size & Font Size

Changing the text color or background.

Hello, World!

Button Hover Effects

Changing the text color or background.

Hello, World!

Full Code

Changing the text color or background.

Hello, World!

 
Caroline Gell