Proposal Summary

This proposal covers UI development to Update the PLP page of the website based on the shared design for the SCA webstore for Point Australia Pty Ltd-NS/SCA

Requirement

Update the PLP page of the website based on the shared design

1. PLP page width set to 100%
2. Utilizing the width of the website by making the listings bigger. Removing the extra spaces between Selected unit Qty in Cart and in stock
3. Make five items in a single row

Our Solution

Item page Updates

Below mentioned are the changes to be added in the item page.

1. PLP page width set to 100%

The width of the website is overall smaller than other ecommerce sites

Current website

After Changing the width to 100%

2. Utilizing the width of the website by making the listings bigger. Removing the extra spaces between Selected unit Qty in Cart and In stock

Reduced the gap between Selected unit Qty in cart and in Stock

After login

Before login

3. Make five items in a single row

Currently PLP page list 4 items in a single row, we will change to 5 items in a single Row

changes made in website configuration

Before login

Limitations/Terms and conditions

We may face some difficulties when we make a rough design for five items in a row. Since there are so many common classes by default. We will share the update if any difficulty is faced. When we tried to align 5 items in row, we faced an issue that if any row contain item less than five, the row will adjust its self and looks as below  

We can do one thing, we will first do all the changes as in the mock-up in SB first and you can see how the other page changes, so you can decide if any changes are required for other pages, if any changes required for other pages, we will consider it as extra.

• It is possible to display more than 4 items in the order form page.3 items in one page can be revised to more than 4 items in one page.
• Changes has been made only in specified screen width.
• We will develop a UI section based on the current theme and any additional changes to the UI or functionality will be considered extra.  
• We have considered only the desktop grid view as per the mockup, we will change the mobile view accordingly. For more changes in the mobile view and other views like list view it will be extra.