Using Our Product Blocks in Website Design
Squarespace product blocks are a key tool for promoting your client’s products and driving conversions on their online store. These blocks ensure a seamless shopping experience by pulling information directly from existing items on store pages and merchandising them on other areas of a website. This means you and your client won’t have to double your work when writing product descriptions or selecting images.
Product blocks are a simple, no-code solution to elevate your web design offerings. They give you the creative freedom to work with custom layouts and can be added to any page of your client’s website, such as within a blog post or other content area. Product listings can also be styled to fit your client’s brand for an even more consistent customer experience.
In this article, we’ll explore what businesses benefit from implementing product blocks and how to use the blocks creatively and effectively.
Before you begin
In order to use product blocks, your client will need to have an enabled store page set up that contains the product you want to display. The product will also need to be visible and published, meaning it is available for purchase.
The following are questions to consider when determining if your client’s website is a good fit for product blocks:
Does your client have a clear brand identity?
Do they have strong and consistent product images?
Can their products be tagged, sorted into groups, or curated?
Does their site have a content-focused area, like a blog page?
Does your client have gated content that would benefit from being promoted to a wider audience?
Do your client’s products or services offer opportunities for cross-selling or upselling?
Use cases for product blocks
Clients selling products or select services online may benefit from including product blocks throughout their online store. The following are more specific examples of use cases for product blocks.
Draw attention to one product or service
If your client wants to highlight a particular product (think seasonal or limited edition item), try placing a product block on their website’s landing page. The product block will serve as the page’s focal point and will draw customers’ attention.
Pro tip: When designing your client’s website, you can move the store page to the Not linked section of the pages panel, thus removing it from the navigation menu while keeping it enabled. From there, design the landing page with the single product or service they are selling. This will emphasize their offering and give it a clean, simple URL.
Present products in an intuitive way
If your client has a blog, place an inline product block within the text to highlight items or services related to the article's topic. In addition to giving customers the opportunity to quickly make a purchase, including the product blocks directly on the page saves customers from having to search and navigate to find the products elsewhere—ultimately driving sales for your client.
Pro tip: At the end of the blog post, add a summary block to display all of the items mentioned in the post.
Organize information
Product blocks are great for organizing products by tags, descriptions, titles, and more. For example, if your client runs an online clothing store, you can use multiple product blocks to sort the clothing by type, such as tops, pants, outerwear, and shoes.
Pro tip: Use product blocks to show more creative flair by establishing curated collections of clothing, such as design lookbooks, for designers and fashion brands.
Promote gated products
Clients can use Member Areas to set up gated stores within their websites. This means that visitors must sign in (or subscribe) to your client’s Member Area in order to make a purchase from the gated store. By placing product blocks elsewhere on the website, you enable non-members to purchase typically gated products, increasing the opportunity for sale.
Pro tip: Using a product block to promote a gated product on a non-gated area of your client’s website is also an opportunity to advertise your client’s Member Area.
Learn more about mastering Member Areas.
Creative ways to use product blocks
Product blocks can come in handy even if your client doesn’t sell products or services. The following are some creative ways you can use product blocks to elevate their website:
Promote a spot in a paid newsletter sponsorship
Canvas for donations or crowd-funding
Collect product pre-orders
Use display tags to mark items as “bestsellers” to entice buyers
Highlight a mystery bag or limited edition product
Draw attention to a time-sensitive deal
Upsell, cross-sell, and show related products in a summary block or carousel
Use as a workaround with clients that want to use Squarespace’s “Add to cart” and eCommerce capabilities, but without the visual limitations of the product page
Best practices
The following tips will show you how to get the most out of product blocks’ capabilities and content design features.
Share the essentials — and get creative
Include basic product details, such as item title, price, and product description, but save the lengthy details for the product page. This approach will create a stronger and more impactful visual and make the content blocks more consumer-friendly.
Include a call to action. This can be as simple as “Add to Cart,” or you can customize the button text to suit the brand’s voice with content that relates to the item or business.
For a seamless shopping experience, enable the product quick view feature. This allows customers to add items to their cart without leaving their current page—the less friction, the higher the sales.
Select images to fit your client’s branding
A product block will display the product's featured image from the product page. With this in mind, you should choose a featured image that will capture a customer’s attention.
Consistency (and good lighting) is key for strong product photos that convert visitors into customers. In order to maintain this consistency, you can suggest easy-to-apply techniques to your clients, such as keeping the same background themes or sticking to one color palette.
Depending on the client’s brand, contextualizing products with props or a background might help visitors envision the items more clearly. For example, a jeweler can include a product photo that shows a model wearing the item for scale. Meanwhile, an artist can include images of their paintings on a solid or minimalist background to emphasize the artwork itself.
Ultimately, you’ll want to choose photos that create the most cohesive look for your client and establish a memorable brand identity.
Learn more about creating a solid brand identity for your clients.
Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.
