Repository files navigation

Supply is an e-commerce template forJekyll +Gumroad, designed withTachyons CSS.

If you are a Gumroad creator, you can use Supply with Jekyll to display and sell products on your site or blog.

Demo Site with documentation

Browse through a live demo:https://templates.supply.

Supply is designed byalternatyves.

Find moretemplates, themes, and Jekyll tutorials.

• List & display products, thanks to Jekyll's collections
• Take payment online usingGumroad
• Contact form withformcarry
• Map withLeaflet thanks to thejekyll-leaflet plugin
• jekyll-archives to build and sort through categories & tags pages
• Custom variables
• RSS/Atom feed
• SEO tags
• Microdata markup
• Jekylllivereload + NPM for fast development
• Built-in site search

1. InstallJekyll
2. Add your site and author details in_config.yml.
3. Get a workflow going to see your site's output with Jekyll locally.

Supply was built withJekyll version 4.0.0 and should support newer versions as well.

Install the dependencies withBundler:

$ bundle install

Runjekyll commands through Bundler to ensure you're using the right versions:

$ bundleexec jekyll serve

Add your custom configuration in the_config file.

• Exposed as a data file to give clients better access
• Set in theData /Navigation section, look fornavigation.yml in_data.

Look forfooter.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 toformcarry documentation

Add your map coordinates if you want to display a map. Please refer to thejekyll-leaflet plugin and [Leaflet](https://leafletjs.com) 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.

4. Install Node module dependencies:

npm install

You can change the site styling usingTachyons, look for the CSS in thesup-theme file, located in thesrc folder.

Tachyons is a CSS toolkit and design system based on using components. Please refer toTachyons documentation, you can also start withhttps://github.com/dwyl/learn-tachyons

Once you are done with your style changes, run:

Run the npm run

build:css

That will process all your CSS files in one readable file located inassets/css/sup-tachyons.css.

to minify your css you can run

npm run minify-css

or

npm run start

to minify and build the site locally.

Supply uses a couple of custom Postcss npm scripts. Make sure your dependencies are installed:npm install. Typenpm outdated to see if you have outdated versions, then install any outdated dependencies.

Once that is done, to build your site & concatenate your CSS (inassets ->CSS), simply run:

npm run start

This command builds the site locally on port 4000, you can quickly revise design changes thanks tolivereload.

• Add, update, or remove a post in thePosts collection.
• Change the defaults when new posts are created in_posts/_defaults.md.

To display products, Supply uses a collection calledproductYou 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 tosort your products or any other collection by custom variable.

You can also add your products in regular posts, using the Gumroadoverlay,embed, andhyperlinks method, thanks to an include snippet.

Write something like:

{% raw %}<ahref="https://gum.co/supply class="no-underlinepv2growdb"><imgclass="w-100"src="/images/screenshot.png"></a>{% include gumroad-overlay.html %}{% endraw %}

to get a product display like this:

Supply is designed byalternatyves and licensed under theMIT license.

Please use andcontribute toSupply.

• templates.supply

Are you using Supply?Let me know!