How to Move the "Add to Cart" Button on Squarespace 7.1
Why Button Placement Matters for Your Squarespace Store
The “Add to Cart” button is one of the most important buttons in any online store. It’s not just functional; it’s a conversion trigger. At any rate, if your customers can’t readily locate it or if it’s buried too far down your product’s page, you may miss out on a sale.
On Squarespace 7.1, this button appears below the description and options on its own. That’s fine for a lot of installations, but not always the best thing, particularly if you want to:
How to create visually exciting product pages
Enhance the mobile journey for the user
lower the friction in buying
Speed up the decision-making process
The good news? How to relocate the Add to Cart button with a little CSS. With a little custom CSS, you can easily reposition the Add to Cart button to a better location without needing to know code or relying on a third-party plugin.
Let’s suppose that you want to display it under the product title (where customers usually have to click to check the shipping information) or beside the price, or you want to center the shipping information so that it becomes easily noticed by the customers, and today’s guide will explain to you how to do it!
In this guide, I’m going to show you how you can change the Add to Cart button position in Squarespace 7.1 and take your store to a whole new level where it is intuitive, more attractive, and fully optimized for high conversions.
Step-by-Step: How to Move the Add to Cart Button
Step 1: Understand the Default Structure
On a Squarespace product page:
| Element | CSS Class |
|---|---|
| Product Title | .ProductItem-details-title |
| Product Price | .ProductItem-details-price |
| Add to Cart Form | .ProductItem-add-to-cart-form |
| Add to Cart Button itself | .sqs-add-to-cart-button |
So technically, you move the entire form or just the button if you want.
Step 2: Add Custom CSS to Move the Button
Go to Design > Custom CSS
Paste this code based on what you want to achieve.
Example 1: Move the Add to Cart Button Directly Under the Product Title
/* Move the Add to Cart form directly under the title */
.ProductItem-details {
display: flex;
flex-direction: column;
}
.ProductItem-add-to-cart-form {
order: 2; /* Comes after title */
}
.ProductItem-details-price {
order: 3; /* Price shows after Add to Cart */
}
This structure:
Title
Add to Cart button
Price
Example 2: Center the Add to Cart Button
If you simply want to center it on the page:
.sqs-add-to-cart-button {
display: block;
margin: 20px auto; /* Auto left/right */
padding: 14px 28px;
font-size: 18px;
}
This makes the Add to Cart button centered and bigger.
Example 3: Move Add to Cart Beside Price (Side-by-Side)
If you want the Price and Add to Cart buttons next to each other:
.ProductItem-details {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.ProductItem-details-price,
.ProductItem-add-to-cart-form {
margin-right: 20px;
}
.ProductItem-add-to-cart-form {
order: 2;
}
Hello, World!
Now on desktop, the Price and Add to Cart button sit horizontally like this:
$120 | [Add to Cart]
On mobile, they still stack neatly.
Important: How Squarespace Handles Add to Cart
| Situation | Behavior |
|---|---|
| Product with variants/options (size, color) | The button is linked to those fields |
| Single product (no variants) | The button is instantly active |
If you move the button visually with CSS, it still works perfectly—you are just changing the visual order, not breaking the cart system.
Quick Recap
| Step | What To Do |
|---|---|
| 1 | Understand the product structure (title, price, form, button) |
| 2 | Use Custom CSS to change order, alignment, and size |
| 3 | Save, preview, and tweak as needed |
In just a few lines of CSS, you can control exactly where your Add to Cart button appears!
Final Result:
After doing this:
Your "Add to Cart" button will be positioned exactly where you want.
It will look more professional, polished, and easier to find.
You’ll boost customer experience and conversion rates!
Your Squarespace store will now feel more customized and professional.
Mobile Optimization Tip
If you move the Add to Cart button,
Always check how it looks on mobile view too.
You may want a slightly different button size or margin for mobile —
You can control that separately using this CSS:
@media only screen and (max-width: 767px) {
.sqs-add-to-cart-button {
font-size: 16px;
padding: 12px 20px;
}
}
Makes the button finger-tap friendly on phones!
Frequently Asked Questions (FAQ)
1. Will moving the Add to Cart button break my checkout or cart functionality?
No, it won’t. You’re simply adjusting the visual location through CSS; the functionality itself still works. It is still possible for customers to place items in their cart.
2. Is this something that I need a developer or code knowledge for?
Not at all! This will require some basic CSS, which you can simply paste into your site under Design → Custom CSS. No developer, no plugins needed.
3. If I don’t like the new placement, can I undo the changes?
Yes. Just delete or comment out the CSS you used. Your product page structure will be back to Squarespace's default layout.
4. Is the update going to impact all the product pages, or just one?
The CSS will style all product pages that follow the structure to which it applies by default. If you want to just pull this off for just some of the pages, check out this page-specific ID or class with the CSS above.
