Second Skin
A Custom Headless eCommerce Shopify Storefront
Client
Conor Joseph Jewelry
Published
2023
My role
Design
Front End Build
Shopify Intergration
Tech used
Next.js / React.js
Tailwind
GraphQL Shopify API
Redux Toolkit
GSAP Animation
I wanted to explore what was possible with eCommerce UI. This is an experimental project for the 'Second Skin' collection of rings by Conor Joseph.
My aim here is to employ layout and animation generally not found in eCommerce. Building in a 'headless' fashion allows me unhindered creative control, while providing a robust eCommerce solution.
Features
Shopify Intergration
Shopify is the prefered eCommerce solution of many businesses. The dashboard enables the client to easily manage their products, orders and customers.
Rather than using a typical Shopify Theme, I built a custom storefront from the ground up. Refered to as 'Headless eCommerce', this gives me total creative and technical control. This is achieved by using Shopify's GraphQL API to communicate between the decoupled Front End and Back End.
Design
The collection of jewelry itself is beautiful in a way that initially appears bizarre, but demands a second look. In the same vein, the art direction of the storefront should depart from the norm.
When designing, I kept the established eCommerce UX/UI conventions. Users will expect products pages, a cart and a checkout.
Departing from the traditional product grid, I opted for a fashion-editorial style layout. This layout showcases the excellent product and model photography side by side.
Next.js Front End
To hit both targets of complete creative control and the highest production standards, I opted for the React framework Next.js. This tool allows me pull in data from the Shopify API and pre-render each product page.
The customer enjoys a modern shopping experience with lightning fast load times on any device. This method is also great for SEO, enabling the seller to rank higher in search engine results.
(Note that as this is an experimental project, I've disabled SEO features as to not appear in search results.)
GSAP Animation
The page transitions are orchestrated around network requests. The thumbnail on the search page seamlessly transitions to become the product shot on the product page. The result is an elegant closer look at the product, rather than a harsh page reload. The deceptively difficult part here is animating an image from a dynamic, responsive layout to a fixed position. I used the animation library GSAP to achieve this stand-out effect.