How to Change the Colors of Your Squarespace Shopping Cart and Purchase Button
About this Squarespace video tutorial
Changing colors on your Squarespace website can be straightforward, but sometimes, default settings make it tricky. In this video tutorial, we’ll tackle a common issue: changing the color of your purchase button and shopping cart.
Timestamps
0:20 Color change issue
0:47 Purchase button color
1:58 Shopping cart color
3:52 Recap
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
Color Change Issue
If you've tried adjusting your color palette and found that the cart and checkout buttons remain stubbornly black, you're not alone. Many users encounter this issue, but fortunately, there’s a solution.
Purchase Button Color
The first step is to change the color of your purchase button. This is relatively easy. By navigating to the edit section of your product and selecting the appropriate color theme, you can customize the button to match your branding. However, remember that any background color change will affect all products in your store.
Shopping Cart Color
The real challenge arises when changing the shopping cart color. By default, it adopts the same color as your navigation menu, so to have different colors, you’ll need to use a bit of custom CSS. Here’s the code you can use:
body:not(.header--menu-open) [data-header-style="solid"].header .header-actions .icon--fill svg { fill: #30b6b2; /* Change this hex code to your desired color */ }
You can add this code under the Custom CSS section of your website settings. This will allow you to specify a different color for your cart icon, making it stand out from the navigation menu.
Recap
In summary, changing the colors of your purchase button and shopping cart on Squarespace can enhance your site's branding. With a simple CSS tweak, you can ensure your cart icon reflects your unique style. If you have any questions or need further assistance, feel free to leave a comment!
The latest Designing the Row tutorials…
