Product Blocks in Squarespace
TL;DR:
- Product blocks let you showcase individual store items on any page of your site
- Your store page must be enabled for the Add to Cart button to work
- Customize what shows (image, title, price, description) from the Content tab
- Change product image shapes and layouts through the Design tab
- Each block shows one product only – use multiple blocks for more products
Product blocks are handy when you want to feature specific products outside your main store page. They're perfect for highlighting new arrivals, bestsellers, or items that relate to your blog content.
Setting Up Your Product Block
Before you start, make sure you have a store page with published products. Without this, your product blocks won't work properly.
To add a product block:
- Go to the page where you want to feature a product
- Click 'Add Block' and select 'Product'
- Use the search field to find your product
- Select it and you're done
Remember, each block shows one product only. If you want to showcase multiple products, you'll need separate blocks for each one.
Customizing What Shows
The Content tab gives you control over what information displays:
Toggle on or off:
- Product image
- Product title
- Price
- Description
- Add to Cart button
This flexibility means you can create clean, minimal displays or include full product details depending on your needs.
Design Options
The Design tab controls how your product looks:
Image settings:
- Choose from different aspect ratios (square, landscape, portrait)
- Adjust image alignment
- Round corners to match your site's style
Layout options:
- Control spacing around the block
- Adjust text alignment
- Set image positioning
These settings help your product blocks blend seamlessly with your existing page design.
Button and Text Styling
Your Add to Cart button styling comes from your site's global settings. This keeps everything consistent across your site.
If you want to change the button text or appearance, head to your Site Styles editor. Any changes here will apply to all product blocks and your main store.
Font settings for product titles and descriptions also follow your site's typography settings, so everything looks cohesive.
Common Issues
Product won't add to cart: Check that your store page is enabled. If it's disabled, the Add to Cart functionality won't work.
Product not showing: Make sure the product is published and visible on your store page. Hidden or draft products won't appear in product blocks.
Styling looks off: Product blocks inherit styling from your site's global settings. If something looks wrong, check your Site Styles rather than the individual block settings.
FAQs
Can I show multiple products in one block?
No, each product block displays one product only. Use multiple blocks or consider a summary block if you want to show several products together.
How do I change the product image shape?
Go to the product block's Design tab and select your preferred image shape from the dropdown menu.
What if my Add to Cart button isn't working?
Check that your store page is enabled. If it's disabled, customers can't add products to their cart from anywhere on your site.
Can I customize the button text?
Yes, but you'll need to do this through your Site Styles editor, not the individual block settings.
Jargon Buster
Store Page: The main page on your Squarespace site where all your products are displayed together.
Product Block: A content block that displays an individual product on pages other than your main store page.
Add to Cart Button: The button customers click to add a product to their shopping cart.
Site Styles: Squarespace's global design settings that control the appearance of elements across your entire site.
Wrap-up
Product blocks give you flexibility in how and where you showcase your products. They're particularly useful for creating focused landing pages, featuring products in blog posts, or highlighting special offers on your homepage.
The key is making sure your store page is properly set up first. Once that's sorted, you can add product blocks anywhere and customize them to fit your design.
Experiment with different layouts and content options to see what works best for your audience. Some sites work better with minimal product displays, while others benefit from showing full product details.
Ready to take your Squarespace skills further? Join the Pixelhaze Academy for more in-depth tutorials and expert guidance.