fp-logomark.svg

Filling Pieces

During my tenure at Bolden one of my bigger projects was the site of Amsterdam-based footwear label Filling Pieces. They started out selling their products online using OpenCart as a platform, and even though OpenCart is a very capable tool, it kinda couldn’t keep up with the pace the company was growing, which was especially true during the peak of an ongoing sale.

In order to ensure smoother sale-ing (Get it? SALE-ing!), we went through the process of porting everything to Shopify. Shopify itself comes with its own set of limitations, but once you learn how to embrace them instead of finding workarounds you’ll end up a happy camper. The huge plus of Shopify imho is that it’s amazingly stable and really easy to manage.

Unfortunately the design of the site didn’t undergo a similar evolution and remained basically untouched. As a personal challenge – and to satisfy my inner designer 😌 – I translated some ideas into a concept of how I would build a classic, yet adaptable design.

Closing thoughts

Filling Pieces releases new products twice a year and because every release comes in a new theme it would usually require a few small updates in various places (“Guys, for the drop of spring-summer 2017, is it possible we add an extra section that contains a product image with clickable hot-spots and have the menu-drawer dark-blue?”). With the current site not really designed to be themeable, this involved lots of fiddling and patchwork.

The concept I've been working on is based on a themeable frontpage plus one interchangeable accent colour for the whole website. This way, the first impression of a visitor can be completely different with every release in whatever design the new theme requires, with the rest of the site basically remaining unaffected. This would convey the sense of something new twice a year, while keeping the same familiar shopping experience from the product overview to the checkout. View the prototype in your browser:

https://fp-597cff.netlify.com/

The frontpage with a generic theme for the purpose of this demo. The idea is that this page can be themed differently with every new product release.
The product overview page with the apparent underlying three-column-grid, which allows for plenty of interesting compositions.
The product page with detail imagery and a purchaser component that sticks to the right third of the page.
Slide-out cart component

The images and logo used in these screenshots aren't mine, but property of Filling Pieces #disclaimer

This prototype has been built as a static site using GatsbyJS and Redux to persist the cart state throughout the whole site, which is definitely over-engineered for this purpose, but I’m wondering whether this approach would work in production too? A server-rendered Next.js front-end instead of Liquid templates (“elsif”, ew) communicating with a GraphQL server wrapped around the Shopify API for products and a headless Craft CMS installation for all other content… Wipes drool off face 🤤

Thanks for your interest in my work! Feeling some more? Read about the work I’m doing at TicketSwap.