Sign up for updates

Get a weekly update every Sunday with our announcements, company updates and a behind-the-scenes of what our community are building.
Over 11,000 people get our updates, join us!
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
⭠ all tutorials

Selling digital goods with Carrd + Gumroad

This tutorial is available for pro members only

Request access

Selling digital goods online - set up in 15 minutes. Landing page built with Carrd and then using Gumroad for payment and product delivery.  

(Inspired by Refactoring UI)

Create a landing page on Carrd

First set yourself up with a Carrd account (Makerpad members get 40% off with this deal). And select a blank canvas

We’re going to use the Refactoring UI website as inspiration for our site.

Set up your page with a white background, align center and up top.

Then add a container with width 70 and two columns. Set the alignment of the left column to ‘Left’ and the right column to Center. In the container apperance settings, set the contents alignment to center (vertically).

Add your heading and subheading text elements. Then add a form element.

We're using a Signup form and linking with Convertkit - you can follow the instructions on Carrd to do this.

Add an image on the right column.

The rest of the page is just basic styling which you can tweak how you wish.

I re-selected the page and changed the alignment to left so that the text in the second section would be left aligned. You can select containers to make them specifically center aligned. Adding two containers close togther, if you have them with background colours you will see a small gap between them. Make sure your top and bottom margins are on 0 instead of Auto.

For the Pricing section we use a list element and change the icon to checkmarks. For the FAQ section we use a Table element, remove the headings and style.

Set up your Gumroad product and link with your site

Sign up for Gumroad and go through the onboarding. Select your country and category. Now you can add a product - it's not recurring or anything so just select product.

Name it, price it and attach the file(s) you're selling - example: an ebook PDF. Then add a preview image and description as this is what will show on your 'checkout' page. You can also add a unique URL.

When editing you can preview what your page will look like. Copy the URL you created (and what shows when you preview) and head over to your Carrd site. Select the button in your pricing section and add the URL there.

You can add variants, discounts and license keys in your Gumroad product dashboard if applicable.

Publish your product! Once published, you'll be able to tweak the Gumroad button and add tags. Now you can add this button to your site - instead (or as well as) the custom button you created. You simply just add an embed element on the page, paste the code and you're done.

Publish the changes to your site and test it out - you'll see that both buttons work the same way.

And that's it - you're up and ready to sell your digital products in no time.

The full tutorial is available for pro members only

Request access

Selling digital goods online - set up in 15 minutes. Landing page built with Carrd and then using Gumroad for payment and product delivery.  

(Inspired by Refactoring UI)

Create a landing page on Carrd

First set yourself up with a Carrd account (Makerpad members get 40% off with this deal). And select a blank canvas

We’re going to use the Refactoring UI website as inspiration for our site.

Set up your page with a white background, align center and up top.

Then add a container with width 70 and two columns. Set the alignment of the left column to ‘Left’ and the right column to Center. In the container apperance settings, set the contents alignment to center (vertically).

Add your heading and subheading text elements. Then add a form element.

We're using a Signup form and linking with Convertkit - you can follow the instructions on Carrd to do this.

Add an image on the right column.

The rest of the page is just basic styling which you can tweak how you wish.

I re-selected the page and changed the alignment to left so that the text in the second section would be left aligned. You can select containers to make them specifically center aligned. Adding two containers close togther, if you have them with background colours you will see a small gap between them. Make sure your top and bottom margins are on 0 instead of Auto.

For the Pricing section we use a list element and change the icon to checkmarks. For the FAQ section we use a Table element, remove the headings and style.

Set up your Gumroad product and link with your site

Sign up for Gumroad and go through the onboarding. Select your country and category. Now you can add a product - it's not recurring or anything so just select product.

Name it, price it and attach the file(s) you're selling - example: an ebook PDF. Then add a preview image and description as this is what will show on your 'checkout' page. You can also add a unique URL.

When editing you can preview what your page will look like. Copy the URL you created (and what shows when you preview) and head over to your Carrd site. Select the button in your pricing section and add the URL there.

You can add variants, discounts and license keys in your Gumroad product dashboard if applicable.

Publish your product! Once published, you'll be able to tweak the Gumroad button and add tags. Now you can add this button to your site - instead (or as well as) the custom button you created. You simply just add an embed element on the page, paste the code and you're done.

Publish the changes to your site and test it out - you'll see that both buttons work the same way.

And that's it - you're up and ready to sell your digital products in no time.

Lesson details

Selling digital goods online - set up in 15 minutes. Landing page built with Carrd and then using Gumroad for payment and product delivery.  

(Inspired by Refactoring UI)

Create a landing page on Carrd

First set yourself up with a Carrd account (Makerpad members get 40% off with this deal). And select a blank canvas

We’re going to use the Refactoring UI website as inspiration for our site.

Set up your page with a white background, align center and up top.

Then add a container with width 70 and two columns. Set the alignment of the left column to ‘Left’ and the right column to Center. In the container apperance settings, set the contents alignment to center (vertically).

Add your heading and subheading text elements. Then add a form element.

We're using a Signup form and linking with Convertkit - you can follow the instructions on Carrd to do this.

Add an image on the right column.

The rest of the page is just basic styling which you can tweak how you wish.

I re-selected the page and changed the alignment to left so that the text in the second section would be left aligned. You can select containers to make them specifically center aligned. Adding two containers close togther, if you have them with background colours you will see a small gap between them. Make sure your top and bottom margins are on 0 instead of Auto.

For the Pricing section we use a list element and change the icon to checkmarks. For the FAQ section we use a Table element, remove the headings and style.

Set up your Gumroad product and link with your site

Sign up for Gumroad and go through the onboarding. Select your country and category. Now you can add a product - it's not recurring or anything so just select product.

Name it, price it and attach the file(s) you're selling - example: an ebook PDF. Then add a preview image and description as this is what will show on your 'checkout' page. You can also add a unique URL.

When editing you can preview what your page will look like. Copy the URL you created (and what shows when you preview) and head over to your Carrd site. Select the button in your pricing section and add the URL there.

You can add variants, discounts and license keys in your Gumroad product dashboard if applicable.

Publish your product! Once published, you'll be able to tweak the Gumroad button and add tags. Now you can add this button to your site - instead (or as well as) the custom button you created. You simply just add an embed element on the page, paste the code and you're done.

Publish the changes to your site and test it out - you'll see that both buttons work the same way.

And that's it - you're up and ready to sell your digital products in no time.

Previous submissions
No items found.
Supporting details

You must be a member to view the full lesson

Get started with
Makerpad today

The #1 platform for no-code education. Join over 10k others and discover what's possible.

Business

Multiple seat access, hire talent and custom training.

Learn more
Individuals

Unlimited all-access to our online bootcamps and community.

Get started
Email updates
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.

Ready to get started?

Join the community and start turning your ideas into solutions