How to customize the donation 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 the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

Want to make a difference with your Squarespace site? The donation block is your ticket to raising funds for your favorite cause. But let's face it, figuring out how to customize it can be a bit tricky.

That's why I created a brand new video tutorial to walk you through the process step-by-step. From setting up your donation options to customizing the design, I'll show you how to create a donation block that's both effective and visually appealing.

Whether you're running a non-profit, crowdfunding a project, or simply accepting donations for a cause close to your heart, this tutorial will equip you with the knowledge and skills to make it happen. You’ll find the custom codes below the video along with additional resources to help you make Squaresapce uniquely yours.

Squarespace Tutorial

Here are some helpful timestamps for the video above:

00:00 Introduction to Donation Blocks

00:30 How to Add a Donation Block in Squarespace

01:00 Chow to customize Donation Block Content

01:45 Design Settings for Squarespace Donation Blocks

05:51 Custom Donation Block Style with CSS

10:13 Final Tips and Resources

Code Example

Here are the codes used in this tutorial.

You’ll find more selectors and style plugins like this inside the Squarespace CSS cheat shet, available at insidethesquare.co/css

Be sure to edit the values so they match the style of your own website!

.sqs-donation-block-container .radio label{
  text-align:left!important;
  font-style:italic
}
.sqs-donation-block-container .radio-label:first-line{
  font-size:20px;
  font-weight:bold;
  font-style:normal
}
.sqs-donation-block-container .button{
  background:green!important;
  border-radius:0px;
  font-size:1rem!important;
  padding:10px!important
}

While we’re on the subject of donations, you can help me keep my tutorials free for all by making a donation to support InsideTheSquare!

---

Related Content

#️⃣ Block ID Chrome extension → insidethesquare.co/chromeext

📚 Squarespace CSS Resources → insidethesquare.co/css

🍿 Free Squarespace tutorials → insidethesquare.co/tutorials

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help