How to Customize Squarespace Product Blocks with CSS
If you’ve ever built an online store on Squarespace, you know that the platform offers a clean and intuitive way to showcase products. One of the most versatile tools in your Squarespace arsenal is the Product Block. This feature allows you to display specific products from your store on other pages or blog posts, creating opportunities to upsell, cross-promote, or simply make your site more engaging.
But here’s the catch: the native Product Block comes with limited design flexibility. That’s where custom CSS comes in. In this post, I’ll walk you through what you can do with Product Blocks and how to take them to the next level with custom styling.
Watch the Video 👇
What Are Squarespace Product Blocks?
A Product Block lets you feature individual products from your store on other pages or blog posts. Think of it as a mini spotlight for your merchandise. It’s an easy way to promote items in a blog post, a service page, or even a homepage banner.
Here’s what you can display with a Product Block:
Image: Displays the product’s featured image.
Title: Shows the product’s title.
Price: Lists the product’s price.
Description: Includes a snippet of the product description.
Add to Cart Button: Allows visitors to add the product directly to their cart.
Product Quick View: Enables a pop-up preview of the product.
All these elements can be toggled on or off in the Design tab of the block settings. However, for those of us who want a truly unique design, these settings might not be enough.
Why Customize Product Blocks with CSS?
The built-in customization options are great for quick edits, but they don’t allow you to:
Change fonts or font sizes for the product title and price.
Adjust the background or border styles for product variants.
Fine-tune the spacing and alignment of elements.
Add visual flair to the Add to Cart button.
With custom CSS, you can fully control how your Product Blocks look, ensuring they align perfectly with your brand’s style. It’s the perfect solution for creating a polished, professional, and unique website design.
Step-by-Step Guide: Adding Custom CSS to Product Blocks
Here’s a quick guide to styling your Product Blocks with CSS. Before you start, make sure you’re comfortable adding CSS to your Squarespace site. If not, feel free to reach out for help—it’s what I do best!
Targeting Product Block Elements
Here are some common elements you might want to customize:
Product Title: Change the font style, size, or color.
// Product Block Title Font //
.product-block .productDetails .product-title {
font-weight: 700 !important;
text-transform: uppercase !important;
}
Product Price: Make the price stand out.
// Product Block Price //
.product-block .productDetails .product-price {
color: #d7d7d7
}
Variant Options: Style the background and text.
// Product Block variant font color //
.product-block .productDetails .product-variants .variant-option {
color:#d7d7d7 !important;
font-weight:600 !important;
text-transform:uppercase !important;
}
// Product block variant option background //
.product-block .productDetails .variant-option select {
background:black!important;
color:#bfd730!important;
border-radius:6px!important;
text-align: center !important;
}
Quantity Text and Box: Adjust the look of quantity input fields.
// Product Block quantity text //
.product-quantity-input {
color:#d7d7d7!important;
text-transform:uppercase!important;
font-weight:600!important
}
// Product Block Quantity border radius //
.product-block .product-quantity-input input {
border-radius: 8px;
}
Add to Cart Button: Make it irresistible to click.
// Product Block Add To Cart Button Styles //
.product-block .productDetails .sqs-add-to-cart-button {
background:black !important;
color:#bfd730!important;
border:1px solid!important;
}
Best Practices for Styling Product Blocks
Keep it On-Brand: Use your brand’s colors, fonts, and styles to ensure consistency.
Test on Mobile: Squarespace’s templates are responsive, but custom CSS may need tweaking for smaller screens.
Preview Before Publishing: Always check how your changes look on a live preview before publishing them.
Your Designer
I'm Travis, an expert Squarespace web designer and 7+ year former Squarespace employee. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email at travis@coyotemooncreative.com. Alternatively, you can book a 30-minute consultation call here.
Newsletter Signup
Sign up for my newsletter to receive detailed Squarespace design tutorials delivered to your inbox monthly. Get practical Squarespace design tips, as well as digital marketing strategies to grow your online business.
