What I really love about Semplice is it’s ability to let you craft web pages for anything – not just design portfolios. As a designer who can’t code, it’s been an amazing help. 

So when I came up with the idea to write a book about Sketch and Semplice, I knew I had to create a site to sell it, I knew it had to be done with Semplice – all I needed was a way to handle the actual purchasing functionality. Thankfully, there’s Gumroad – an incredibly easy and lightweight web service specifically made for creators to sell their products online. 

Gumroad handles all the things on the selling side – including payments, refunds, discount codes, analytics, preordering and Integrating it with the Landing Page I built with Semplice couldn’t have been easier.

Here are the steps you’ll need to follow if you want to create a landing page and begin selling your products online. It took me under an hour to get mine up and running.


1. Design and Build your Landing Page with Semplice. 

Definitely the most obvious step in the process – you’ll need a page that sells your product to your customer. I did a quick mockup of mine in Sketch, and then built it out in Semplice on the fly. I added some information about the product, how it could benefit potential customers, a Mailchimp sign up form, and a big black button to grab preorders. Just leave the button link empty for now – we’ll hook this up with Gumroad later on.


2. Sign up for Gumroad and Create your first product.

Gumroad gives you a bunch of options to choose from – you can sell Digital, Physical, Subscription or Preorder based products. You’ll need to choose the option that best suits what you’re selling, and fill out the neccessary information. 

For Sketch and Semplice – I was selling a digital preorder. I selected a release date well into the future, because I had no idea when the book was going to be finished, and I create a preorder price of $19, with plans to increase it to $29 once the book was out. Please keep in mind Gumroad take a cut of each sale so make sure to price your product accordingly. 

The next step is to add some product images, write a product description – and begin uploading the final files. As Sketch and Semplice was a preorder, I didn’t have any files to upload. 

Once your done – hit Publish!


3. Embed your Product Button into Semplice

Now that your product is created in Gumroad, it’s time to link up that button you created on your landing page to Gumroad, so you can start making sales!

Adding in Gumroad Javascript Snippet

What you’ll want to do is copy this line of code, and add it into the Landing Page within Semplice by using a Code Module.

The code your entering is invisible on the page – so it won’t affect your design. But for organisational purposes – I always position mine at the bottom of the page.

This code triggers a little overlay window showcasing your product whenever a Gumroad link is clicked on the page. 


Adding Gumroad Link to Button

Now that you’ve got the Code Snippet in your page – you’ll need to add in your unique product link to your Button. You can copy your code from Gumroad. It should be something like http://gum.co/xxxxx

Head back over to Semplice, edit your sales button and paste in the link.

and your done! Your Landing Page is now hooked up to Gumroad and you can begin making sales. Open your site up and test out the button.

Clicking it will open up a product window allowing the customer to purchase your product.

Yay! ✨🎉

An extra tip:

For simplicity I’ve kept Sketch and Semplice on my personal portfolio site, http://matthewvernon.co but I bought a custom domain for it – http://sketchandsemplice.com and set it up to redirect to the landing page. This is a neat way to make it more brandable, without the added hassle of create an entirely new website and Semplice setup for the product. 

[unex_ce_button id="content_660k22kvc,column_content_9j2q2melk" button_text_color="#ffffff" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="#000000" button_padding="25px 60px 25px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#3a3a3a" button_border_hover_color="#000000" button_link="https://gum.co/WgcYL" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]BUY NOW – $29[/ce_button]