How to customise the shopping cart colors in Squarespace

In this tutorial, you'll learn how to customise the shopping cart colors in Squarespace website. This tutorial is specifically designed for Squarespace 7.1.

Your Squarespace shopping cart is more than just a functional feature—it’s an essential touchpoint for your customers. Customizing the cart’s colors can enhance your website’s aesthetics, improve user experience, and align the design with your brand. In this blog, we’ll show you how to customize the shopping cart colors on your Squarespace site using built-in tools and custom CSS.

Why Customize Your Shopping Cart?

• Brand Identity: A cohesive color scheme across your website creates a professional, polished look.

• Improved Accessibility: Thoughtful color choices make the cart more user-friendly.

• Higher Conversions: A visually appealing and functional cart can reduce cart abandonment rates and encourage checkout.

Complexity: Easy

---

Step 1

Select your icon.

• Navigate to Edit > Edit Site Header > Add Elements and ensure the Cart option is toggled on.

• Open your cart to begin editing.

• Select the Style option and choose your preferred icon.

• Adjust the icon size.

• Save to apply your changes.

---

Step 2

Copy the code below and from the Squarespace dashboard navigate to Pages > Webtools > Custom CSS and paste the code.

/* Cart Icon */
.header-actions-action--cart .icon {
  stroke: #E5AC00 !important}

.header-actions-action--cart .icon {
 fill: #E5AC00 !important}

Note: Change the hex color #E5AC00 to a colour of your choice. If your icon does not have a 'fill' property, delete the following code: .header-actions-action--cart .icon { fill: #E5AC00 !important}

---

Step 3

If you wish to change the colour of the quantity, use the code below, also change the hex color #E5AC00 to a colour of your choice.

.header-actions-action--cart .icon-cart-quantity { 
  color: #E5AC00 !important;
  font-size:30px}

---

---

Conclusion

Customizing your shopping cart in Squarespace is a simple yet impactful way to improve the shopping experience and strengthen your brand identity. With Squarespace’s intuitive design tools and the power of custom CSS, you can create a cart that is as beautiful as it is functional.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.