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 Shpoify Lite.

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 Shopify Lite for free(14 days trial & then $9/month) and get the Shopify Storefront Access Token as shown below.

For complete setup, you will have to change the Storefront Access Token and shopify domain variables found in _data/main.yml.

Once you sign-up with Shopify Lite, add a product using Products tab on the left navigation panel. Make sure the Quantity is more than one or select Don’t track inventory in Inventory policy

jekyll-shopify-lite-add-product

Now, you have to create a button for the product.

In the same left navigation panel, click on the Buy Button option.

jekyll-shopify-lite-buy-button-channel

jekyll-shopify-lite-buy-button-create-button

In the next window, select Product Buy Button and select your product in the popup.

jekyll-shopify-lite-product-buy-button

Now, select basic options and click Next.

jekyll-shopify-buy-button-creation

Here you should see the product code. Copy it to a text file and look for storefrontAccessToken: '79d6c2c93..... This number will be your Store Front Access Token. Copy this to the themes data file found in _data/main.yml

jekyll-shopify-lite-get-your-buy-button-code

That should do it. Now your Jekyll Shopify site is set up.

Change a few details in the main.yml file as per your convenience.

# This applies to all products
# This applies to all products
currency: '$'
add-cart-button-text: 'Add to cart'
cart-popup: false #set it to false if you do not want to see the popup showing added product in the cart
floating-cart: false # shows number of items in the cart in a floating button in phones

#Shopify StoreFront Access Token - https://docs.jekyll-themes.com//docs/dragon-fruit-shopify/installation/
shopify-domain: yourshop.myshopify.com
shopify-storefront-access-token: 79d6c2c956r57et7890bca9775d8e9c

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: 3792510845005
  title: Cappuccino
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  image: /assets/images/cappuccino.jpg
  price: 20
  category: coffee

- id: 3792518545485
  title: Espresso
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  image: /assets/images/espresso.jpg
  price: 25
  category: coffee

- id: 3792562421837
  title: Mocha
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  image: /assets/images/black-coffee.jpg
  price: 22
  category: coffee

Every product has its own unique ID. The product id can be found in the same buy button code where you found the Shopify Store Front Access Token.

jekyll-shopify-lite-buy-button-code-product-id

Change id, 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="3792562421837"
    title="Mocha"
    description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    image="/assets/images/black-coffee.jpg'
    price="22"
    height='300'
  %}

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