Articles in this category

GOOD STUFF!

How to embed Subbly on Squarespace

Since we have plenty of customers using Squarespace for their site, it would be really useful for them to know how they can easily integrate their Subbly product checkouts on the existing Squarespace store. Read on..
When embedding Subbly subscription products into the site that was built on Squarespace, you will have to handle your customer's subscriptions through your Subbly admin, and not through your Squarespace admin.

Video tutorial

For all of you who are better off with the video tutorial, we recorded one for you and you can find it below.

For the rest of you, you can find additional information in the text below.

There are basically 2 ways of integrating Subbly to your Squarespace page to add the ability to take recurring payments:

  1. Create a separate button on your Squarespace site and link it to the Subbly product checkout page. Note that this will open a checkout in a separate tab and will move customers away from your site to checkout.
  2. Embed Subbly product checkout to your Squarespace website. This will create a button on your existing page and will invoke a checkout in a popup directly on the site.

For the purpose of this tutorial, we will use some generic Squarespace theme and just show you how to create a button on Squarespace and link it to your product created on the Subbly admin.

First of all, you should enter edit mode on Squarespace and choose to add a button to the selected area.

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434361645/1-sq-hl-0.png

After that, you can customize the caption of the button (the caption should preferably be ''subscribe'' or ''buy''), its size, and alignment inside the HTML element.

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434361987/2-sq-p-60.png

Now it's time for us to head back to our Subbly admin and copy the product checkout URL to the appropriate field on Squarespace.

Of course, in order to do so, you will need to have your product(s) on Subbly created beforehand. Make sure to do it from here.

When you create your product on Subbly, you can enter a specific product's panel from Products --> Subscription or One-Time and copy the unique checkout URL for the product into Squarespace's Clickthrough URL field.

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434362627/4-sq-o-rs.png

While on Squarespace click Apply and Save your progress.

You're all done here now and your Subscribe button is opening Subbly checkout in the new window!

How to embed Subbly product checkout to your Squarespace page?

In this subsection, we will guide you on how to embed your Subbly checkouts to your Squarespace page by adding a code block(s) to your Squarespace.

The main benefit of doing this is to keep the entire checkout experience on the same page, without the need for the customer to be redirected to a separate checkout URL. If you embed Subbly product checkouts on your Squarespace page, they will appear as a pop-up on your Squarespace site.

First of all, head to your Squarespace page where you'd want to embed Subbly checkout, choose a desired area and opt for adding a Code to it.

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434363074/5-sq-qpo.png

Now it's time for us to head back to our Subbly products listing page on your Subbly admin (Products-->Subscription or One Time on your admin) and to click on Action-->Embed for the product which checkout we want to be embedded on our Squarespace.

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434363432/6-sq-hhs.png

You will be taken to the Widget Builder panel where you can customize the looks of the embed button that will appear on your Squarespace store.

After you're finished customizing the way your button will look, make sure to copy the widget embed code in the appropriate field on your Squarespace page.

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434363780/7-sq-jiw.png

https://files.helpdocs.io/h1fi47vfhz/articles/koj5lu8x8d/1639434364061/8-sq-v-i.png


Click on Apply and make sure to Save your progress on your Squarespace admin.

Voila! If you open up your site you will see that you successfully embedded your Subbly product checkout to your Squarespace store. The best part of it - it opens up in the popup directly on the site when you click on Subscribe button.

As always, let us know if any questions by using the chat widget which you can find inside your Subbly admin.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free