How to switch out the Squarespace “add to cart” button for your own custom button

Business
Written By Michelle Rohr

5 steps to switch out the Squarespace “add to cart” button for your own custom button:

  1. Create a Store Page in Squarespace

    • Go to your Squarespace dashboard, click on “Pages,” click the plus icon, and select “Store” to add a store to your site.

  2. Hide the Default Add to Cart Button

    • Copy the provided custom CSS code (see below) and paste it into the Custom CSS section of your Squarespace site to remove the native add to cart button and quantity selector.

  3. Add Your Custom Button to the Product Page

    • In your product settings, click “Edit Product,” go to the “Additional Info” section, add a new Button block, enter your desired link, adjust the alignment, and save.

  4. Move the Button to the Desired Location

    • Copy the second code snippet (see below) and paste it into the Code Injection’s footer area on your Squarespace site. This moves the custom button into the main product actions area, improving visibility and conversions.

  5. Test and Finalize Your Store

    • Refresh your store page to ensure the native button is removed and your new custom button appears where you want it. Make sure it links to your external checkout/platform, and do a final review for user experience.

The Code:*

PUT THIS IN THE CUSTOM CSS AREA:

.product-quantity-input {display: none !important;}.sqs-add-to-cart-button-wrapper {display: none !important;}

PUT THIS IN THE FOOTER SECTION OF THE "CODE INJECTION" AREA:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>

jQuery(document).ready(function($){

$('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');

})

</script>

*I didn’t come up with this code myself. I found it quite a while ago in Squarespace’s public FAQ Forums.

You may also be interested in:

Pretty Planner Promo Templates | CANVA

These are the exact mock up templates I use for many of the listings in my own planner shop. I love using these when I want to quickly create promo images that don’t require adding any text.

CLICK HERE

Get my Teachery Bonuses

Get my bonuses for making the most of Teachery - the platform I use to host and sell beautiful digital products.

CLICK HERE