Quick Tip: E-Commerce in 30 Seconds with Gumroad and Jekyll

Ecommerce with Jekyll and Gumroad in thirty seconds

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.

For web designers, Gumroad makes available some exciting features, in particular their widgets, webhooks, and API (Application Programming Interface).

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.

Widgets page on Gumroad Website for integration with Jekyll

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).

Code snippet generated by Gumroad to integrate with Jekyll

Add the Gumroad Script to Your Website

Continue reading %Quick Tip: E-Commerce in 30 Seconds with Gumroad and Jekyll%

Source: Sitepoint