Dragon Fruit e-commerce

Dragon Fruit e-commerce

Dragon fruit e-commerce is a clean, minimal, ecommerce jekyll theme. It is developed by Webjeda - Jekyll Themes Developer Webjeda.

 6  29

Demo Buy

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 Shopify.

Dragon Fruit E-commerce Jekyll Theme

Easy setup

Signup with Shopify Lite for free(14 days trial & then $9/month) and get the Shopify Storefront Access Token as shown below.

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


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

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



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


Now, select basic options and click Next.


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


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
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

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.


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
    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

Similar Themes