How to Add and Style Squarespace Digital Product Blocks
TL;DR:
- Digital product blocks let you add sign-ups and payments for your content on any page
- You need the right billing plan and a connected payment processor to get started
- Customise block details like titles, descriptions, and pricing through the block editor
- Styling options pull from your site-wide fonts and button settings
- Some design elements have fixed limitations depending on your Squarespace version
Setting Up Digital Product Blocks
Before you start adding blocks, check your Squarespace billing plan supports Digital Products. You'll also need to connect Squarespace Payments or a third-party processor like Stripe or PayPal to handle transactions.
Create your digital product first – whether that's a blog page, course, or other gated content – and link it to a pricing plan.
How to Add a Digital Product Block
Here's how to get a digital product block on your page:
- Edit the page where you want the block to appear
- Click 'Add Block' or use an insert point between existing content
- Select 'Digital Product' from the block menu
- Click the pencil icon to open the block editor
- Choose your pricing plan from the dropdown in the Content tab
- Switch to the Design tab to adjust how the block looks and what information shows
You can change the default button text to match your site's tone. The block will pull in details from your pricing plan, but you control what visitors actually see.
Editing What Shows in Your Block
In the Design tab, you can toggle these elements on or off:
- Title
- Description
- Price
- Benefits
- Button
If you turn off the price display, add pricing information in the description so people know what they're signing up for.
Styling Your Digital Product Block
Fonts and Text
Both Squarespace 7.1 and 7.0 pull description and price styling from your site-wide font settings. They'll match your body text, while titles get slightly more emphasis for better visibility.
Button Styling
Head to Site Styles and find the Buttons section to change how your sign-up buttons look. You can adjust fonts and appearance, but button size is usually fixed based on your template's design presets.
Pricing Option Picker
If your plan has two pricing options (like monthly and annual), the picker follows your button style settings. Design options like shape and padding are limited though.
Preview your changes as you make them to see how everything fits with your site's existing design.
Common Issues to Watch For
The pricing option picker has preset limitations that vary by Squarespace version. Test different combinations to see what works best with your template.
Some templates handle digital product blocks better than others. If your block looks awkward, try adjusting the alignment settings or placing it in a different section of your page.
FAQs
Can I add digital product blocks to any page on my site?
Yes, they work on any page, post, or content area where you can add blocks.
Do I need a specific billing plan for digital product blocks?
Yes, your Squarespace plan must include Digital Products to use these blocks and process payments.
How much can I customise the block design?
You have several styling options, but some elements like the pricing picker have built-in limitations depending on your site version.
Can I change the button text?
Yes, you can customise the button text in the block editor to match your site's voice.
Jargon Buster
Digital Product Blocks – Squarespace modules that display subscription or membership sign-ups with payment processing
Pricing Plan – Your setup that defines cost, benefits, and terms for different membership tiers
Site Styles – Squarespace's design panel where you control fonts, colours, and button appearance across your site
Insert Point – The + symbol that appears between content blocks when you're editing a page
Wrap-up
Digital product blocks give you a clean way to add memberships and subscriptions to any page on your Squarespace site. The setup is straightforward once you have your billing and payment processing sorted.
The styling works with your existing site design, though you'll want to test how blocks look in different sections of your pages. Most customisation happens through your site-wide style settings rather than block-specific options.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for detailed tutorials and expert guidance.