Ecommerce-UI UI Kit and templates

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.


    📂 ecommerce-ui-html/ 
    │
    ├── 📂 fonts/
    │   ├── fontawesome icons
    │   └── other web fonts 
    │
    │
    ├── 📂 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
    │
    └── 📂  all-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

CSS

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" />

JS (optional)

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-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 📂 _all-components which contains all components you need for your project
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

You can use any sass compiler from NPM or any other GUI apps like Prepros or Codekit


    your-project/
       ├── 📂 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 ( https://prepros.io ) or Codekit (https://codekitapp.com/) or any other

License information

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

Basic license

✅ Rights

1. You are allowed to make necessary modification(s) to our templates to fit your purpose for personal or client project.
2. Can be used in single SAAS and Open source projects.
3. Use the template for a single personal or commercial project. (But not allowed to resell as another product)
4. You are not required to indicate our site as an attribute when using the purchased product.
5. We (creators of item) will not be responsible for any outcome that may occur during the course of usage of our resources. But we are happy to support you during the development.

❌ Prohibitions

1. For any resalable web applications or software programs, you should not include our graphic resources as an additional attachment.
2. You do not have the rights to redistribute, resell, license or sub-license or offer the file downloaded to any third party.

Support

Feel free to reach us if you need any assistance.
Email: vosidiy@gmail.com