How to customize the mobile product page 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 your product pages specifically on mobile devices for Squarespace 7.1 stores.

Be sure to watch the video so you can see what parts of the code below you’ll want to change to make it look amazing on your own site.

How to add it:

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}