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. 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 this video, and get ready to take your online store to the next level!
- - -
Learn how to use the product add on feature → insidethesquare.co/tiny/produ...
- - -
Here is the full code from the tutorial. For more information, visit the original blog post at insidethesquare.co/squarespac...
.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 Links
📝 Original blog post → insidethesquare.co/squarespac...
📑 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
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #WebDesign #CSS #Tutorial #HoverEffects #WebDevelopment #FrontEndDevelopment #CreativeDesign #UIUX #CodeTutorial
20 май 2024
