Easy to implement html/css library contains hundreds of components to build ecommerce UI based on Bootstrap v5. If you're a front-end developer then you can use easily integrate with your template or layout just by including small css file. For more components and customization check Official Bootstrap website

File structure

To start using this ecommerce design system you will first need to import some files in your project or download ready to use starter templates.

    📂 bootstrap-ecommerce-html/ 
    ├── 📂 fonts/
    │   ├── fontawesome icons
    │   ├── feather icons
    │   └── other web fonts
    ├── 📂 plugins/
    │   ├── fancybox
    │   ├── sliders
    │   └── ...
    ├── 📂 images/
    │   ├── logo, banners, avatars, items
    │   └── icons (png, svg)
    ├── 📂 scss/
    │   ├── 📂 bootstrap-scss/ ... bootstrap sass files 
    │   ├── 📂 ui-asets/ ... base, components, pages, sections,... 
    │   ├── _variables-custom.scss
    │   ├── bootstrap.scss
    │   ├── responsive.scss
    │   └── ui.scss
    ├── 📂 css/
    │   ├── bootstrap.css
    │   ├── responsive.css
    │   └── ui.css
    ├── 📂  js/
    │   ├── bootstrap.bundle.min.js
    │   └── script.js
    └── 📂  HTML-components/ 100+ html components ready to use

    📄  page-blank.html
    📄  page-content.html
    📄  page-profile.html
    📄  page-user-signup.html
    📄  page-index-1.html
    📄  page-index-2.html
    📄  page-index-3.html
    📄  page-items-list.html
    📄  page-items-grid.html
    📄  page-detail.html
    📄  page-shopping-cart.html
    ... more pages 



Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Fonticon (optional)-->
    <link href="fonts/fontawesome/css/all.min.css" type="text/css" rel="stylesheet">

    <!-- components -->
    <link href="css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="css/responsive.css" rel="stylesheet" />


Most of bootstrap components require the use of JavaScript to function. Our script.js file contains some additional scripts which may come handy for your project. But it is optional


    <!-- Bootstrap -->
    <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>

    <!-- custom javascript (optional) -->
    <script src="js/script.js" type="text/javascript"></script>


Starter templates

There are some basic templates made for you quickly start e-commerce project.
page-blank.html , page-content.html , page-index-1.html ... and other sample pages are included.

You can play around, make any changes or create your own template. Also feel free to add any component from the folder 📂 _HTML-Components

How to add new components?

There is a file 📂 _HTML-components which contains all components you need for your peoject
Just copy html source and past into your template.
Remember: your template must include our css files (ui.css, responsive.css and bootstrap.css ).
After doing copy/paste also check links and image path, For example there might be path like "../images".

Changing themes and styles

We keep all original sass files of bootstrap framework. It is recommended to make changes on variables. There is a sass file _variables-custom.scss which contains all theme and styling values

       ├── 📂 scss/
       │   ├── 📂 bootstrap-scss/  (original bootstrap styles)
       │   ├── 📂 ui-asets/  
       │   ├──  _variables-custom.scss 
       │   ├── ...
       │   └── ...

You can also add your custom styles into one of those files inside 📂 ui-assets/ folder.

Make sure that you have compiled sass(scss) into normal css, And it is updated into 📂 css/ folder. Sometimes compiler's output path are same with sass folder. You have to check and make sure it has correct output path which is /css folder

If you are not fan of node and npm stuff, then we'd recommend to use apps like Prepros ( ) or Codekit ( or any other

License information

We offer two kind of license: Basic license and Pro license.

Basic license
✅ Rights
❌ Prohibitions

Note: All above terms are for owners of Basic license only, We also have Pro license option which is for multi use for personal or any commercial projects.

Pro license
✅ Rights
❌ Prohibitions

Note: All above terms are for owners of Pro license only, We also have Basic license option which is single use only for personal or client project.

Link to download with pro license: Download with pro license


What is ?

Our main goal is mainly to produce premium class practical design assets and templates in the field of E-commerce and constantly improve them.

Do you provide refunds?

Yes, We issue refunds only if you can show that the file is corrupt on your end and cannot be used. Due to the nature of digital downloads, there are no refunds and credits once an order is placed and the product is sent, especially if:
› You changed your mind about an item;
› You bought an item by mistake.
› You do not have sufficient expertise to use an item.

How can I download TemplateMount products again if I lost the file?

Log into your Gumroad to access your library. Click on any TemplateMount product to get its latest version. Login here

Can I create my own template or theme based on your products?

You have to contact the author and authorI will guide you. For that purpose you need a Pro license which gives extended permission.

I want to create my digital product based on this UI Kit, what should I do?

For that purpose you need a Pro license which gives extended permission.

Can I create a SAAS product based on TemplateMount products?

Yes, of course.

Are there any discounts for students?

We have announced a 50% discount on each of our products to support students. You will be required to submit a student ID to purchase at this discount rate.

I have a problem with your products. How can I get help?

We are here to help. Contact us via below given information.


Feel free to reach us if you need any assistance.
Company email:
Author's email: