This is an e-commerce website clone that is made during construct week. It was completed within 5 days.Created a good responsive UI. So, you can use this website through phone and tablet also.
This project is deployed on netlify here - Farfetch Clone
The e-commerce website has the following pages and the order of flow is also the same.
- This page as the name suggests has the login and signup functionality, the login and signup data are stored in the local storage and used for verification of the user.
- You need to put minimum 8 digit password with 1 special character . And also need to put same password in the login page.
-
This page as the name suggests has the homepage functionality. This is the landing page, Men's part, Women's part, and Kids part can be accessed from here.
-
Cart page is also accessible from here, to view your cart. To add the item to cart you will have to go to specific category page or you can add from homepage also.
-
There is also dropdown menus for the featured brand and trending now. so, you can also check in by there.
-
Below it you can find the QR code for download over mobile app. You can scan that QR code and after it you can download mobile app of our website.
-
Every page has navbar in top of the page. Navbar has some special functionalities in it.
-
So there are several buttons for men , women ,kids , Wishlist , cart , nation and login-signup.
-
after clicking on that particular button you will be redirect to that related webpage.
-
Near to the cart button you can find the count for how many items are there in cart and Wishlist.
-
There is also one search bar space so you can search items or categories which you want.
-
Each products have their own landing page. In there you can found some pretty information like our designers or brands which we have in our websites. It also gives you a trending deals and products for that particular part.
-
Above of it you can find the different categories of the products. Like men's part has categories like watches , clothing , shoes , sneakers , bags , accessories etc. other 2 women's and kids have their related categories.
-
You can choose one of them and it will redirect you to their particular webpage .
-
After clicking one of the categories you will be redirect to that particular category page . Suppose you choose men's --> Sneakers. You will be redirected to the sneakers page.
-
In this page you will find all the products of sneakers. In each of the product card you can found needed details for it.
-
You can find their images for it. and you can also find another image for that product by just hover on it. It is applicable on all the product cards on the website.
-
You will also find the heart button on top of card. You can click on that and it will add the item into Wishlist. And colour of that particular button will be changed into black.
-
There is also some details of product in cards like product name , brand name , price , discount and effective price respectively.
-
In top of the webpage. You can find 2 selection menus for categories and sort Items. So, you can set it according to your need.
-
After clicking on particular product you will be redirect to its product page.
-
This page gets the data about that specific product from the category pages and displays it in detail here.
-
You can find more details of the product from it. Also, you can find and set the sizes from it.
-
You can also find some similar items by scrolling down.
-
In product page you can find buttons for the add to bag button and Wishlist button.
-
After clicking on Wishlist button that particular item will be added into the Wishlist.
-
Similarly for the cart/bag button. When you will click on this button. Item will be added into cart and you will be redirected to the cart page.
-
Into navbar you will found that the count is also increases whenever you will add item into cart or Wishlist.
-
On clicking on heart of the navbar you will be redirected to the Wishlist page of the website.
-
In this webpage. You will get items which is into the Wishlist. You will find details for particular item there. You can also change the size for products.
-
If you want to remove the item from the Wishlist. Just click on cross sign which is given above the card. You can delete the particular item by clicking that cross.
-
There is also add to bag button below the details . So, by clicking on that you can Add that item into bag.
-
You will find that the count of the bag items and Wishlist are also updated after make changes.
-
By clicking on bag button you will be redirected to the bag webpage.
-
Here all the products that you have bought will be displayed with the info like price and quantity.
-
You can change quantity according to your need. and the total of the cart value will be updated respectively.
-
Clicking on checkout will take you to Checkout page.
-
In this page you will find input fields for address for delivery.
-
You will also find that there is summary. where all the products will be displayed which will going to checkout. Also, you can find the total summarized payment total there.
-
There is also one button named as 'proceed to payment'. After clicking on that you will be redirected to the payment page.
-
Before clicking on that you need to fill the form of delivery address with valid details first.
-
After filling that form . You can go to payment page.
-
Payment page is like the final payment gateway to add the card details like CVV number, Name, Card expiry date etc.
-
there is several options for make payments like UPI , Cards , Net banking etc. you can make payment from whatever you need.
-
We created only card payment functionality for our clone .
-
If there will any offers will applicable. It will directly apply and you can find it on 'payment summary' . You will directly find discounted price.
-
You can find card details form. You need to give valid input and then you can click on 'Make Payment' Button . It will redirect you to confirmation page .
-
If all the details of previous page were right . Then you will be redirect to this page.
-
In this page you can find massage of 'Order successfully placed' . and it will give you an estimated delivery date for delivery and also order Id for your reference.
-
There is also button named as 'Track order' and 'homepage'. By clicking on homepage you will be redirected to the homepage.