E-commerce web store, Selling sunglasses, eyeglasses, fashion jewelry.
Build the website with Magento 2 CE from the scratch.
We shall implement the website in 3 stages.
- The first stage implements the basic UI layouts, product features, payment methods, eyeglasses try-on software.
- The second stage implements art, theme and graphics, and fill in contents.
- The third stage:
- Implements more features like coupons, newsletter, landing page, referral, affiliate program.
- Implements the site for mobile devices.
The site should be designed for internationalization.
Main navigation bar
A main navigation bar at the top of the screen, displayed in every page.
- Its position is fixed, not moved by scrolling.
- It has buttons/menus:
- Left aligned: Home, Shop, Lists, Search.
- Right aligned: Cart, user info, More.
- Menus are opened by hovering the mouse over it. If the menu itself is clickable, its text should be underlined when hovered over.
Product listing page
There are 2 product listing layouts:
- One panel: Displayed for mobile devices or narrow browser windows.
- Two panels (left-right): Displayed for wide browser windows.
One panel layout
Top to bottom: navigation bar, listing info bar, product listing.
Listing info bar:
- From left to right:
- Show product listing query. eg “Men > Sunglasses”, or the search string.
- Filter button: When clicked, show the product filter modal window.
- Sort by menu: When hovered, shows the sort choices.
- When a user scroll down:
- The listing info bar should remain visible, staying just under the main navigation bar. The idea is that we want users to be able to see and change their current selection without needing to scroll up.
- The main navigation bar becomes thinner, removing some vertical white space in the bar.
Product filter window:
- A modal window in the center of the current page.
- Shows varies filtering criteria and their choices. Leave empty for now.
- Buttons: Ok, Clear.
- List in a grid with 1 to 3 columns, depending on the screen width.
- Each grid cell:
- On top left, shows optional labels, like “Hot”, “New”, “Discounted”.
- Under, shows a main product pic.
- Under, shows up to 3 thumbnail pics of variation products of the same style as the main product.
- Under, shows the product title/subtitle on the left and price on the right.
- On hovering over a variation thumbnail, the main product pic and info are replaced with the variation’s.
- On clicking a variation thumbnail, the thumbnail “goes to” the position of the main pic, and the main pic “goes to” a position of thumbnail. i.e. The variation becomes fixed as the main product and the original main product becomes a thumbnail. The movement should be animated.
- When hovering over the grid cell, shows:
- A star on the top right of the cell. On clicking, save the product to the Saved list.
- Try-on button on the left of the star. On clicking, opens the eyeglasses try-on window.
- As we cannot hover on mobile device, just always display these buttons.
Two panel layout
Navigation bar and listing info bar are the same as one panel layout. Under, have two panels on left and right.
- Product listing grid with 2 columns.
- On hovering over an item in the right panel, shows product pictures and try-on view.
- Breadcrumbs shows the product category.
- Hovering mouse over the thumbnails show the picture as the big picture.
- When a variation thumbnail is clicked, the product info and thumbnails are updated to that of the variation.
- The bulletin points are a few points of product highlight description.
- Product options are options of the particular product. See section Eyeglasses below for its options.
- Changing variations or product options may change the product price.
- total price is (product price * quantity) modified by any discount.
- Buy button has label “Buy”. Clicking it adds to the cart and goes to the cart page.
- Wist list button has label “Add to Wish List”. Clicking it add to a user list called “Wish List”.
- The logic is that a user can have multiple lists. Liked, Wish List and Browsing History are lists. (The logic is that users can create new lists. But we do not need to implement this feature for now. But keep this in mind when designing database.)
- Share on social media starts with “Share: “, followed by a list of social media icons.
- Try-on and like are the same as in the product listing page.
An eyeglasses product has options of:
- Material of lens.
- Prescription of lens.
Choosing lens material or prescription can change the price of the product.
Choose lens materials with radio buttons. Use placeholders Materal A, … for names.
Has a checkbox Prescription. When checked:
- Form is shown under to enter prescription numbers [use placeholders “num1” to “num4”]. The prescription numbers should be saved in a cookie so that the user does not need to enter them again.
- Additional options like lens thickness may appear.
We want to integrate a virtual try-on software for eyeglasses. We are still deciding on what software to use. If you have any recommendation please let us know.
Support login by Facebook, Google, Amazon, etc.
Support credit card, paypal, Amazon pay, etc.
- The site should include an interface for managers to enter the product info according to our product specification.
- When listing a category, it shows the cell groups in the category, one cell group in one grid cell.
- When listing a particular style, it shows all its variations without using cell groups — one variation in one grid cell.
- When a user performs a search, it shows all products without using cell groups.
- The internal logic is that a user can have multiple lists. Liked, Wish List and Browsing History are lists. (The logic is that users can create new lists, or the site can generate recommendation lists for the user. But we do not need to implement this feature for now. But keep this in mind when designing database.)