How To Customize Variant & Quantity in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial, we’ll use custom CSS to change the look of the quantity and variant options on a product page in Squarespace 7.1

Pro Tip: You can change the color of all variant fields using the site styles menu. If you want the label and the value to be the same colors, definitely change it there first! Only use CSS to change things you can’t change in the site styles menu. 

How to add these codes to Squarespace:

1. Navigate to your Design Menu

2. Select Custom CSS

3. Paste the code listed below into the Custom CSS window

4. Select save and refresh your page!

Here are the codes from this tutorial.

Be sure to change any color code #333 or px value in bold to suit your own site style!

Variant Label:

.variant-option-title {color: #333}

Variant Dropdown - Color:

.product-details .variant-select-wrapper {color: #333}

Variant Dropdown - Only Bottom Border:

.ProductItem-details .variant-select-wrapper select {border-top:none; border-left:none; border-right:none; border-bottom: 2px solid #333}

Quantity Label:

.quantity-label {color: #333}

Quantity Dropdown - Only Bottom Border:

.ProductItem-details .product-quantity-input input{border-top:none; border-left:none; border-right:none; border-bottom: 2px solid #000}

Quantity Number Style:

.ProductItem-details .product-quantity-input input{color: #333!important; font-weight: bolder}