The template loads minified production assets:
- CSS:
assets/css/style.min.css - JS:
assets/js/main.min.js
Defined in:
src/partials/styles.htmlsrc/partials/scripts.html
Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
Unimart is a modern and responsive eCommerce template built with Bootstrap 5, designed to provide a feature-rich and aesthetically pleasing layout for online stores. The template comes with 100+ demos, 500+ inner pages, and 750+ elements, making it highly customizable for eCommerce projects.
After downloading the template package, go to the frontend folder and install dependencies:
cd unimart/unimart-frontend
npm install
unimart/
├── unimart-frontend/ # Frontend template (this guide)
│ ├── src/ # Source files (edit here)
│ │ ├── *.html # Page templates
│ │ ├── partials/ # Reusable HTML partials (@@include)
│ │ └── assets/
│ │ ├── scss/ # SCSS source (compiled to CSS)
│ │ ├── css/ # Vendor & plugin CSS
│ │ ├── js/ # main.js, vendor & plugin JS
│ │ ├── images/
│ │ ├── fonts/
│ │ └── videos/
│ ├── dest/ # Build output (deploy this folder)
│ ├── gulpfile.js
│ ├── package.json
│ └── vercel.json
└── unimart-admin/ # Admin template (see Admin docs)
| Location | Purpose |
|---|---|
src/ |
All development and editing |
dest/ |
Compiled HTML and production-ready assets |
Important: dest/ does
not include source SCSS, unminified
style.css, or unminified
main.js. Only the assets referenced in HTML are
generated.
Run the Gulp dev workflow:
npm run dev
This command:
src/ with partial includesdest/assets/css/style.min.cssmain.js →
dest/assets/js/main.min.jsMinify CSS and JS assets only into dest/:
npm run build
| Task | Output |
|---|---|
buildStyleCss |
dest/assets/css/style.min.css |
buildVendorCss |
dest/assets/css/vendor/*
(minified) |
buildPluginsCss |
dest/assets/css/plugins/*
(minified) |
buildVendorJs |
dest/assets/js/vendor/* (minified)
|
buildPluginsJs |
dest/assets/js/plugins/* (minified)
|
buildMainJs |
dest/assets/js/main.min.js |
npm run build does not compile HTML or copy images/fonts/videos. Run the individual Gulp tasks below when you need a full deploy output.
Run tasks directly with npx gulp <task-name>.
| Task | Description |
|---|---|
html |
Compile HTML pages with partial includes |
styleCss |
Compile SCSS to style.min.css (dev,
with sourcemaps) |
vendorCss |
Copy vendor CSS to dest/ |
pluginsCss |
Copy plugin CSS to dest/ |
vendorJs |
Copy vendor JS to dest/ |
pluginsJs |
Copy plugin JS to dest/ |
mainJs |
Minify main.js →
main.min.js |
rbtFonts |
Copy fonts |
rbtImage |
Copy images |
rbtVideos |
Copy videos |
build |
Minify all CSS & JS (production) |
clean:dist |
Delete entire dest/ folder |
clean:destExtras |
Remove style.css,
main.js, and
dest/assets/scss/ |
Full deploy output (HTML + assets + minified CSS/JS):
npx gulp html
npx gulp rbtFonts
npx gulp rbtImage
npx gulp rbtVideos
npm run build
HTML changes only:
npx gulp html
SCSS changes only:
npx gulp styleCss
JavaScript changes only:
npx gulp mainJs
The template loads minified production assets:
assets/css/style.min.cssassets/js/main.min.jsDefined in:
src/partials/styles.htmlsrc/partials/scripts.html
Deploy the dest/ folder to your hosting provider.
For Vercel, vercel.json is included with security
headers. Point the project root or output directory to
dest/ depending on your deployment setup.
@@include)