Rokon Documentation

Rokon is a Single Product eCommerce HTML Template that is perfect for the Drone industry. You can customize this template as you like and it’s suitable for all industries such as agriculture, bakery, eco food, farm, fresh, modern, natural, organic, organic food, fruits, organic fruits, organic life, organic shop, vegetable, and other.

Vanilla JavaScript

We used Vanilla JavaScript. No jQuery dependencies. It is a really strong feature to get the best performance.

Sass Available

Separate Sass/scss files are available for each single module.You can easily edit the SCSS files.

Bootstrap compatible

We've only include the CSS bootstrap grid layout to get better performance. But you can include any element if you want.

Perfect Responsive

This is a responsive website. We've made very clean designs for mobile, tablet, laptop, and desktop devices.

Fast Loading Speed

rokon main important feature is faster loading. We've followed the latest lighthouse performance matrix.

24 Support System

We provide 24 hours support for our customers. Our main goal is client satisfaction as well as high-quality services provided.

Getting Started

Welcome To Rokon : Rokon - Single Product eCommerce HTML Template a modern as well as a responsive Bootstrap 5 template.

Item Name : Rokon Single Product eCommerce HTML Template

Item Version : v1.0.0

Author : Hooktheme

Support Forum :

Files Included

Do not directly upload the zip file you downloaded from Themeforest. To begin, unzip the ThemeForest file you just downloaded.

Template Structures

File Structures

Rokon Files Structure. You can easily find any file.

HTML Files

  • 31 html pages

assets/css - Css Folder

  • global.scss
  • header.scss
  • slider.scss
  • product.scss
  • banner.scss
  • blog.scss
  • testimonial.scss
  • newsletter.scss
  • project.scss
  • instagram.scss
  • footer.scss
  • accordion.scss
  • portfolio.scss
  • breadcrumb.scss
  • about.scss
  • shop.scss
  • product-details.scss
  • blog-details.scss
  • contact.scss
  • cart-page.scss
  • checkout.scss
  • my-account.scss
  • 404.scss
  • login.scss
  • compare.scss
  • faq.scss
  • preloader.scss
  • privacy-policy.scss

assets/css - Css Folder

  • bootstrap.min.css
  • swiper-bundle.min.css
  • glightbox.min.css
  • style.css

assets/js - Js Folder

  • bootstrap.min.js
  • popper.js
  • swiper-bundle.min.js
  • glightbox.min.js
  • script.js

Files Structure


HTML Structure


Sass Files Structure


CSS Files Structure


Google Fonts Include


JavaScript Structure


Changing Contents

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quaerat molestias dicta consequatur excepturi nulla fugiat,
odio pariatur voluptatum perspiciatis eligendi, molestiae ad sunt commodi?

Changing CSS Global Variable


Changing Color Scheme


Changing Product Image


Changing Testimonial Image


Changing Blog Image


How to customize bootstrap

We've only include the CSS bootstrap grid layout to get better performance. But you can include any element if you want.

To include Bootstrap Core CSS and JS files you need to follow 2 steps,

  1. You need to go to HTML file </head> end tag
  2. You need to go to HTML file </body> end tag

Change Log


  • Release Initial release

Support Desk

After purchasing, If you have any further questions about this template, feel free to contact us via We will be more than happy to assist you.