Hello to all, welcome back to blog. Today in this blog post, I am going to show you, Angular 10 Fresh Shop Ecommerce Template Free.
Angular10 came and if you are new then you must check below two links:
Friends now I proceed onwards and here is the working code snippet for Angular 10 Fresh Shop Ecommerce Template Free this carefully to avoid the mistakes:
1. Firstly friends we need fresh angular 10 setup and for this we need to run below commands but if you already have angular 10 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
Guys you can skip this first step if you already have angular 10 fresh setup:
npm install -g @angular/cli ng new angularbootstrap //Create new Angular Project cd angularbootstrap // Go inside the Angular Project Folder ng serve --open // Run and Open the Angular Project http://localhost:4200/ // Working Angular Project Url
2. Now friends, please download zip(in this zip file there are js, css and images for angular bootstrap template) file from below path and extract zip and please put all the zip file folders in “src/assets” folder(which we will get from zip file):
https://therichpost.com/downloadassets.zip
3. Now friends please add below code into src/index.html file:
<head>
...
<!-- Site Icons -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Site CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<!-- ALL JS FILES -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- ALL PLUGINS -->
<script src="assets/js/jquery.superslides.min.js"></script>
<script src="assets/js/bootstrap-select.js"></script>
<script src="assets/js/inewsticker.js"></script>
<script src="assets/js/bootsnav.js"></script>
<script src="assets/js/images-loded.min.js"></script>
<script src="assets/js/isotope.min.js"></script>
<script src="assets/js/custom.js"></script>
</head>
4. Now friends we need to add below code into src/app/app.component.html file:
<!-- Start Main Top -->
<div class="main-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="custom-select-box">
<select id="basic" class="selectpicker show-tick form-control" data-placeholder="$ USD">
<option>¥ JPY</option>
<option>$ USD</option>
<option>€ EUR</option>
</select>
</div>
<div class="right-phone-box">
<p>Call US :- <a href="#"> +000 900 800 100</a></p>
</div>
<div class="our-link">
<ul>
<li><a href="#"><i class="fa fa-user s_color"></i> My Account</a></li>
<li><a href="#"><i class="fas fa-location-arrow"></i> Our location</a></li>
<li><a href="#"><i class="fas fa-headset"></i> Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="login-box">
<select id="basic" class="selectpicker show-tick form-control" data-placeholder="Sign In">
<option>Register Here</option>
<option>Sign In</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- End Main Top -->
<!-- Start Main Top -->
<header class="main-header">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo" alt=""></a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle arrow" data-toggle="dropdown">SHOP</a>
<ul class="dropdown-menu">
<li><a href="#">Sidebar Shop</a></li>
<li><a href="#">Shop Detail</a></li>
<li><a href="#">Cart</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Wishlist</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Start Atribute Navigation -->
<div class="attr-nav">
<ul>
<li class="side-menu">
<a href="#">
<i class="fa fa-shopping-bag"></i>
<span class="badge">3</span>
<p>My Cart</p>
</a>
</li>
</ul>
</div>
<!-- End Atribute Navigation -->
</div>
<!-- Start Side Menu -->
<div class="side">
<a href="#" class="close-side"><i class="fa fa-times"></i></a>
<li class="cart-box">
<ul class="cart-list">
<li>
<a href="#" class="photo"><img src="assets/images/img-pro-01.jpg" class="cart-thumb" alt="" /></a>
<h6><a href="#">Delica omtantur </a></h6>
<p>1x - <span class="price">$80.00</span></p>
</li>
<li>
<a href="#" class="photo"><img src="assets/images/img-pro-02.jpg" class="cart-thumb" alt="" /></a>
<h6><a href="#">Omnes ocurreret</a></h6>
<p>1x - <span class="price">$60.00</span></p>
</li>
<li>
<a href="#" class="photo"><img src="assets/images/img-pro-03.jpg" class="cart-thumb" alt="" /></a>
<h6><a href="#">Agam facilisis</a></h6>
<p>1x - <span class="price">$40.00</span></p>
</li>
<li class="total">
<a href="#" class="btn btn-default hvr-hover btn-cart">VIEW CART</a>
<span class="float-right"><strong>Total</strong>: $180.00</span>
</li>
</ul>
</li>
</div>
<!-- End Side Menu -->
</nav>
<!-- End Navigation -->
</header>
<!-- End Main Top -->
<!-- Start Categories -->
<div class="categories-shop">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="shop-cat-box">
<img class="img-fluid" src="assets/images/categories_img_01.jpg" alt="" />
<a class="btn hvr-hover" href="#">Lorem ipsum dolor</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="shop-cat-box">
<img class="img-fluid" src="assets/images/categories_img_02.jpg" alt="" />
<a class="btn hvr-hover" href="#">Lorem ipsum dolor</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="shop-cat-box">
<img class="img-fluid" src="assets/images/categories_img_03.jpg" alt="" />
<a class="btn hvr-hover" href="#">Lorem ipsum dolor</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Categories -->
<div class="box-add-products">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="offer-box-products">
<img class="img-fluid" src="assets/images/add-img-01.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="offer-box-products">
<img class="img-fluid" src="assets/images/add-img-02.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Start Products -->
<div class="products-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-all text-center">
<h1>Fruits & Vegetables</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus enim.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="special-menu text-center">
<div class="button-group filter-button-group">
<button class="active" data-filter="*">All</button>
<button data-filter=".top-featured">Top featured</button>
<button data-filter=".best-seller">Best seller</button>
</div>
</div>
</div>
</div>
<div class="row special-list">
<div class="col-lg-3 col-md-6 special-grid best-seller">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="sale">Sale</p>
</div>
<img src="assets/images/img-pro-01.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $7.79</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 special-grid top-featured">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="new">New</p>
</div>
<img src="assets/images/img-pro-02.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $9.79</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 special-grid top-featured">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="sale">Sale</p>
</div>
<img src="assets/images/img-pro-03.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $10.79</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 special-grid best-seller">
<div class="products-single fix">
<div class="box-img-hover">
<div class="type-lb">
<p class="sale">Sale</p>
</div>
<img src="assets/images/img-pro-04.jpg" class="img-fluid" alt="Image">
<div class="mask-icon">
<ul>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li>
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $15.79</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Products -->
<!-- Start Blog -->
<div class="latest-blog">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="title-all text-center">
<h1>latest blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lacus enim.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="blog-box">
<div class="blog-img">
<img class="img-fluid" src="assets/images/blog-img.jpg" alt="" />
</div>
<div class="blog-content">
<div class="title-blog">
<h3>Fusce in augue non nisi fringilla</h3>
<p>Nulla ut urna egestas, porta libero id, suscipit orci. Quisque in lectus sit amet urna dignissim feugiat. Mauris molestie egestas pharetra. Ut finibus cursus nunc sed mollis. Praesent laoreet lacinia elit id lobortis.</p>
</div>
<ul class="option-blog">
<li><a href="#"><i class="far fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-eye"></i></a></li>
<li><a href="#"><i class="far fa-comments"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="blog-box">
<div class="blog-img">
<img class="img-fluid" src="assets/images/blog-img-01.jpg" alt="" />
</div>
<div class="blog-content">
<div class="title-blog">
<h3>Fusce in augue non nisi fringilla</h3>
<p>Nulla ut urna egestas, porta libero id, suscipit orci. Quisque in lectus sit amet urna dignissim feugiat. Mauris molestie egestas pharetra. Ut finibus cursus nunc sed mollis. Praesent laoreet lacinia elit id lobortis.</p>
</div>
<ul class="option-blog">
<li><a href="#"><i class="far fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-eye"></i></a></li>
<li><a href="#"><i class="far fa-comments"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-4">
<div class="blog-box">
<div class="blog-img">
<img class="img-fluid" src="assets/images/blog-img-02.jpg" alt="" />
</div>
<div class="blog-content">
<div class="title-blog">
<h3>Fusce in augue non nisi fringilla</h3>
<p>Nulla ut urna egestas, porta libero id, suscipit orci. Quisque in lectus sit amet urna dignissim feugiat. Mauris molestie egestas pharetra. Ut finibus cursus nunc sed mollis. Praesent laoreet lacinia elit id lobortis.</p>
</div>
<ul class="option-blog">
<li><a href="#"><i class="far fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-eye"></i></a></li>
<li><a href="#"><i class="far fa-comments"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Blog -->
<!-- Start Footer -->
<footer>
<div class="footer-main">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-top-box">
<h3>Business Time</h3>
<ul class="list-time">
<li>Monday - Friday: 08.00am to 05.00pm</li> <li>Saturday: 10.00am to 08.00pm</li> <li>Sunday: <span>Closed</span></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-top-box">
<h3>Newsletter</h3>
<form class="newsletter-box">
<div class="form-group">
<input class="" type="email" name="Email" placeholder="Email Address*" />
<i class="fa fa-envelope"></i>
</div>
<button class="btn hvr-hover" type="submit">Submit</button>
</form>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-top-box">
<h3>Social Media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-widget">
<h4>About Freshshop</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-link">
<h4>Information</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Our Sitemap</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Delivery Information</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer-link-contact">
<h4>Contact Us</h4>
<ul>
<li>
<p><i class="fas fa-map-marker-alt"></i>Address: Test Street 3756 <br>Local Street Local,<br> Local 67213 </p>
</li>
<li>
<p><i class="fas fa-phone-square"></i>Phone: <a href="#">+#-### ### ###</a></p>
</li>
<li>
<p><i class="fas fa-envelope"></i>Email: <a href="mailto:contactinfo@gmail.com">contactinfo@gmail.com</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<!-- Start copyright -->
<div class="footer-copyright">
<p class="footer-company">All Rights Reserved. © 2020 <a href="#">Love</a> Design By :
<a href="#">Love</a></p>
</div>
<!-- End copyright -->
<a href="#" id="back-to-top" title="Back to top" style="display: none;">↑</a>
Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks