How to Embed Gumroad Products on Carrd

beginner 5 min read Updated 2026-03-24

Quick Answer

Embedding Gumroad products on Carrd is simple with the native Gumroad widget or embed code, but requires a Pro plan. Use Carrd's Widget element for official integration or paste Gumroad's buy button code into an Embed element. Publish and test on the live site to ensure it works.

Get Carrd Pro → Partner

Try Carrd Full Carrd Review

Prerequisites

Active Carrd Pro plan (Lite $9/year minimum)
Gumroad account with a created product
Published Carrd site (yoursite.carrd.co or custom domain)
Stable internet and modern browser like Chrome or Firefox

Step-by-Step Instructions

Create Gumroad Account and Product

If you haven't already, sign up for a Gumroad account at gumroad.com and create your product. Add details like name, description, price, and upload files (e.g., PDF). This generates your product page and shareable URL in the format https://gum.co/XXXXX.[1][4][5]

Log into Carrd Editor

Access your Carrd account at carrd.co, open the project editor for the site where you want to add the Gumroad button. Ensure you have a Pro plan as free plans block embeds and widgets.[1][4][9]

Upgrade to Pro Lite via Carrd Settings > Plan if needed.

Add Widget Element

In the Carrd editor, click the Add Element button, then select Widget from the options to create a new Widget element.[4][7]

Set Widget to Gumroad

In the Widget settings panel, change the Type dropdown to Gumroad. This enables Carrd's native integration for Gumroad buy buttons.[4][7]

Enter Gumroad Product URL

Paste your Gumroad product URL (e.g., https://gum.co/XXXXX) into the Product URL field. Find this URL on your Gumroad product page under Share or via Gumroad's help instructions.[1][4][5]

Position the widget above the fold for higher conversions.

Alternative: Get Embed Code from Gumroad

For custom options, go to your Gumroad product page, click Share > Copy buy button embed code, or visit Widgets for Modal Overlay. Customize button text if desired and copy the code.[1][2][5]

Add Embed Element (Alternative Method)

In Carrd editor, add an Embed element, paste the Gumroad embed code into the field, and position it on your page (e.g., near testimonials or product previews).[1][2][6]

Use async scripts if JS issues arise: wrap code in <code><script async></code>.

Save and Publish Site

Save your changes in the Carrd editor, then click Publish. Do not test in preview mode as embeds and JS won't execute there.[1][4]

Test Purchase Flow

Visit your published site URL on desktop and mobile. Click the button to verify it opens Gumroad checkout, test full flow including email/card entry.[1][2][3]

Add product testimonials nearby and check mobile responsiveness.

Debug with Browser Console if Needed

If issues persist, open browser console (F12), check for JS errors like CORS or mixed content. Republish after fixes.[1][2]

Common Issues & Troubleshooting

Embed or widget not displaying/blank

Upgrade to Carrd Pro plan (free blocks embeds); republish site and test live URL, not preview.[1][6][9]

JavaScript errors (CORS, mixed content)

Use HTTPS, add async to scripts, check console (F12) on published site; ensure modern browser.[1][2]

Button doesn't trigger checkout

Verify correct product URL or embed code copied from Gumroad Share/Widgets; test on desktop/mobile.[1][2][4]

Works in preview but not live

Publish the site first—Carrd preview doesn't execute embeds or JS.[1][4]

Low conversions after setup

Place button above fold, add testimonials/images, optimize for mobile checkout flow.[1][3]

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Carrd website before purchasing.

Visit Carrd View Carrd Pricing