The landing page hero banner of Paul Valentine at August 2020.

Paul Valentine were aiming for an ambitious re-architecture of their Shopify platform to rapidly scale their business internationally.

View website

Introduction

I was the lead developer and acted as the solutions architect during the early discussions of this project. I also helped facilitate key technical decisions and also orchestrating the technical backlog of work required to deliver the project over the line.

Disclaimer: This was my last project at We Make Websites in Sep 2020 - and this post will most likely be a long read, frequently edited and broken into multiple blog posts in the future. Below is an overview of my journey of working on a project of this scale.

The first i18n headless e-commerce build on Shopify Plus

It's not a flex when I am headlining this project as the "first internationalised headless e-commerce on Shopify Plus" (well maybe it is a flex, but it's not intentional). Sure, there have been headless e-commerce websites on Shopify such as Koala, JB Hi-Fi, Staples, and a handful of others.

But the key difference here is internationalisation (i18n). And being the first in this area, especially on a headless architecture (well first in anything really), means that there is very little... if any advice that your peers and industry partners would be support with. So there in lies most of the complexity, uncertainty and pressure of pioneering a project with this requirement.

We Make Websites are held in high esteem across the globe especially in the e-commerce space. Not only because their popularity from events, or their high profile client-base but also because they are "the ones" you go to for internationalisation e-commerce on Shopify.

We have delivered countless builds with i18n support but only through custom solutions and typically through multiple Shopify instances - but all development (client and server) has always been through Shopify's theme and app engine.

This headless architecture aims for 25+ stores on a JAMstack architecture powered by Contentful, Nuxt.js, Netlify and a handful of other integrations like Algolia, Exponea and Okendo. So it is vastly different to what we were set out to do.

For a project of this scale, with no theme framework, no Shopify plug and play features, tight deadlines, multi-store architecture and with a skeleton crew leading the initial development - how did we accomplish all this?

Design

I am going to gloss over the hands-on design phase of this project such as wireframing and high-fidelity designs, as this is meant to be a focus on the technical aspects of the project.

This is not to undermine the value that design had brought into the project, but rather to discuss what we as developers had to do to bring those designs to life on screen and for a headless Shopify build.

Storybook and design systems

In the past, the communication between design and development has always been a rocky relationship. Designs won't match, development scope increases because of misunderstanding of a feature, UI states don't exist and we make assumptions, whichever - we've heard it all if you've worked at a web design agency.

Being a designer and the tech lead at the agency, it was an issue I kept coming across but could not resolve overnight since it would be a cultural shift in the agency on how we produce a website.

And that's where Storybook had helped bridge the gap with this project. Since it sat away from Shopify theme editor, and had strong support for Vue.js - it was another tool to help bring focus on the individual UI elements that come together to build a cohesive app experience.

Storybook allowed the designer and developer to break down the page designs in Figma, and create identities for everything on the page.

When I say identity, I mean naming components, outlining the fields required for admin experience, preview different states and interactions responsively, focus on typography and spacing - all within an isolated environment.

I will be doing a write-up of my experience with Storybook on Nuxt.js in the near future - but for now, above is a short video of what the Paul Valentine Button component looked liked on Storybook - and how we could use this across the UI development phase of the project.

Content modelling

WIP - This section will outline the content modelling experience, how we broke down designs, applied it within Contentful, diagrams, and also the learnings at the end of this.

Product detail page

pv-pdp-desktop
pv-pdp-specs-desktop

Product listing page

pv-plp-desktop