Hello Pixel

View Original

Creating a Custom Checkout Button on Squarespace

Ever want to use your shop and product section, but link it to an external checkout button or website?

Here are some examples:

  1. You want to list your Teachable classes as products on your website, but you want to link them to your Teachable checkout button.

  2. You’re a fitness studio and want to sell gift cards along with products, but you want your gift card linked to your fitness studio software.

  3. You want to sell an in-person service along with your physical products, but you want your checkout button to go to your appointment site.

These are just a few examples of how this tutorial can be used to create a custom checkout button on a specific product.

Tutorial

In your product description (where you’d like to add the button) add a text link. The text will be what you want the button to say. The link will be where you want it to go. For example Purchase Gift Card.

At the top, go to Additional Info in your Product Settings. Here, you’ll add a Code Block. Add the following code:

Squarespace 7.1

See this content in the original post

Squarespace 7.0

See this content in the original post

This is for a black button, with white text and rounded corners. You can style the button however you’d like in the code.

The code also hides the price and variants. You can remove these lines of code to keep them. Line 1 is the price. Line 2 is the variant.

Video Tutorial

Let me know in the comments if you have any further questions! Thanks!