BrightStores
Roadster
Working off highly detailed mockups from the client, I edited one of the core themes available to a high degree. This involved changing HTML and CSS along with adding jQuery for animations and custom functionality, such as the left hand navigation hamburger menu.
Hamburger menu: top and left hand navigation
Although BrightStores has a core theme option for left hand navigation and several for top navigation, they do not have any that combine the two.
I added a left hand navigation section along with a hamburger menu icon next to the logo that, when clicked, shows/hides the menu and shifts the page to the right.
Scroll effect and larger product thumbnails
On scroll a white background is added to the header and the featured products are revealed.
The product thumbnails are much larger than the out-of-the-box theme and show three across instead of the template’s usual five which involved primarily CSS changes.
Custom product and cart page
Product option thumbnails were moved to display along the left and the main product image was drastically increased in size. The quantity input boxes were changed to match their styling, as was the layout of the product page so all information is on the right and all images are on the left.
Using their brand guidelines I also changed the styling so all buttons and input boxes across the storefront matched their specifications.
Compare to the base theme
This theme provided the core of the project which I then edited to look like the above. You will notice it has top navigation with no left hand navigation option, much smaller product thumbnails, and product pages with a completely different layout.
