In my last quick tip, How to Build Customizable HTML Widgets in Jekyll, you learned how to make your own dynamic widgets for Jekyll websites. Today, I’m going to show you how you can use that knowledge to integrate your Jekyll-based website with Gumroad’s services to add really powerful e-commerce functionality in just a few seconds.
What is Gumroad
For those of you who don’t know, Gumroad is a San Francisco-based e-commerce startup launched in 2012. Their service is geared towards making e-commerce easy for content creators.
In addition, Gumroad also offers useful tools that enable you to track sales and market your products to potential customers. You can read more about all that on Gumroad’s website.
Embedding Products on Your Website
To start powering up your Jekyll website with Gumroad, follow the steps below.
Grab the Code from the Gumroad’s Widgets Page
The first step is to head over to Gumroad’s Widgets page, where you can get the code you’re going to use to create your widget.
Depending on how you want your Gumroad products to be displayed on your website, select Overlay or Embed (or why not make one widget for each option?). For the purpose of this tutorial, pick Embed with the Redirect to Gumroad option enabled.
Next, scroll down to the bottom of the page where you’ll find the Gumroad’s auto-generated code snippet. This code has two parts: a
<script> element, and a
<div> element wrapping an anchor tag (if you chose Overlay instead, the second part would be the anchor tag).
Add the Gumroad Script to Your Website
Continue reading %Quick Tip: E-Commerce in 30 Seconds with Gumroad and Jekyll%