How to add a product page

Jekyll collections front matter type

To add a new product page, simply add a file in the _products directory and include the necessary front matter.

Take a look at the product pages samples source to get an idea about how it works, you can these in the _products collection folder. By design, all the products are on display on the home page, in Supply, that is ìndex.html.

You can manually create pages to sort your product collection by custom variable.

You can also add Gumroad overlay for products in posts thanks to an include.

Write something like:

<a href="" class="no-underline pv2 grow db"><img class="w-100" src="/images/screenshot.png"></a>
{% include gumroad-overlay.html id="supply" %}

Since Jekyll 4.0, the link tag now comes with the relative_url filter incorporated into it. You should no longer prepend site.baseurl to link For further details:

to get a product display like this:

Don’t forget to customize your Gumroad button text in your post of product page front matter. For instance, the front matter of this post reads like this:

title: Theme setup
layout: post
description_markdown: >-
  Start your site using Jekyll + Gumroad with the Supply theme.
date: 2020-04-16 12:48:59 +0100
categories: [Jekyll, tutorial]
text-button: I demand Supply!

You can of course design your own “buy me” button instead of the Gumroad overlay icon