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

Technology
TypeScript, Node, Shopify

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.

An example comp given by a designer, which I was tasked with coding into dynamic Shopify modules. The live site can be found at LiquidDeath.com

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.

In this screenshot of the ‘Hero Module’ interface, you can see the configurable settings, and on the right is the live preview of the custom module.

Additional Shopify plugins such as Bold Subscriptions were integrated into the product page to accommodate client needs.

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.

Example interaction “signing” a contract.

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. My soul contract! These images were saved into an AWS S3 bucket for later retrieval or sharing via social media. You can view the full-size image here.

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.

Signature “styles” can be swapped with any webfont. This is an example of one style candidate, which never made it out of testing.

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.

Here, you can see the example idea of ‘writing’ the name out, complete with a cursor trail to provide the feedback of actually marking the canvas with your cursor/finger.

---