How do I set up the Gumroad Overlay?

What is the Overlay?

With The Gumroad Overlay, your customers on desktop computers can buy products from you without ever having to leave your website. The checkout experience outside of Gumroad is, with the Overlay, just as simple as the checkout experience on your Gumroad profile page.

What is does:

When buying a single product, the customer will see your product’s payment form pop out.

If you have multiple Gumroad products linked on your site, the experience will be much like buying on your profile page.

A buyer clicks on a product link, and the product page pops up. But now, a small payment window will appear in the upper right-hand corner of your page.

Clicking “I want this” will add the product to a bundle. Your buyer can then add more products to the bundle buy clicking “I want this” on other products they’ve opened. Change of heart? Items can quickly be removed from the list. Each product selected will appear in the small window, and when the buyer is ready to make their purchase, they click Pay.

If you'd prefer not to have the "multi-buy" feature on your site, let us know! We can show you how to turn it off. 

What this is not (yet!):

Right now the overlay is NOT a shopping cart. A shopping cart is the kind of experience you find on retail sites, or sites built through Shopify, where your bundle of purchases are tracked through the entirety of your site.

The Overlay works on a page-by-page basis. So, you will need to have a single “buy” page on your site where customers can buy all of your products.

Setting Up the Overlay

In brief, the overlay is a pop-up window that runs on JavaScript and magic. But how do you add this to your site? Well Gumroader, thats one of the greatest questions Man has ever asked, one that will never, ever be answe- oh, look at that! Here's a step-by-step guide:

1. Get an SSL Certificate

Please note: While an SSL certificate is 100% required to set up our Embed feature, many sellers choose not to obtain one to set up our Overlay.

Don't worry, it has nothing to do with Seditious Skateboarder Legions or Sea Snake Licking. An SSL (Secure Sockets Layer) is a standard security technology used to establish an encrypted link between a server and a client - usually a web server and a browser. Not only does an SSL certificate keep your site secured, especially when payments are taking place on it, but it also leads to higher conversion rates for our sellers.

Ready to dive in? Check out our guide to SSL Certificates!

2. Access the HTML of your page

To insert the code necessary for the overlay payment window to open, you need to be able to edit the HTML of your site. Go to the page where you want to add "buy" buttons, and open up the HTML. Click here for more about HTML.

Every website builder - Squarespace, Wordpress, Wix, Weebly, Blogger, Adobe Muse, etc. - has its own process and interface for users who wish to edit HTML, so check your respective site builder's help center or documentation to see how to do this. Most importantly, make sure you are able to insert Javascript into your page. If not, you will not be able to use the overlay.

3. Insert code

In the HTML of your page, enter the following code:

That’s it! Seriously! Now any time a Gumroad link is clicked on your page, the Overlay will activate.

4. Drop Your Buttons

To add the Gumroad Buy Button, put the following code wherever you want to link to your product:

Instead of "demo", you'll need to insert your product's ID. This can be found in the Options tab of your product - it's the "suffix" of your product's URL, basically.

You can change the text of the button by replacing "Buy my product" with whatever compelling, wallet-opening call to action you like.

To learn how to use your own stylish buttons on your website (we won't be offended), check out this article.

If you want your overlay button to open directly to the purchase form, rather than the product description, just put a button on your site that links, when clicked, to your Gumroad product’s URL. Check out this article for more context, and check out this article to learn how to find your product’s URL.

FAQs

Q: Can I automatically attach offer codes to my overlay window?
A: Yes! Just link to the URL of your product with your offer code as its suffix. For example, https://gum.co/demo with the offer code "offercode" becomes https://gum.co/demo/offercode

Q: Can I use the overlay as a shopping cart on my website so customers can buy multiple products at once?
A: Yes and no. The Overlay can only be used on purchases of single or multiple products ON ONE PAGE of your site. If someone navigates to another page on your site, they will no longer have a shopping cart.

Q: Can I use Google Analytics on my page as well as the overlay?
A: We have seen a few instances when Google Analytics hijacks the overlay script and blocking the overlay window from opening. If you wish to use Google Analytics as well as the overlay, we suggest that you integrate Google Analytics into your advanced Gumroad Settings.

Q: Does the Gumroad Overlay work on mobile?
A: No, it will open up a Gumroad payment form in a new tab.

More resources

Team up and sell more with Overlay

Setting up goals in Google Analytics

Was this article helpful?