Development Project

Banquet flatware online catalog

February 2019 | 1.5 min read
TECH:
  • WordPress
  • PHP
  • Javascript
  • LESS
Next

I was hired by Caava design to build a product catalog website for their client Host & Porter. I have been following their owner and creative director Cody Small on behance.com for some time and was excited to have an opportunity to work with them.

WordPress Development

The client selected WordPress as the platform of choice. The product catalog contained 450 SKU’s, 26 collections (products grouped by design), and 6 categories. The project had the size and complexity of an e-commerce store without the cart. I created a custom WordPress plugin that would allow for the management of the catalog within the admin UI.

Host & Porter project sitemap.

Plugin Features

Products in a collection come in a variety of colors. I built the WordPress plugin to allow for multiple product images to be uploaded and grouped by color. The plugin also has a merchandising feature that allows for the selection of related products. I also installed two additional plugins, Advanced Custom Fields Pro, and Instagram Views to complete the project. Advanced Custom Fields Pro allowed me to create editable fields to manage all content in the page layouts. Marco Pelloni, a fellow Jiu-Jitsu practitioner, developed The Instagram Views plugin that was used on the homepage to pull images from the Instagram API. To document the plugin, I created a 13-page website on Google Sites with annotated screenshots.

Host & Porter project homepage design by Caava Design.

Responsive Design & Scale

The Caava design team designed the website for mobile and desktop. In one of our review meetings, we decided to take it a step further and also make it big screen responsive as well. I built out the views to be scalable and grow to fit the screen while maintaining the same ratio. To help increase page speed, I also added a lazy loading script to load images only when scrolled into view.

Host & Porter project product detail template design by Caava Design.

Conclusion

Caava Design wrote a case study outlining the full scope of the project. I got to challenge myself by designing a complex feature into a single WordPress Plugin while also building the beautiful front end of the website. Both Caava Design and Host & Porter were happy with the finished product, and I have to say I was pretty pleased too.

Host & Porter project product category template design by Caava Design.