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

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.

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

Start by copy-pasting the script element into your Jekyll site’s /_includes/head.html file. Now, you could just leave it like that, but unless you’re going to display Gumroad products on every page of your website, there’s no need to always load in the script file. To optimize load time, just wrap a conditional statement around the <script> tag using the Liquid language, which automatically detects when you’re actually using the Gumroad widget and only then loads the script:

{% if page.content contains "gumroad" %}
  <script src="https://gumroad.com/js/gumroad-embed.js"></script>
{% endif %}

Create the Widget

Now that the first part is done, all you have to do is build the actual HTML widget. To do this, create a new file in your /_includes/ folder called gumroad-embed.html, which is where you will copy-paste the second part of the auto-generated code:

<div class="gumroad-product-embed" data-gumroad-product-id="demo" data-outbound-embed="true">
  <a href="https://gumroad.com/l/demo">Loading...  </a>
</div>

Make It Dynamic

However, you’re not done building the widget quite yet. As you can see, it’s still linking to the default demo product. Instead, you want it to display whatever products you choose!

The solution is to replace the demo id value and the value of the link’s href attribute with a Liquid tag. In this tutorial, you’re going to set the variable inline, which makes it possible to use the widget several times on the same page (refer to my previous article, to learn more about other ways of setting variables in Jekyll).

<div class="gumroad-product-embed" data-gumroad-product-id="{{ include.id }}" data-outbound-embed="true">
  <a href="https://gumroad.com/l/{{ include.id }}">Loading...</a>
</div>

Note: if you’re using the Overlay widget, you might want to apply the same technique to make the element dynamic. Here’s how:

<a class="gumroad-button" href="https://gum.co/{{ include.id }}" target="_blank">{{ include.button }}</a>

Done!

And that is it! Congratulations, you can now easily embed products anywhere on your website with just one line of Liquid markup:

{% include gumroad-embed.html id="PRODUCT ID HERE" %}

Have you used Gumroad on your Jekyll website? How did you find the integration process? What’s your favorite e-commerce solution for Jekyll websites?

Let’s hear all about it in the comments below.