Using Gumroad and Tumblr
If you are using Tumblr 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 Tumblr account
- A published Gumroad product (review our Adding a Product article for the basics)
- If you are going to use the Overlay, ideally an SSL Certificate. 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. Now open a new browser tab...
In Tumblr
There are two main methods of redirecting your customers to your product page. In order of fanciness, they are the following:
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. Do this by highlighting the text, clicking the link icon, and insert the URL of your product. The URL of your product is the URL of your Preview page.
- Adding an image to your page and having it open, when clicked, your Gumroad product's URL. In the HTML editing of the page, add an &
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. It works for purchasing one product at a time or multiple at once.
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 Copy and paste Gumroad's javascript code and then Save to save your changes.
You now have three options:
- Use Gumroad's own Buy Button
- Use your own buy button
- Use a hyperlink
Use the Gumroad Buy Button
To use the Gumroad buy button, add the following HTML snippet to your page
Be sure 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=trueto the end of the URL.
Use your own buy button
To use your own buy button, add an image or HTML block to your page that links to your products permalink.
Use a hyperlink
To create a hyperlink, highlight the words you want to turn into a link, click the link icon and enter your product's URL.