How to customize the digital product block in Squarespace

Squarespace digital products have the ability to promote a blog behind paywall, courses, and individual member areas. The digital product block itself can feature payment plans and list benefits of each payment option using this content block.

While there isn’t much we can edit using the design menu, there is a lot we can do with CSS!

In this tutorial, you’ll learn how to change font styles, colors, and some creative layout options.

The codes shared in the video are listed below, along with more information about how to use them on your own Squarespace site.

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.

.pricing-plan-block{
  background:mintcream;
  padding:15px;
  border:3px solid #50bdb8
}
#block-yui_3_17_2_1_1711162156374_5458.pricing-plan-block {
  background:#efefef
}
.pricing-plan-title{
  text-transform:uppercase;
  letter-spacing:5px;
  color:#50bdb8
}
.pricing-plan-price-amount{
  font-size:50px!important;
  font-weight:bold
}
.pricing-plan-price-billing-period{
  text-transform:uppercase;
  letter-spacing:5px;
  padding-bottom:10px;
  border-bottom:1px solid #333
}
.pricing-plan-description{
  background:#fff;
  border:1px solid #50bdb8;
  padding:15px;
  width:110%;
  margin-left:-10%
}
.join-button{
  border-radius:30px!important
}
.join-button:hover{
  background:#50bdb8!important;
  opacity:1!important
}
.pricing-plan-benefits-divider{
border-color:#50bdb8
}
.pricing-plan-benefit-description:first-letter {
color:#50bdb8;
font-size:15px
}
.pricing-plan-block .pricing-plan-pricing-toggle-wrapper{
  padding-top:15px
                                                        }
.pricing-plan-block .pricing-plan-pricing-toggle-wrapper *{
  border-radius:0px!important
}