How to Embed ThriveCart Checkouts in Squarespace
Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?
Squarespace makes it super easy to sell your services, digital and physical products. But if you're looking for an actual sales funnel capability, then Squarespace is a little lacking in that department. And that's where Thrivecart comes in.
Thrivecart is a checkout platform, but you can use it to build a very powerful sales funnel for your course, group program or any other type of informational product that you might have.
In most cases, if you have a sales page on your website and you’re linking to a ThriveCart checkout page, your visitors are taken away from your website. There’s nothing wrong with that. After all, that’s what ThriveCart was designed to do. But if you want to keep things more branded and if you want to minimize the amount of steps or clicks that visitors have to go through, you can embed Thrivecart checkout right on your Squarespace website.
And in this tutorial, I will show you how to do it.
How to Embed ThriveCart Checkout in Your Squarespace Website
For the purposes of this tutorial, I’m going to use one of my Squarespace templates that already comes with a pre-designed sales page. I’ve also set up a dummy product in ThriveCart to demonstrate the process. A couple of housekeeping tips: I am using Squarespace 7.1 with the Fluid Engine editor but this should work on any Squarespace website that is on a Business plan or above as the only thing we need is the code block functionality.
With that out of the way, you can watch the video tutorial below or you can scroll down for the written version if that’s more your jam.
Setting Up the Checkout Type in ThriveCart
Before we can embed the ThriveCart checkout into our Squarespace website, we need to customize the checkout type. If you’re following along, then log in to your ThriveCart account and select the product you want to work with. Click on Edit and go to the Checkout tab.
Now, you might have noticed that the Thrivecart team released new templates. For this tutorial, it doesn't really matter which you use, whether you use the new templates or the legacy templates since both have the option to be embedded in your website.
Click on Browse Gallery and then click the Yes, I understand button. If you're using legacy templates for your checkout pages, you would choose embeddable classic. And if you're using the new checkout designs, click over to embeddable and then you will be able to choose an embeddable checkout.
So for the purposes of this tutorial, I'm going to use this dummy product that I have created, and I'm going to show you how you can show Thrivecart checkout on your Squarespace website.
Now, there are two ways to do this. You can do embed the checkout as a button, where the checkout form shows up when somebody clicks a button on your website. Or, you can embed the checkout straight into your sales page.
Let's walk through both options.
Embedding ThriveCart Checkout in Squarespace
Click on edit and then go straight over to the checkout tab and click on Launch editor. And for this one, make sure that you have selected the embeddable option. The only other thing to do here is to make sure that it's set to single step because we want the payment information to be immediately visible. Then, click next to double-check or customize your success page and then click Save and get URL.
And now Thrivecart is going to give us a code that we can embed into our website. Click on the button that says Copy embed code. Then, go over to your sales page or any other page on your Squarespace website that has the information about the product you’re selling.
You can then add a new section with the embedded cart or you can add a code block to an existing section. Whichever method you choose, paste the code that you copied from ThriveCart into the code block.
Then, click Save and Exit.
If you scroll down, you should be able to see your ThriveCart checkout form so all your buyers have to do now is fill in their payment information and submit the payment.
Embedding ThriveCart Checkout in Squarespace As a Button
Now, another way to do this is to have the checkout appear once they click a button. Let’s go back to ThriveCart and then click on Edit product settings and go to Checkout. This time, you want to click on Modal and select whichever template catches your eye. You can customize the checkout how you normally would but you also need to customize the button that will trigger the popup to make sure it looks the way you want.
To do this, click outside of the checkout editor on the darkened area of the screen. You can control how wide you want the pop up to be. A few other options include adding a border radius, an overlay, blurring the page the popup appears on, adding a box shadow, and more. To customize the button, you need to click on the Customize pop up trigger button.
You have several options here. You can choose a button, an image, or a text link. For this tutorial, I'm going to click button and then click on the button itself to customize it. You can change the size of the button, the color, and the font. Don’t forget that you can also customize the text to make sure it makes sense for the product you’re selling.
When you’re happy with how the button and the checkout itself look, click on Next, then Save and get URL.
ThriveCart is going to give you the embed code again. So copy that code, go over to your sales page, click edit, and add a code block again. Keep in mind that if you have multiple buttons on your sales page, repeat this process as many times as you have buttons.
Once you’ve added the code block, paste the embed code from ThriveCart and then click Save, and then Exit. This time, you should see the button you’ve customized in ThriveCart and when someone clicks on it, the ThriveCart checkout page should load.
Final Thoughts
And that’s it for this tutorial. If you want more Squarespace tips and tricks, I’ve got a few tutorials linked for you down below and if you want step-by-step walkthrough of how to actually launch your website, click the image to download my free Squarespace launch roadmap.
For more tips and tricks, check out these articles:
