Installation
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 download.zip 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 http://jekyllrb.com/help/!
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.
OGI1NGJiZDktMDM5Ny00MWM0LTg0ZYTtNDQ5M2FmMzQ3MzJhNji20TU5MjcxOTA3NDM5MjE3
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 https://app.snipcart.com/dashboard/account/credentials 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
id="4"
title="Black Tea"
description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
image="/assets/images/black-tea.jpg"
image-height=300
price="5.99"
weight=""
maximum-quantity="2"
%}
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