How to Customize the Colors of the Digital Product Block Buttons in Squarespace

Customizing your Squarespace website to match your brand goes beyond simply picking the right template. Sometimes, it takes a little extra code to get things looking exactly how you want.

In this post, I’ll show you how to change the colors of the digital product block buttons—so you can bring your brand colors into every part of the checkout experience.

This tutorial walks you through using custom CSS to adjust the background, text, and border colors of these buttons. With just a few snippets of code, you can completely transform the look and feel of the Enroll Now button and toggle options inside your digital product block.

Where to Paste the CSS

To get started, head to your Squarespace dashboard:

1. Go to Website > Pages

2. Scroll all the way down and select Custom Code > Custom CSS

3. Paste the code snippets below (scroll down) here

Once you've pasted the code, you can update each color value with your brand's hex codes.

Code Snippet Breakdown

(Scroll down for all the code snippets)

1. Change the Colors of the Enroll Now Button

This snippet controls the main call-to-action button. You'll be able to update:

• Background color – the main color of the button

• Border color – the outline of the button

• Text color – the font color that appears on the button

2. Change the Background Color of the Toggle Button

This code snippet lets you update the background and text color for the unselected toggle option—often labeled as “Five Payments” or similar.

3. Change the Background Color of the Selected Toggle Button

This snippet updates the selected toggle button, helping it stand out clearly. You can customize:

• Background color – to highlight the selected state

• Text color – so the font matches your brand palette

4. Change the Border Color of the Toggle Button

If you want your toggle buttons to have a clear, styled border, this snippet gives you full control.

These small changes can make a big difference in creating a more branded, visually polished experience for your customers. Whether you’re selling a digital product, course, or download, matching your color palette all the way through checkout shows attention to detail—and builds trust.

👉 Want even more strategies for creating a website that works for your business? Register for my free class: The 3-Part Framework for Increasing Organic Traffic to Your Squarespace Website. It’s completely free and will help you get more traffic, engagement, and email subscribers.

Code Snippets

/* Change the colors of the enroll now button */

.join-button{
  background-color:#f8ad55!important;
  border-color:#3e4259!important;
  color:#3e4259!important;
}

/* Change the background color of the toggle button */

#siteWrapper .pricing-plan-block .pricing-plan-pricing-option-button {
  background-color: #F7F1E7 !important;
  color: #3e4259!important;
}

/* Change the background color of the selected toggle button */

#siteWrapper .pricing-plan-block .pricing-plan-pricing-option-selected {
  background-color: #f8ad55 !important;
  color: #3e4259!important;
}

/* Change the border color of the toggle button */

#siteWrapper .pricing-plan-block .pricing-plan-pricing-option-button {
  border-color: #3e4259 !important;
}

---

If you liked this post, you’ll LOVE these:​​

• How to Add a Background Image to the Header in Squarespace

• How to Add a Second Button to Navigation in Squarespace

• How to Easily Add a Text Shadow Effect in Squarespace

• How to Make a Summary Block Auto-Scroll in Squarespace

This page contains affiliate links

Like this post?

Pin It to Pinterest 👇