Optimal Multipurpose eCommerce Bootstrap 5 Html Template
Introduction
- Item Name : Optimal eCommerce Multipurpose Bootstrap 5 HTML Template
- Item Version : v 4.0
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel my Support Forum. Thanks so much! Cheers!
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here(Html,CSS and Javascript).
Notes:- For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority.
- You will need some basic knowledge of HTML/CSS to edit the template.
- Get started with Bootstrap 5, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
Requirements
You will need the following softwares to customize this template.
- Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
- Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
- FTP Tool to upload files to Server (eg: FileZilla)
Be careful while editing the template. If not edited properly, the design layout may break completely. No support is provided for faulty customization.
Getting Started #back to top
Follow the steps below to setup your site template:
- Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
- Below is the folder structure and needs to be uploaded to your website root directory:
assets/css- Stylesheets Folderassets/fonts- Fonts Folderassets/images- Images Folderassets/js- Java Scripts Folderassets/video- Video Folderindex.html- Main home file (and All HTML files)
- You should upload all or specific HTML files as per your need.
- You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
Bootstrap Grid System
<div class="container">
<div class="row">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
YOUR CODES GOES HERE
</div>
</div>
</div>
Our you can use the grid system with 2 columns like this:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
YOUR CODES GOES HERE
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
YOUR CODES GOES HERE
</div>
</div>
</div>
Our you can use the grid system with 3 columns like this:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
YOUR CODES GOES HERE
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
YOUR CODES GOES HERE
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
YOUR CODES GOES HERE
</div>
</div>
</div>
HTML Structure #back to top
Below is a visualization of an HTML page structure: Read more
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="description">
<title>Optimal - Multipurpose eCommerce Bootstrap 5 Html Template</title>
<link rel="shortcut icon" href="assets/images/favicon.png" />
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png" />
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
<div class="pageWrapper">
<header class="header">
[Header Content]
</header>
<div id="page-content">
[Body Section Content]
</div>
<footer class="footer">
[Footer Content]
</footer>
<script src="assets/js/vendor/jquery-min.js"></script>
<script src="assets/js/vendor/js.cookie.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
</div>
</body>
</html>
Included Files #back to top
- Home Styles
- Home 01 - Default
- Home 02 - Minimal
- Home 03 - Colorful
- Home 04 - Modern
- Home 05 - Kids Clothing
- Home 06 - Single Product
- Home 07 - Glamour
- Home 08 - Simple
- Home 09 - Cool
- Home 10 - Cosmetic
- Home 11 - Pets
- Home 12 - Tools & Parts
- Home 13 - Watches
- Home 14 - Food
- Home 15 - Christmas
- Home 16 - Phone Case
- Home 17 - Jewelry
- Home 18 - Bag
- Home 19 - Swimwear
- Home 20 - Furniture
- Home 21 - Party Supplies
- Home 22 - Digital
- Home 23 - Vogue
- Home 24 - Glamour
- Home 25 - Shoes
- Home 26 - Books
- Home 27 - Yoga
- Category Pages
- 2 Columns with style1
- 3 Columns with style2
- 4 Columns with style3
- 5 Columns with style4
- 6 Columns with Fullwidth
- 7 Columns
- Category Empty
- Shop Other Pages
- My Wishlist Style1
- My Wishlist Style2
- Compare Page Style1
- Compare Page Style2
- Cart Page Style1
- Cart Page Style2
- Checkout Page Style1
- Checkout Page Style2
- Checkout Success
- About Us Pages
- About Us Style1
- About Us Style2
- About Us Style3
- Contact Us Pages
- Contact Us Style1
- Contact Us Style2
- Lookbook Pages
- 2 Columns
- 3 Columns
- 4 Columns
- 5 Columns + Fullwidth
- Lookbook Shop
- FAQs Pages
- FAQs Style1
- FAQs Style2
- Brands Pages
- Brands Style1
- Brands Style2
- Empty Pages
- Empty Category
- Empty Cart
- Empty Compare
- Empty Wishlist
- Empty Search
- Error 404
- Account Pages
- My Account
- Login Sliding Slideshow
- Login
- Register
- Forgot Password
- Change Password
- CMS Pages
- CMS Page
- Coming soon
Included Files RTL #back to top
- Home Styles
- Home 01 - Default
- Home 02 - Minimal
- Home 03 - Colorful
- Home 04 - Modern
- Home 05 - Kids Clothing
- Home 06 - Single Product
- Home 07 - Glamour
- Home 08 - Simple
- Home 09 - Cool
- Home 10 - Cosmetic
- Home 11 - Pets
- Home 12 - Tools & Parts
- Home 13 - Watches
- Home 14 - Food
- Home 15 - Christmas
- Home 16 - Phone Case
- Home 17 - Jewelry
- Home 18 - Bag
- Home 19 - Swimwear
- Home 20 - Furniture
- Home 21 - Party Supplies
- Home 22 - Digital
- Home 23 - Vogue
- Home 24 - Glamour
- Home 25 - Shoes
- Home 26 - Books
- Home 27 - Yoga
- Category Pages
- 2 Columns with style1
- 3 Columns with style2
- 4 Columns with style3
- 5 Columns with style4
- 6 Columns with Fullwidth
- 7 Columns
- Category Empty
- Shop Other Pages
- My Wishlist Style1
- My Wishlist Style2
- Compare Page Style1
- Compare Page Style2
- Cart Page Style1
- Cart Page Style2
- Checkout Page Style1
- Checkout Page Style2
- Checkout Success
- About Us Pages
- About Us Style1
- About Us Style2
- About Us Style3
- Contact Us Pages
- Contact Us Style1
- Contact Us Style2
- Lookbook Pages
- 2 Columns
- 3 Columns
- 4 Columns
- 5 Columns + Fullwidth
- Lookbook Shop
- FAQs Pages
- FAQs Style1
- FAQs Style2
- Brands Pages
- Brands Style1
- Brands Style2
- Empty Pages
- Empty Category
- Empty Cart
- Empty Compare
- Empty Wishlist
- Empty Search
- Error 404
- Account Pages
- My Account
- Login Sliding Slideshow
- Login
- Register
- Forgot Password
- Change Password
- CMS Pages
- CMS Page
- Coming soon
Technology #back to top
Optimal is based on front-end framework Bootstrap for fully flexible and responsive layouts. It also uses the latest web technology HTML5 for semantic content structuring and CSS3 for versatile and powerful styling options.
Read more about the used technologyBootstrap: http://getbootstrap.com
HTML5/CSS3: http://www.w3schools.com
HTML5: http://html5doctor.com
Usage – Customization #back to top
General & Fonts Options
1. Annimex Fonts Icon
- You can add/change the site font icon, used from Annimex Custom Fonts Icon.
2. Google Fonts
You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the style.css in all HTML file. See example below:
Using on the Importing style.css
/*------------------------------------------
Google Fonts
--------------------------------------------*/
@import url('//fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700&display=swap');
3. Lazy Load Image
Add code if you want to the image lazy load .html pages.
Adding this code the script below Footer. check no 10. lazysizes JS
4. Animation
You can also use delays, duration and offset for your animations:
Including Javascript for animation on scroll Wow.js And also css for animation adding animated css.
<div class=" wow fadeIn" data-wow-delay="0ms">
Style Options #back to top
If you want layout style then Adding class in page-wrapper div as mentioned below represent.
Boxed Layout
26<div class="page-wrapper layout-boxed">
Full Width Layout
26<div class="page-wrapper layout-fullwidth">
Here our The 27 unique homepage layouts options.
- Home 01 - Default >>
index.html - Home 02 - Minimal >>
index-demo2.html - Home 03 - Colorful >>
index-demo3.html - Home 04 - Modern >>
index-demo4.html - Home 05 - Kids Clothing >>
index-demo5.html - Home 06 - Single Product >>
index-demo6.html - Home 07 - Glamour >>
index-demo7.html - Home 08 - Simple >>
index-demo8.html - Home 09 - Cool >>
index-demo9.html - Home 10 - Cosmetic >>
index-demo10.html
- Home 11 - Pets >>
index-demo11.html - Home 12 - Tools & Parts >>
index-demo12.html - Home 13 - Watches >>
index-demo13.html - Home 14 - Food >>
index-demo14.html - Home 15 - Christmas >>
index-demo15.html - Home 16 - Phone Case >>
index-demo16.html - Home 17 - Jewelry >>
index-demo17.html - Home 18 - Bag >>
index-demo18.html - Home 19 - Swimwear >>
index-demo19.html - Home 20 - Furniture >>
index-demo20.html
- Home 21 - Party Supplies >>
index-demo21.html - Home 22 - Digital >>
index-demo22.html - Home 23 - Vogue >>
index-demo23.html - Home 24 - Glamour >>
index-demo24.html - Home 25 - Shoes >>
index-demo25.html - Home 26 - Books Case >>
index-demo26.html - Home 27 - Yoga >>
index-demo27.html
Header Style #back to top
There are 19 different Header style. You can also use home page header.
Default Header Style
57<div class="header-main classicHeader">
Adding class from the Header tag .classicHeader in html file. For eg. Demo index-demo3.html
Transparent Header Style
57<div class="header-main">
Remove class from the Header tag .classicHeader in html file. For eg. Demo index-demo3.html
Header styles 1
You can find - full screen code in index.html
Header styles 2
You can find - full screen code in index-demo2.html
Header styles 3
You can find - full screen code in index-demo3.html
Header styles 4
You can find - full screen code in index-demo4.html
Header styles 5
You can find - full screen code in index-demo5.html
Header styles 6
You can find - full screen code in index-demo6.html
Header styles 7
You can find - full screen code in index-demo7.html
Header styles 8
You can find - full screen code in index-demo8.html
Header styles 9
You can find - full screen code in index-demo9.html
Header styles 10
You can find - full screen code in index-demo10.html
Header styles 11
You can find - full screen code in index-demo11.html
Header styles 12
You can find - full screen code in index-demo12.html
Header styles 13
You can find - full screen code in index-demo13.html
Header styles 14
You can find - full screen code in index-demo14.html
Header styles 15
You can find - full screen code in index-demo15.html
Header styles 16
You can find - full screen code in index-demo16.html
Header styles 17
You can find - full screen code in index-demo17.html
Header styles 18
You can find - full screen code in index-demo18.html
Header styles 19
You can find - full screen code in index-demo19.html
Header styles 20
You can find - full screen code in index-demo20.html
Header styles 21
You can find - full screen code in index-demo21.html
Header styles 22
You can find - full screen code in index-demo22.html
Header styles 23
You can find - full screen code in index-demo23.html
Header styles 24
You can find - full screen code in index-demo24.html
Header styles 25
You can find - full screen code in index-demo25.html
Header styles 26
You can find - full screen code in index-demo26.html
Header styles 27
You can find - full screen code in index-demo27.html
Mobile Header Style
You can find - full screen code in index.html
You can find - full screen code in index-demo10.html
Mobile Bottom Navbar Style
You can find - full screen code in index.html
Slider Styles #back to top
Slideshow Slider
NOTE:- Here Please including Slick Slider Jquery library like.
Find in this path >> assets/js/plugins.js Slick Slider after add Footer code.
Slide Caption Position
Add this div in class: class="slideshow-content bottom-middle"
- middle
- middle-right
- middle-left
- middle-bottom
- bottom-middle
- bottom-left
Slide Caption Animation
Add this div in class: class="wrap-caption animation style1"
- animation style1
- animation style2
- animation style3
- animation style4
Slideshow and diffrent slideshow home 1 to 19
You can find - full screen code in index.html
Javascript Code Add after Slick Slider Jquery library. Find this file path >> assets/js/main.js
/* 9.1 Homepage Slideshow */
function home_slider() {
$('.home-slideshow').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
arrows: true,
autoplay: true,
autoplaySpeed: 8000,
lazyLoad: 'ondemand'
});
}
home_slider();
Collection Slider
You can find - full screen code in index-demo2.html
Javascript Code Add after Slick Slider Jquery library. Find this file path >> 
assets/js/main.js
/* 9.9 Collection Slider */
function collection_slider() {
$('.collection-grid-slider').slick({
dots: false,
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});
}
collection_slider();
Product Slider
You can find - full screen code in index.html
New
Javascript Code Add after Slick Slider Jquery library. Find this file path >> 
assets/js/main.js
/* 9.5 Products Slider Style2 3 Items */
function product_slider1() {
$('.productSlider-style1').slick({
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});
}
product_slider1();
Products Slider with products Tab
You can find - full screen code in index-demo4.html
Testimonial Slider
You can find - full screen code in index.html
Brand Logo Slider
You can find - full screen code in index.html
Instagram Slider
You can find - full screen code in index-demo2.html
Image Banner Styles #back to top
Banner Style - 1
You can find - full screen code in index.html
Banner Style - 2
You can find - full screen code in index.html
Banner Style - 3
You can find - full screen code in index-demo3.html
Banner Style - 4
You can find - full screen code in index-demo3.html
Banner Style - 5
You can find - full screen code in index-demo5.html
Banner Style - 6
You can find - full screen code in index-demo8.html
Banner Style - 7
You can find - full screen code in index-demo9.html
Banner Style - 8
You can find - full screen code in index-demo10.html
Banner Style - 9
You can find - full screen code in index-demo11.html
Banner Style - 10
You can find - full screen code in index.html
Banner Style - 11
You can find - full screen code in index-demo14.html
Banner Style - 12
You can find - full screen code in index-demo14.html
Banner Style - 13
You can find - full screen code in index-demo15.html
Banner Style - 14
You can find - full screen code in index-demo16.html
Banner Style - 15
You can find - full screen code in index-demo17.html
Banner Style - 16
You can find - full screen code in index-demo18.html
Banner Style - 17
You can find - full screen code in index-demo19.html
Masonry Banner Styles #back to top
Masonry Banner Style 1
You can find - full screen code in index-demo6.html
Masonry Banner Style 2
You can find - full screen code in index-demo7.html
Masonry Banner Style 3
You can find - full screen code in index-demo10.html
Masonry Banner Style 4
You can find - full screen code in index-demo13.html
Hero Banner Styles #back to top
Hero Banner styles 1
You can find - full screen code in index-demo6.html
Hero Banner styles 2
You can find - full screen code in index-demo9.html
Hero Banner styles 3
You can find - full screen code in index-demo12.html
Hero Banner styles 4
You can find - full screen code in index-demo14.html
Parallax Banner Styles #back to top
Parallax Banner styles 1
You can find - full screen code in index-demo2.html
Parallax Banner styles 2
You can find - full screen code in index-demo5.html
Parallax Banner styles 3
You can find - full screen code in index-demo8.html
Parallax Banner styles 4
You can find - full screen code in index-demo19.html
Blog Styles #back to top
Blog styles 1
You can find - full screen code in index.html
Blog styles 2
You can find - full screen code in index-demo8.html
Blog styles 3
You can find - full screen code in index.html
Form Settings #back to top
Contact Form
You can find - full screen code in contactus-style1.html page and above is the code for your reference.
Thank you for your message. It has been sent.
Html Code
Drop Us A Line
PHP Code
/* Set the recipient email address. - line no 12
* FIXME: Update this to your desired email address. */
$to = "info@example.com";
/* From - line no 22 */
$header = "From: info@example.com\r\n";
PHP File Path >> assets/php/ajax_sendmail.php
JS File Path >> assets/js/ajax_sendmail.js
Product 360 degree view Settings #back to top
You can find - full screen code in prodcut-360-degree-view.html page and above is the code for your reference.
You can add more and less, can also settings script code in product-360-degree-view.html
2498totalFrames: 4,
2498endFrame: 4,
totalFrames: 4, // Total no. of image you have for 360 slider
endFrame: 4, // end frame for the auto spin animation
Newsletter Cookie Popup #back to top
Full screen code in index.html page.
Full screen code in index-demo2.html page.
Full screen code in index-demo3.html page.
You can find - full screen code in index.html page and above is the code for your reference.
GET THE UPDATES ABOUT LATEST TREANDS
20% OFF YOUR FIRST ORDER
Your information will never be shared
JS Code
Footer Styles #back to top
Footer Styles
There are 19 different Footer style. You can also use home page footer.
Footer styles 1
You can find - full screen code in index.html
Footer styles 2
You can find - full screen code in index-demo2.html
Footer styles 3
You can find - full screen code in index-demo3.html
Footer styles 4
You can find - full screen code in index-demo4.html
Footer styles 5
You can find - full screen code in index-demo5.html
Footer styles 6
You can find - full screen code in index-demo6.html
Footer styles 7
You can find - full screen code in index-demo7.html
Footer styles 8
You can find - full screen code in index-demo8.html
Footer styles 9
You can find - full screen code in index-demo9.html
Footer styles 10
You can find - full screen code in index-demo10.html
Footer styles 11
You can find - full screen code in index-demo11.html
Footer styles 12
You can find - full screen code in index-demo12.html
Footer styles 13
You can find - full screen code in index-demo13.html
Footer styles 14
You can find - full screen code in index-demo14.html
Footer styles 15
You can find - full screen code in index-demo15.html
Footer styles 16
You can find - full screen code in index-demo16.html
Footer styles 17
You can find - full screen code in index-demo17.html
Footer styles 18
You can find - full screen code in index-demo18.html
Footer styles 19
You can find - full screen code in index-demo19.html
Footer styles 20
You can find - full screen code in index-demo20.html
Footer styles 21
You can find - full screen code in index-demo21.html
Footer styles 22
You can find - full screen code in index-demo22.html
Footer styles 23
You can find - full screen code in index-demo23.html
Footer styles 24
You can find - full screen code in index-demo24.html
Footer styles 25
You can find - full screen code in index-demo25.html
Footer styles 26
You can find - full screen code in index-demo26.html
Footer styles 27
You can find - full screen code in index-demo27.html
Quickview Popup #back to top
You can find - full screen code in index.html page.
Addtocart Added Popup #back to top
You can find - full screen code in index.html page.
Minicart Styles #back to top
Minicart Drawer
You can find - full screen code in index.html page.
Now 'd-none' class added, remove it and check Minicart empty drawer.
Minicart Popup
You can find - full screen code in index-demo2.html page.
Now 'd-none' class added, remove it and check Minicart empty Popup.
Product Promotion Popup #back to top
You can find - full screen code in index.html page.
Right To Left (RTL) #back to top
Required HTML
There are two strict requirements for enabling RTL in Bootstrap-powered pages. Learn More
- 1. Set
dir=rtlon theelement. - 2. Add an appropriate
langattribute, likelang="ar", on the<html>element.
Here is CDN path for RTL style you can also download this css and including on your theme folder called own html file.
<!--RTL CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" crossorigin="anonymous">
<!--End RTL CSS-->
Support Desk #back to top
Please remember you have purchased a very affordable HTML Template and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.
Support for my items includes:
- Responding to questions or problems regarding the item and its features
- Fixing bugs and reported issues
- Providing updates to ensure compatibility with new software versions
Item support does not include:
- Customization and installation services
- Support for third party software and plug-ins
Version History (Changelog) #back to top
You can find the version history (changelog.txt) file on yourthemename-full.zip folder or you can check changelog on HTML Template sale page.
Once again, thank you so much for purchasing this HTML Template.
Changelog
-----------------------------------------------------------------------------------------
Version 1.0
-----------------------------------------------------------------------------------------
- Initialized
Sources and Credits #back to top
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Optimal a really beautiful HTML Template for our awesome users: