Development time (to date) ~2 Months

Technology TypeScript, Node, Shopify

Concept E-Commerce site for extreme water brand, with a promotional deal to sell your soul.

About

Liquid Death Mountain Water is canned water unlike any you’ve seen before. I was hired as a contractor to bring the e-commerce site to life, converting designed comprehensives into a Shopify storefront. Beyond the shopping experience, I also was tasked with creating the custom functionality for a promotion in which users would sell their soul for a free can of Liquid Death.

Shopify Integration

A majority of the development consisted of developing custom Shopify modules/blocks in order to allow a highly configurable, dynamic storefront. By providing section building blocks, the client is able to use Shopify’s interface to create their own sections, without the need for a developer.

Sell Your Soul

For the launch of the website, the client was interested in featuring a promotional deal in which users could trade their soul (by signing a legally binding contract) for a free can of Liquid Death. Utilizing TypeScript and a standalone Node server, I created an API service which accepted incoming soul data, generated discount codes, and saved signed contracts to an Amazon S3 instance.

After signing their soul away and submitting their signature, users would be given a dynamically generated coupon code which they could use to redeem a free can of Liquid Death from the Shopify site. They would also be given a copy of their signed contract, which they could save or share on social media.

Signatures

The animated signatures are a pretty standard SVG-based effect. By animating the stroke-offset of some SVG text elements, we are able to produce a dynamic ‘handwritten’ effect, utilizing any webfont.

An early idea was to have users actually “write” their name into the contract. As the signed contracts were to be later shared on social media, I wanted to avoid having the typical ‘random squiggle’ for a signature. This experiment demonstrated writing out the user’s name as they ‘wrote’ on the canvas, ensuring their final signature was always legible. Eventually, this experience was reduced to a simple animation, to maintain an ‘official’ feeling to the legal document.