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.
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).
To start powering up your Jekyll website with Gumroad, follow the steps below.
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
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 folder called , which is where you will copy-paste the second part of the auto-generated code:
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 value and the value of the link’s 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).
Note: if you’re using the Overlay widget, you might want to apply the same technique to make the element dynamic. Here’s how:
And that is it! Congratulations, you can now easily embed products anywhere on your website with just one line of Liquid markup:
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.