How to Change the Colors of Your Squarespace Shopping Cart and Purchase Button

EcommerceSquarespace
Written By Katherine Forbes

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.

    Built with ConvertKit

    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…

    Katherine Forbes

    Katherine Forbes is the founder of Nashville based website and brand design company, Designing the Row. Her client roster has grown to include GRAMMY Nominated & Award Winning Artists, New York Times Best Selling Authors, Film Composers, Reality TV Personalities, & many more! She is known for her clean and simple design style and is recognized as a Squarespace Expert and Squarespace Authorized Trainer. She is also the creator of music community, Music Biz Besties, and teaches digital music marketing as an adjunct professor at ETSU.

    Her work has been featured on Forbes.com and she’s spoken on panels hosted by YELP, the Music Business Association, Women in Music, and many others.

    Katherine believes that "your success depends on you taking action" and she's passionate about motivating and encouraging others to do just that!

    https://www.designingtherow.com
    Next

    Link in Bio