How to customize the digital product block in Squarespace

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 is specifically for Squarespace sites using a digital product paywall feature, including blogs, courses, and/or member areas.

Squarespace has been making some major upgrades to digital product features, giving us the ability to have a blog paywall, courses, and member areas. The digital product block got an upgrade too, and we can now 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!

This week’s tutorial is a longer-than-usual one because we have so many things to target! You’ll learn how to change font styles, colors, and some creative layout options.

---

If you are brand new to CSS, start with my free guide on basic CSS for Squarespace! Learn more at insidethesquare.co/learn

---

Video tutorial

---

Code Example

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

---

Related Content

📝 Font & test property guide: insidethesquare.co/textguide

📄 How to add code to a single page: insidethesquare.co/singlepage

🎨 Free guide to creating colors with code: insidethesquare.co/colors

👯 How to set up a membership site using Squarespace (ThinkInsideTheSquare Podcast): insidethesquare.co/podcast/31