Digital product blocks

Sell access to your gated content and encourage visitors to sign up using digital product blocks.

Last updated January 23, 2025

Visitors sign up and pay for your pricing plans with digital product blocks. You can add a digital product block to any page, blog post, or content area on your site to promote your gated content. You can also create a sign-up page with multiple blocks where visitors can compare and contrast all membership options.

This guide covers how to add and style digital product blocks.

Tip

Register for our Create and sell online courses with Squarespace webinar. We’ll provide guidance on preparing a curriculum, building an online course, and monetizing your courses with pricing plans.

Before you begin

Add a digital product block

To add a digital product block:

  1. Edit a page or post, click Add Block or an insert point, and choose Digital Product from the block menu. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. In the Content tab, select one of your pricing plans from the Choose a pricing plan drop-down menu.
  4. Click the Design tab to set the block's alignment and edit what details appear in the block.
  5. You can replace the default Button Text for the button to match the tone of your site.

You can also add a new page to your site using one of our professionally designed Digital Products page layouts. These pages feature different combinations of text, images, and digital product blocks to promote your gated content. After you add the page, customize the digital product blocks following the steps above.

Edit pricing plan details

In the Design tab of the digital product block, choose which details appear in the block by switching the toggle on or off for these options:

  • Title
  • Description
  • Price
  • Benefits
  • Button

If you disable Price, we recommend adding the price to the pricing plan’s description, so prospective members know what to expect at checkout.

You can’t hide the pricing option picker that appears in the digital product block for pricing plans that have two pricing options.

Tip

To edit the pricing plan title, description, or price, go to your pricing plan settings.

Style the digital product block

You can style the digital product block and customize the button and pricing option picker (if applicable). The way you change the block's design depends on your site's version.

Digital product block font

The pricing plan description and price take their style from your site's site-wide fonts, and follow the Paragraph tweaks. The title follows the same tweaks, but appears slightly larger.

  1. While editing the page, open site styles.
  2. Click Fonts, then click Paragraph.

The pricing plan description and price use the same style as your body text. The title follows the same tweaks, but appears slightly larger.

Button font and design

To style the button:

  1. Open a page containing a digital product block
  2. Click Edit, open site styles, then click Buttons.

To change the text that displays in the button, edit the digital product block, and change the Button Text. The button's text follows the Buttons font tweaks:

  1. While editing the page, open site styles.
  2. Click Fonts, then click Buttons.
  3. Style the button font using the first section of tweaks. The size of the text in the button follows the medium button tweaks.

To change the text that displays in the button, edit the digital product block, and change the Button Text. The button's style and font follow the Buttons tweaks:

  1. Open a page containing a digital product block.
  2. Open the Site Styles panel.
  3. Edit the button's design and font using the tweaks under Buttons. You can't change the size of the text in the button.

To learn more, visit Styling buttons.

Pricing option picker design

If your pricing plan has two pricing options, a pricing option picker appears above the pricing plan’s title.

Digital product block showing two fixed price plans.jpg

 

The pricing option picker’s font and style follow the Buttons tweaks, while the size of the text follows your font’s base size. You can’t change the Padding of the text or the Shape of the button for the pricing option picker.

The pricing option picker’s style and font follow the Buttons tweaks. You can't change the shape of the pricing option picker button.

The pricing option picker automatically displays the two available options. The text for each option is either the number of payments (for fixed amount pricing) or renewal frequency (for recurring subscriptions). There isn't a way to customize this text.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.