Custom Shopify Storefront with Interactive Canvas StorytellingCustom Shopify Storefront with Interactive Canvas Storytelling
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Layer is a collagen-drink brand getting ready to launch. I designed the storefront and built it myself on Shopify.
Homepage- A custom Shopify section on top of Dawn, re-skinned to Layer's brand: cream, ink and red, a mono typeface, and custom icons. Every block (hero, flavours, benefits) is editable in the Shopify editor, so the team can change the page without asking a developer.
Ethos section: the part I'm proudest of The founders' story is set on a canvas, and the Layer can is your cursor. Move it, and the text re-wraps around the can every frame, in two columns, like a magazine layout that reacts to you.
There's no library behind it. I wrote the layout engine by hand. It measures every word and works out, line by line, how much room is left on either side of the can. Basically CSS shape-outside, but around something that moves.
Accessibility- Canvas text is usually invisible to screen readers and search engines. Here, the real copy lives in the page and the canvas just draws it. On phones, the canvas switches off and you get normal, selectable text.
Merchant controls- Can size, spacing around the can, font size, colours and images are all editable in Shopify.
Also explored A scroll-driven GSAP timeline telling the two founders' stories side by side. It stayed a prototype and isn't in the final build.
Status: built and deployed, pre-launch.
Post image
Post image
Post image
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started