5 Cool Squarespace Add to Cart Button Tricks

Feb 25

Written By Toni Williams - Founder of The Square Genius

Squarespace Add to Cart Button Styles to Increase User Engagement

Wondering how to change the add to cart button in Squarespace? Try out these CSS tricks and let me know which one you love the most!

Why Style the Squarespace Add To Cart Button?

Your Squarespace add to cart button is one of the most important features in your Squarespace shop. A well-designed button can improve conversions, enhance the shopping experience, and align with your brand’s aesthetic. But the default add to cart button can feel plain. So, how do you change the add to cart button in Squarespace to make it more engaging?

In this guide, I’ll show you five cool ways to customise your Squarespace add to cart button using CSS animations and effects.

1. Add a Subtle Hover Animation

A slight hover effect makes your button feel more interactive, encouraging clicks. This simple CSS snippet adds a gentle zoom effect when users hover over the button. Add this to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS then paste the below code.

// add to cart effect by thesquaregenius.com //

/* Zoom hover */
div.sqs-add-to-cart-button {
    transition: all 0.3s ease-in-out;
}

div.sqs-add-to-cart-button:hover {
    transform: scale(1.05);
}

Why use this add to cart hover effect?

Gives a smooth, modern effect.
Helps draw attention without being overwhelming.

2. Add a "Shake" Effect to Grab Attention

Want your add to cart button to stand out? This shake effect adds a slight movement when users hover over it.

Add this to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS then paste the below code.

// add to cart effect by thesquaregenius.com //

/* shake effect */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

div.sqs-add-to-cart-button:hover {
    animation: shake 0.3s ease-in-out;
}

Why use this?

Increases engagement and encourages clicks.
Works great for special promotions or sales.

3. Create a "Push In" Effect

Make your Squarespace add to cart button feel like it’s being pressed when clicked. This effect gives users tactile feedback, making the shopping experience more interactive. Add the below code to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS

// add to cart effect by thesquaregenius.com //

/* push effect */
div.sqs-add-to-cart-button:hover {
    transform: scale(0.9);
    transition: all 0.1s ease-in-out;
}

Why use this push in effect?

Feels more like a real button.
Adds a smooth user interaction to enhance engagement.

4. Add an Outline ‘Glow’ on Hover

This stylish glow effect makes your Squarespace shop feel more premium by highlighting the button with a soft glow effect when hovered.

Add the below code to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS

// add to cart effect by thesquaregenius.com //

/* glow effect */
div.sqs-add-to-cart-button:hover {
    box-shadow: 0 0 20px rgba(221, 149, 185, 0.9);
    transition: box-shadow 0.3s ease;
}

Why use this glow effect?

Enhances visibility and highlights interaction.
Provides an elegant, engaging appearance.

5. Add a Rainbow Gradient Effect

// add to cart effect by thesquaregenius.com //

/* gradient */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }

div.sqs-add-to-cart-button {
    background: linear-gradient(270deg, #ff7eb3, #ff758c, #ff6a88, #64a4db, #65c66b);
    background-size: 400% 400%;
    animation: gradient-shift 3s ease infinite;
}

Why use this gradient effect?

Creates a modern, eye-catching effect.
Keeps the button visually engaging.

Customising your Squarespace add to cart button can significantly boost engagement and conversions. Whether you want a subtle hover effect, immediate visual feedback, or a fun bounce animation, these add to cart button CSS tricks help enhance your Squarespace shop’s user experience.

Did I help you? Consider buying me a coffee as thanks!

You might also be interested in my article on how to add a custom badge icon for your shop products.

Latest Plugins!

Quick View

Customizable Squarespace Social Proof Widget

Quick View

Hotspot Image Hover Effect Squarespace Plugin

Quick View

Pop-in Style Squarespace Timeline Plugin

For more cool Squarespace tips check out my blog, or sign up to my newsletter.

Check out my Squarespace Premium Plugins

Featured

Customizable Squarespace Social Proof Widget

Hotspot Image Hover Effect Squarespace Plugin

Pop-in Style Squarespace Timeline Plugin

Featured

5 Cool Squarespace Add to Cart Button Tricks

Confetti Effect For Squarespace Websites

How to Add a Copy to Clipboard Button for Squarespace

Toni Williams - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more. I am also a CSS enthusiast and love to create cool plugins for Squarespace websites.

https://www.thesquaregenius.com/author-toni-williams