Update README

Author: criketman66

README.md

@@ -3,7 +3,7 @@
 ## Overview
 Alpine is a modern & flexible responsive HTML Bootstrap 5 template with customizable card listings on the category page and an excellent product display on the individual product page. It's the perfect starting point for any fashion retail website, and the template's clean and minimal design means it's easy to modify and painless to integrate with your custom Ecommerce application. And above all, it's free!
 
-<strong><a href="https://Alpine-html-bootstrap.vercel.app/">View Demo</a> | <a href="https://github.com/PixelRocket-Shop/Alpine-html-bootstrap/archive/main.zip">Download ZIP</a></strong>
+<strong><a href="https://alpine-html-bootstrap.vercel.app/">View Demo</a> | <a href="https://github.com/PixelRocket-Shop/alpine-html-bootstrap/archive/main.zip">Download ZIP</a></strong>
 
 ![Bootstrap 5 Responsive HTML Fashion Store Template](https://pixelrocket-public-assets.s3.eu-west-2.amazonaws.com/github-assets/alpine-html/homepage-medium.png "Alpine | Responsive Bootstrap 5 Ecommerce Template")
 
@@ -31,7 +31,7 @@ Most developers will be editing the source code and will also be running Webpack
 
 
 ## Quick Start
-- [Download the latest release](https://github.com/PixelRocket-Shop/Alpine-html-bootstrap/archive/main.zip) OR clone the repo: `git clone https://github.com/PixelRocket-Shop/Alpine-html-bootstrap.git`
+- [Download the latest release](https://github.com/PixelRocket-Shop/alpine-html-bootstrap/archive/main.zip) OR clone the repo: `git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.git`
 - Install Node.js if you don't already have it on your system.
 - Open the project root in your command line.
 - run `npm install` in your command line.
@@ -50,7 +50,7 @@ To keep code repetition to a minimum, we've used Handlebars.js as the templating
 
 
 ## Demo Link
-[Demo URL](https://Alpine-html-bootstrap.vercel.app/)
+[Demo URL](https://alpine-html-bootstrap.vercel.app/)
 
 **Please note that this is an HTML template only. It does not connect to a database, and will not automatically work in a content management system (Wordpress etc). You will need to incorporate our code into your application.**
 
@@ -60,17 +60,19 @@ To keep code repetition to a minimum, we've used Handlebars.js as the templating
 * Homepage slideshow (using Swiper.js)
 * Built with Bootstrap 5
 * Fully responsive
-* Brand logo marquee component
-* Homepage featured categories component (using Swiper.js)
-* Instagram slideshow component (Swiper.js)
-* Category listing card showing sale badge, new product badge and sold out badge
+* Brand logo component
+* Homepage featured products slideshow component (using Swiper.js)
+* Image Hotspot component with popout product card (using Tippy.js)
+* Instagram slideshow component
+* Category listing card showing sale badge and discount percentage
 * Custom pagination component
 * Header Megamenu
 * Customer review component
+* Company review component
 * Related products slideshow component
 * Offcanvas category filter display
-* Header cart drop down display
-* Slidedown search bar
+* Header cart offcanvas display
+* Custom search overlay
 
 
 ## Template File structure
@@ -97,35 +99,35 @@ We use Handlebars for two main reasons: firstly, the use of Handlebars partials
 ### Example Handlebars Partial
 Open the following file in our template: src/html/index.html.
 
-Around line 21 you'll see the following code:
+Around line 46 you'll see the following code:
 ```
-{{> swiper/swiper-homepage-hero }}
+{{> swiper/swiper-hero-slideshow }}
 ```
-That's a Handlebars partial. That code tells Handlebars to look inside a folder called swiper (located in the partials folder) and then to find a file called swiper-homepage-hero and insert it into the index.html file when it is compiled.
+That's a Handlebars partial. That code tells Handlebars to look inside a folder called swiper (located in the partials folder) and then to find a file called swiper-hero-slideshow and insert it into the index.html file when it is compiled.
 
 There are a few important notes about our use of Handlebars partials:
 
 * All of our partials are stored inside src/partials. Do not place partials anywhere else.
 * We use .html as our partial file extension. We have also added .svg as a valid partial file extension.
 * If you have folders within folders inside your partial folder, only reference the folder the partial resides in. So "partials/header/navbars/navbar.html" would be referenced as "navbars/navbar".
-* Do not include the partial file extension. Note in the example above that we output "swiper-homepage-hero" and not "swiper-homepage-hero.html"
+* Do not include the partial file extension. Note in the example above that we output "swiper-hero-slideshow" and not "swiper-hero-slideshow.html"
 
 ### Handlebars Loops
 Let's look at how we use Handlebars to keep our code base clean. Open up the category page: src/html/category.html. 
 
-Around line 40, you will find this code:
+Around line 56, you will find this code:
 ```
 {{#if (config category-products)}}
-    {{#each category-products.entries}}
-        <div class="col-12 col-sm-6 col-lg-4">
+    {{#each (limit category-products.entries 4)}}
+        <div class="col-12 col-sm-6 col-md-4">
             {{> listing-cards/listing-card this }}
         </div>
     {{/each}}
 {{/if}}
 ```
 And that's our loop for a category page. We're passing in JSON data to our Handlebars loop, then inside the loop we are referencing a Handlebars partial and passing it the data for each loop item:
 ```
-{{> listing-cards/listing-card-one this }}
+{{> listing-cards/listing-card this }}
 ```
 ## Template JSON Data
 The Webpack Handlebars plugin that we use comes with a very handy utility that allows us to pass in JSON files as template data.
@@ -136,8 +138,8 @@ Again, if we reference our category page loop:
 
 ```
 {{#if (config category-products)}}
-    {{#each category-products.entries}}
-        <div class="col-12 col-sm-6 col-lg-4">
+    {{#each (limit category-products.entries 4)}}
+        <div class="col-12 col-sm-6 col-md-4">
             {{> listing-cards/listing-card this }}
         </div>
     {{/each}}