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

Dragon Fruit E-commerce Jekyll Theme

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

Similar Themes

AppsZone

AppsZone

Avocado

Avocado

Blackcurant

Blackcurant

Dox

Dox