Dragon Fruit e-commerce Jekyll theme can be hosted on static web servers like GitHub, Gitlab, Bitbucket, AWS S3, etc. There is no database involved. The cart is handled by snipcart.

Once you receive the file, extract it and serve it locally using bundle exec jekyll serve.

If you do not have bundler then delete the Gemfile and use jekyll serve. This should work as long as you have all the gems used in the theme.

If a gem is missing - let’s say jekyll-paginate is missing - you might see the following error.

Configuration file: /home/bryce/_repos/user/dragon-fruit/_config.yml
  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at!
jekyll 3.1.2 | Error:  jekyll-paginate

In the above error code, you can clearly see that you are missing jekyll-paginate. You can solve this by installing the missing gem using the command

gem install jekyll-paginate

Easy setup

Signup with Snipcart for free and get the API from this page.


The API would look something like the above string. This will be public test API unless you have set the snipcart environment to Live in the dashboard.

The test environment is useful for testing the workflow while setting up the shop.

Update the key and other details in the _data/main.yml file.

# This applies to all products
currency: '$'
cart-popup: true #set it to false if you do not want to see the popup showing the added product in the cart
support-button: true
documentation-button: true

# Sign up with SnipCart and go to to find your API
snipcart-api: OGI1NGJiZDktMDM5Ny00MWM0LTg0ZYTtNDQ5M2FmMzQ3MzJhNji20TU5MjcxOTA3NDM5MjE3

Set documentation-button: to false so that it is not included in the footer.

Quick product listing

The USP of the theme is a simple and quick product listing. Navigate to _data/products.yml and add your products.

- id: 1
  title: Cappuccino
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  image: /assets/images/cappuccino.jpg
  price: 2.99
  weight: 100
  maximum-quantity: 10

- id: 2
  title: Espresso
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  image: /assets/images/espresso.jpg
  price: 3.99
  weight: 100
  maximum-quantity: 5

- id: 3
  title: Mocha
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  image: /assets/images/black-coffee.jpg
  price: 2.59
  weight: 100
  maximum-quantity: 3

Change title, description, image, pricing, etc according to your needs. Place product images inside /assets/images/ directory. Make sure you follow the indentation.

This will add the product to the homepage. If you want to list these products in a different page then you can place the below code snippet and it should show the products on that page.

{% include products.html %}

Add a single product

Adding a single product to any page is easy as well. But here, you will have to provide all the necessary details of the product.

{% include product-single.html
    title="Black Tea"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."

This will place your product in a nice card layout. Adjust the image height accordingly. You can use multiple single products inside a <div class="row"></div> tag so as to lay them out uniformly in a row.

Chatbot setup

The theme includes Crisp chatbot. You can choose to use it or ignore. The setup is simple. Signup, go to integration, select HTML, copy the code and update it in the _data/main.yml file.

crisp-chat-website-id: b8658274-7163-8d3a-a8aa-7ae46ad8d460

You can find the code in _includes/chat.html