Arlan Tazmin Web Developer

Naked Boot and Shoe

For this project I was given custom designs and specific functionality that needed to be incorporated inside BigCommerce e-commerce software. Some of the custom functionality included; unlimited number of slides for home page carousel (BigCommerce allowed maximum of 5 slides), product color variations using product image, responsive masonry gallery for individual products, dynamic instagram feed into carousel, lazy loading to display product items grid, different art directions for same images depending on screen size accounting for different device pixel densities from 1 to 4 for small screen devices, 1 to 2 for medium screens, among others. To achieve desired results I had build custom dynamic rendering techniques using BigCommerce Stencil theming engine.

Agency

TWS

Role

ES6, CSS, HTML, Handlebars, Grunt, Webpack, YAML, AJAX.

Project Type

E-commerce Website

Project Web Address

nakedbootandshoe.com

Screen size: Large (desktop)Device pixel ratio: 1xImage quality: 80%Art direction: crop y-axis, zoom in

Screen size: Medium (tablet)Device pixel ratio: 1x, 2xImage quality: 50%Art direction: crop x-axis, zoom out

Screen size: Small (smartphone)Device pixel ratio: 1x, 2x, 3x, 4xImage quality: 50%Art direction: crop x-y-axis, zoom out

Custom fields with JSON data

Multiple product color variations

Responsive masonry gallery for individual products

Instagram dynamic feed using responsive carousel

Infinite lazy loading of products with blur filter on image placeholders

Project Web Address

nakedbootandshoe.com