How to customize product variant buttons in Squarespace

VERSION 7.1CUSTOM CSS
Written By insidethesquare

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this step-by-step tutorial, you'll learn how to customize the product variant buttons on your Squarespace online store with CSS.

You'll learn how to change the size, shape, color, and font of the buttons, as well as create hover effects to really make them pop. And the best part? This code can be customized for any Squarespace website to look uniquely yours.

Let's get started and give your online store a personalized touch that will impress your customers. The step-by-step video is below, along with the codes you’ll need to customize your own site.

Video tutorial

Code Example

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F6EDCE!important; /* change the button background color */
  border: 2px solid #EDD17D!important; /* change the button border */
  border-radius:0!important;/* change the button shape */
  font-size: 1rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#EDD17D!important; /* change the button background color */
  color: brown!important; /* change the font color */
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #e5f5f6 !important;/* change the button background color */ 
  color: #50bdb8 !important;/* change the button font color */
  border: 1px solid #50bdb8 !important; /* change the button border */
  border-radius: 3rem !important; /* change the button shape */
}

Why is the word !important used a gazillion times in this code?! That little extra CSS is helping us overwrite the style already being applied to the button based on your secondary button style. Everyone has different design settings selected for this button, so you might not need to add !important to every value in your code, but I added it to this code to make sure it will work! It won’t add a significant amount of load time to your site, and it won’t effect anything else that is loading - just the variant buttons we are restyling.

Here are links to a few other tutorials you can check out to customize your Squarespace store even more:

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous

How to add a site search bar above your Squarespace header
Next

New Squarespace Shape block settings