Adding Gumroad products to your Weebly site

If you are using Weebly 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 Weebly account
  • A published Gumroad product (review our Adding a Product article for the basics)
  • If you are going to use the Overlay (see below), ideally an SSL Certificate. This is not entirely necessary, but we recommend it. See our guide to obtaining SSL Certificates for more. Again though - not a requirement, just something to strongly consider.

In Gumroad

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

In Weebly

There are two 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:

  • Turning text into a hyperlink to your Gumroad product's URL (which is the URL of your Preview page). Weebly's tips on that are here.
  • Adding an image to your page and having it open, when clicked, your Gumroad product's URL
  • Create a button! In the left hand side of your page, under Structure&&&> Button. it, then click Link and link it to your product.


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 products without leaving your site. They can buy a single product at a time, OR, if you have multiple products on your page, they can buy a bundle of products at once. Read more about that here.

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 and drag Embed Code over onto your page.

Paste Gumroad's javascript code:

You now have three options:

  1. Use Gumroad's own button
  2. Use your own buy button
  3. Use a hyperlink

To use Gumroad's button, click and drag Embed Code to your page again. Hit Edit Custom HTML and paste this:

Except you need to replace "https://gum.co/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 create a hyperlink to trigger the overlay, see here.

Was this article helpful?