Using Gumroad and Squarespace

If you are using Squarespace to build a website, and want to integrate Gumroad's payment forms into your page, then look no further! Well, you still need to read the instructions on this page, but that's not really considered "looking". Anyway.

Let's do it!

What you'll need:

  • A Squarespace account
  • A published Gumroad product (review our Adding a Product article for the basics)
  • Ideally, an SSL Certificate if you plan on using the Overlay or Embed (see below). This is not entirely necessary, but we recommend it. See our guide to obtaining SSL Certificates for more.


In Gumroad

Publish your product and go to your product's Preview page from the Edit, Options, or Timeline tabs. Now open a new browser tab...


In Squarespace

There are three main methods of redirecting your customers to your product page. In order of fanciness, they are...

1. Sharing the Link

By simply linking to your Gumroad product, your customers will be directed to a new browser tab to complete their purchase. You can set up this buying flow by:


2. Add the Overlay to your Page

As a refresher - the Gumroad Overlay is a pop-up window (not the annoying kind) that allows your customers to buy your product (or multiple products at once) without leaving your site.

Create a Sales page, or a page where you are going to create a buy "button" or link to your Gumroad products. Write some compelling content, and have a place in mind for the link you are going to create for your product. Now click Page Settings in the top right of your edit window.

Now click Advanced and paste Gumroad's javascript code:

<scripttype="text/javascript"src="https://gumroad.com/js/gumroad.js"></script>
view rawgumroad-js.html hosted with ❤ by GitHub

And click Save to save your changes.

You now have three options:

  • Use Gumroad's own button
  • Use your own buy button
  • Use a hyperlink

To use Gumroad's button, add a new item to your page, and click Code. Now paste this, in HTML:

<aclass="gumroad-button"href="https://gum.co/demo">Buy my product</a>

Except you need to replace "demo" with your product's URL. This will add this cool little button to the page. You can customize the text, or send customers directly to the payment form by adding ?wanted=true to the end of the URL (more on that here).

Buy my product

To use your own buy button, simply add an image to your page and having it open, when clicked, your Gumroad product's URL.

To learn how to use a hyperlink, see here.

3. Embed Your Product

Embedding a product will place it neatly into your page, allowing your customers to buy from you, download their product, and never leave your lovely site for one second. To use embed, follow these steps.

Create a Sales page, or a page where you are going to create a buy "button" or link to your Gumroad products. Write some compelling content, and have a place in mind for the link you are going to create for your product. Now click Page Settings in the top right of your edit window.

And click Save to save your changes.

Now add a Code block to your page where you want the product to be.

Paste the following code into HTML:

Where "demo" is replaced by your Product's ID. Click here to learn how to find that. And click Save. Your page, in Edit mode, you'll just see "..." where the Embed ought to be. You'll only be able to see your product fully enabled when you click View Page.

Was this article helpful?