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

This tutorial demonstrates how to seamlessly integrate Gumroad's e-commerce capabilities into a Jekyll website. The process is quick and beneficial for content creators.

Key Steps:

1. Obtain Gumroad Code: Navigate to Gumroad's Widgets page and select either the "Embed" or "Overlay" widget, copying the generated code snippet. This tutorial uses the "Embed" widget with redirect enabled.

2. Integrate Gumroad Script: Add the <script></script> element from the Gumroad code to your Jekyll site's /_includes/head.html file. Wrap it in a Liquid conditional statement ({% if page.content contains "gumroad" %}) to optimize loading, ensuring the script only loads on pages using the Gumroad widget.

3. Create the Dynamic Widget: Create a new file (gumroad-embed.html) in your /_includes/ folder. Paste the <div> element (or <code><a></a> element for Overlay) from the Gumroad code into this file. Replace the placeholder product ID ("demo") and link (href) values with Liquid tags ({{ include.id }}) to make the widget dynamic. This allows reuse with different product IDs on the same page. Example for Embed:

   <div class="gumroad-product-embed" data-gumroad-product-id="{{ include.id }}" data-outbound-embed="true">
     <a href="https://www.php.cn/link/5f353180421dc744d4e204a6c0f330cd"></a>Loading... </div>

   Example for Overlay:

   <a class="gumroad-button" href="https://www.php.cn/link/8239a17531bc8edea4ad8a2ddfdbbe17" target="_blank">{{ include.button }}</a>

   4. Embed the Widget: Use the Liquid include statement ({% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %}) to embed the widget on your Jekyll pages. Replace "YOUR_PRODUCT_ID" with your actual Gumroad product ID and adjust the button text as needed.

   

   Benefits of Gumroad Integration:

   • Easy e-commerce setup for content creators.
   • Detailed sales analytics.
   • Simplified payment processing.
   • Discount capabilities.

   This streamlined approach allows for effortless embedding of Gumroad products throughout your Jekyll website, enhancing its e-commerce functionality. The use of Liquid templating ensures flexibility and efficiency.