A Beginner’s Guide to Squarespace Product Blocks
Essential for custom sales pages, Squarespace product block will display individual products on pages in your website.
Squarespace product blocks can be used to promote your products on other pages in your website, like related blog posts, events, and especially for custom sales pages.
You can show an image of the product, title, price, description, quantity, and have an add to cart button. You can also enable a quick view of the product, allowing customers to click on a button that shows up over the image on a hover.
This button opens up the quick view of the product details on top of the page they are currently on, so they can see more information without having to navigate to a new page.
How to add a product block to Squarespace
Here is an example of a product block for a digital download:
Customize your site beyond your design menu with the CSS cheat sheet, specifically for Squarespace sites, including Brine, Bedford, and the new 7.1 templates.
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the product option form the list of content blocks.
Double click on the product block, or click once and select the pencil icon to open the content block.
The content tab is where you will select the individual product you want to feature in this content block. You can only display one product per content block.
Use the design tab, you can adjsut the content block alignment settings. You can also decide what content to display, toggling on or off the product image, title, price, description, add to cart button and product quick view. For more information about the product quick view feature, check out this official Squarespace support article.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Squarespace product block design settings
Unfortunately, we don’t have a lot of design options for this specific content block inside the design tab or site style menu.
How to customize the Squarespace product block with CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace.
In August of 2024, new tutorials will be published that will help you customize the style of your product block. There are no custom code tutorials available for this content block at this time.
Where you can learn more about Squarespace content blocks
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.