Adding Gumroad to your Wordpress site
If you are using Wordpress 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 Wordpress Business account. See here for more information on setting up a Business account.
- A published Gumroad product (review our Adding a Product article for the basics)
- The Gumroad Wordpress plugin
Publish your product and go to your product's Preview page via the Edit, Options, or Timeline tabs. Now open a new browser tab... Publish your product and go to your product's Timeline tab. Now open a new browser tab...
In your Dashboard, go to eCommerce Plugins, find Gumroad, and click on Activate.
There are three main methods of redirecting your customers to your product page. In order of ascending 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. Wordpress' tips on that are here.
- Adding an image to your page and having it open, when clicked, your Gumroad product's URL
2. Using Overlay
As a refresher - the Gumroad Overlay is a pop-up window (not the annoying kind) that allows your customers to buy your product (or products) without leaving your site. They can buy a single product at once, or buy all of your products from you, using our neat pop up window.
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 it's time to drop your shortcode.
You can use the [gumroad] shortcode to display Gumroad products on your WordPress.com site. Here's what the shortcode looks like:
[gumroad id="XXXX" text="Purchase Item" type="overlay" wanted="true" ]
What this all means:
gumroad id: Your Gumroad product ID (hint: it won't be XXXX). You can find this on the Options tab of your product. For context, please read this Help Center article.
text: The text displayed on your Gumroad product's Buy button. This only applies when using Overlay.
type: Allows you to select either "embed" or "overlay". The default is "overlay"
wanted: This can either be set to "true" or "false", and if you leave this out, the default will be "false". When "true" this automatically displays the payment form, rather than the product's image and description. For more context, please see this Help Center article.
3. Embedding the Product
As a refresher, the Gumroad Embed is your product or payment form completely embedded in your page.
To use this code, just drop the following into your page:
[gumroad id="XXXX" type="embed"]
The code won't look like much when it's in the editor, but once you publish the post or page you pasted it into, you'll either see your "Buy" button when using the Overlay or the product itself when using Embed.