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.

.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
}