Supply is an e-commerce template for Jekyll + Gumroad, designed with Tachyons CSS.
If you are a Gumroad creator, you can use Supply with Jekyll to display and sell products on your site or blog.
Browse through a live demo: https://templates.supply.
Find more templates, themes, and Jekyll tutorials.
_config.yml
.Supply was built with Jekyll version 4.0.0 and should support newer versions as well.
Install the dependencies with Bundler:
$ bundle install
Run jekyll
commands through Bundler to ensure you're using the right versions:
$ bundle exec jekyll serve
Add your custom configuration in the _config
file.
navigation.yml
in _data
.Look for footer.html
in _includes
to add and change your footer links.
To add you formcarry endpoint URL to _config.yml
, you'll need a fromcarry account, please refer to formcarry documentation
Add your map coordinates if you want to display a map. Please refer to the jekyll-leaflet plugin and [Leaflet](https://leafletjs.co m) documentation for customizing your map(s).
If you have products on Gumroad, you can start adding product pages right away. Within the Supply theme, you'll find a sample of a product page with free products, free-products.html
, located in _pages
.
npm install
You can change the site styling using Tachyons, look for the CSS in the sup-theme
file, located in the src
folder.
Tachyons is a CSS toolkit and design system based on using components. Please refer to Tachyons documentation, you can also start with https://github.com/dwyl/learn-tachyons
Supply uses a couple of custom Gulp.js commands with gulp. Make sure to install gulp 4: npm install --global gulp-cli
. (If you have an earlier version of Gulp JS, make sure to remove it by running npm uninstall --global gulp). Then run npm install --save-dev gulp@4
to install it into your project development dependencies.
Once that is done, to build your site & concatenate your CSS (in assets
-> CSS
), simply run:
gulp build
in Terminal.
Then use
gulp watch
This command builds the site locally on port 3000, with Browsersync so you can quickly revise design changes.
Preview your site with browser reload at localhost:3000 Use the address localhost:3001 for additional features like grid preview, CSS highlighting, and more during development.
_posts/_defaults.md
.To display products, Supply uses a collection called product
You will find a series of product samples 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 based on this index to sort your products or any other collection by custom variable.
You can also add your products in regular posts, using the Gumroad overlay, embed, and hyperlinks method, thanks to an include snippet.
Write something like:
{% raw %}<a href="https://gum.co/supply class="no-underline pv2 grow db"><img class="w-100" src="/images/screenshot.png"></a>
{% include gumroad-overlay.html id="supply" %}{% endraw %}
to get a product display like this:
Supply is designed by alternatyves and licensed under the MIT license.
Please use and contribute to Supply .
Are you using Supply? Let me know!