In this article:
- Overlaying
- Using custom buttons
- Inserting multiple buttons
- Send customers directly to checkout
- Embed
- Frequently Asked Questions
While always there is the option to redirect your customers to your Gumroad product page, creators and affiliates can also use our Overlay or Embed widgets to open the product page directly on their websites.
You will need the ability to edit your website’s HTML to make Overlay/Embed work.
Overlay
Go to your account widgets page, select “Modal Overlay”, change the button text if desired, and click “Copy Embed Code”.
Aho ra go to your website’s HTML editor and paste this code where you want to place the buy button.
If you’re using website builders like Squarespace, WordPress, Webflow, Carrd, etc., and you’re having trouble placing this code, check their documentation or contact their support teams.
p> Once installed, clicking the buy button will open the product page directly on your website, and the customer will be redirected to the Gumroad checkout page by clicking the “Add to Cart” button from where you can buy multiple products at once.
Using Custom Buttons
You can replace the native “Shop on Gumroad” button with your custom button, an image, or just plain text by removing the tag attribute.
Your code will look like this:
Insertion of multiple buttons
If you want to insert multiple overlapping buttons on your website, either for the same product or for different products, you only need to include the Gumroad JS Script once. Inserting the line multiple times can lead to errors.
For multiple buttons, your code will look like this:
Send customers directly to the checkout page
To send the customer directly to the checkout page when they click the checkout button, enable ” Automatically activate the payment”. form” on the Widgets page before copying the code.
Embed
To embed the entire product page on the website instead of having a popup, click “Embed” on your Widgets page, choose the product you want to embed and click “Copy Embed Code”.
Customers will be redirected to the Gumroad checkout page by clicking “Add to Cart” and completing the purchase from there.
Frequently Asked Questions
Q. Can I complete the payment on my website, instead of redirecting customers to Gumroad? A: Sorry, that’s not possible. The checkout page will allow us to add new features like upsells, cross-sells, retargeting using embedded JS on the product page, and more to come!
Q. Can I customize the look of the checkout page with CSS? A: Not yet, sorry!
Q. Can I hide or relocate the cart icon overlay on my website? A: The cart icon appears only after at least one product has been added to it. While there isn’t a built-in option to hide it yet, you may be able to hide it if you have access to modify your website’s CSS with:
.gumroad .cart-button { display: none !important; }
P. Can I apply discount codes to my product overlay/embed pages? A: Yes! Go to the “Checkout” tab of your product and get the URL of the discounted product by clicking the “Share” button next to the coupon name. Now paste this URL into the href attribute of your widget.
Q. Can I autofill some payment information while sending the customer from my website to the checkout page? A: Yes! Please see our URL parameters article to see which fields you can autocomplete on the checkout page.
.