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.

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:

• Brand new to CSS? Start with my free course here: insidethesquare.co/learn

• Learn more about online stores in this workshop: insidethesquare.co/sell

• Explore your product page options in this video: youtube.com/watch?v=jvg0-tAM9qQ