How To Customize Squarespace Product Add-On
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
I’m excited to share some creative codes for a powerful new feature: product add-ons! This awesome functionality lets you easily promote additional products alongside your main offerings, boosting sales and creating irresistible bundled deals.
But what if you want your add-ons to seamlessly blend with your website's aesthetic? Squarespace doesn't offer built-in design options for add-ons just yet, but fear not, Squarespacer! I created some custom codes that will help you make the style of your product add-ons uniquely yours.
We'll be diving deep into the world of custom code to transform the look and feel of your add-ons. Get ready to say goodbye to the default design and hello to a fully customized experience! In this step-by-step tutorial, you'll learn how to customize quite a few parts of this feature.
We’ll start by removing the border and adding a custom background color that flawlessly integrates with your website's color palette.
After that we’ll change the shape of the product add on card. Square corners can feel a bit boxy, so with a few lines of code, you can create beautifully curved add-on card corners. We'll also adjust the size and shape of the thumbnail, finishing things up with a custom font style for the product title.
By the end of this tutorial, you'll be a product add-on customization pro, ready to create stunning and effective add-ons that seamlessly integrate with your Squarespace website's design. When you’re ready, click play on the tutorial video, and get ready to take your online store to the next level!
Squarespace Tutorial
Code Example
Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes uniquely yours!
.product-details .pdp-product-add-ons .add-on-card {
background:#fff;
border-radius:50px
}
.product-details .pdp-product-add-ons .add-on-card:hover {
background:#e5f5f6
}
.product-details .pdp-product-add-ons .add-on-card .add-on-thumbnail{
border-radius:50%;
transform:scale(1.2)
}
.product-details .pdp-product-add-ons .add-on-details .add-on-title{
font-weight:bold;
margin-bottom:0px!important;
text-decoration:underline
}Related Content
📑 My Squarespace code collection: insidethesquare.co/css
🙋♀️ Learn CSS for FREE: insidethesquare.co/learn
❤️ Show your appreciation with a donation →buymeacoffee.com/insidethesquare
🙋♀️ Have a question? Get code support → insidethesquare.co/code-help
