Second Skin

A Custom Headless eCommerce Shopify Storefront


Conor Joseph Jewelry



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.

View the site


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.

Shopify dashboard showing products


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.

Four screenshots of the site design

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.