For any support please don't hesitate to
contact us at
Support Center. We provide 13 hours real-time support for
our customers.
We would like to thank you for eComArts -
Multipurpose eCommerce Tailwindcss Template
Getting started
Industri is a modern Responsive
Multi-Purpose Multi-Page bootstrap 5
template.
Template Features
HTML5 & CSS3 with TailwindCss
v4.0.0
TailwindCss v4.x
TailwindCss v4.x CLI
Font-awesome
Custom Icon
Vanilla JS
No jQuery
07 Awesome Homepage
Responsive Design
Pixel Perfect Design
Clean Code & Unique Design
Easy to Customize
W3C Validated Codes
What's Included
After purchasing Industri template on
themeforest.net with your Envato account, go
to your Download page. You can choose to
download Industri template package which
contains the following files:
The contents of the template package
downloaded from ThemeForest
main-files - An HTML
Template file. this file you can edit
and use for your business.
documentation - This
folder contains what you are reading
now :)
This template is a fixed layout with four
columns. The main contents are inside the
'body' tag divided into different section
(i.e. header, banner, services,... footer
etc.). The general template structure is the
same throughout the template. Here is the
general structure.
HTML Markup Structure
TailwindCSS Files Structure
We have used TailwindCSS for this project to
write css. If you are familiar with
TailwindCSS you should customize only the
/assets/inputs/*.css files.
Please make sure you compile the
/assets/inputs/input.css file
after you have made changes in any of the
.css files.
CSS Files and Structure
If you change anything inside
*/assets/inputs/* files, you
need to run the following command to compile
the input.css file.
# For development
npm run dev:tailwind
Make sure you have already installed
NodeJs
on your machine.
If you want to compile the
input.css
file for production, you need to run the
following command.
# For production
npm run build:tailwind
Note
All installed packages and commands
are in the
package.json file in root
dir. Make sure you have installed all
the local packages by running
npm install.
JavaScript Files
There is a custom
.js file named
index.js inside
/assets/js/* and are several
vendor js files as plugins. We are using
Vanilla JavaScript(a javascript library)
instead of jQuery. Our file structure is a
follows:
Carefully collect the source name of
the image (i.e. hero.jpg)
Open the file called images.
Find the particular image file.
Replace the file with your image.
Make sure that the file name does not
change.The file name should be the
same.
Example:
Suppose you want to change the following
image file:
You have to do the following to change this
image with your own image:
Open the file called images.
Find the particular image file called
banner-img.jpg
Replace the file with your image
Make sure that the file name does not
change.
Note
Images seen in the live preview are
only set for preview purposes. They
are not included in the download
files.
Changing Brand Logo
To change any images of the website
Carefully collect the source name of
the image (i.e. banner-img.jpg)
Open the file called images.
Find the particular image file.
Replace the file with your image.
Make sure that the file name does not
change.The file name should be the
same.
Example:
Suppose you want to change the following
image file for change your logo:
Changing Colors
We have used
TailwindCss
for this project to write css. If you are
familiar with
TailwindCSS
you should customize only the
/assets/inputs/*
files. Please make sure you compile the
/assets/inputs/input.css
file after you have made changes in any of
the *.css files.
The @theme{} directive is
located inside the
/assets/inputs/input.css file.
All of the theme colors are stored in
@theme{}. You are free to
change as you like.
Theme Color