Universal Language Storefront | Headless Shopify on Framer by Hannes AtianUniversal Language Storefront | Headless Shopify on Framer by Hannes Atian
Built with Framer

Universal Language Storefront | Headless Shopify on Framer

Hannes Atian

Hannes Atian

Verified

A Custom Storefront Shopify Couldn't Render: Universal Language, Headless on Framer

AlwaysCreative designed a fully custom Figma storefront for their client Universal Language, an apparel brand, and brought me in for the Framer build, with one non-negotiable: a real commerce backend, no design compromise.
The catch is that Shopify themes are built in Liquid (Shopify's templating language), and Liquid only ever gets you close to a custom design. So I split the stack: Framer for the front end where the design lives, Shopify for inventory and checkout, and Frameship (a connector that mirrors Shopify products into Framer's CMS) as the bridge.
The design shipped at full fidelity, and 97% of storefront revenue ran straight through it.
Universal Language home page and product grid
Universal Language home page and product grid
My role: frontend build, Shopify setup, launch support, and ongoing maintenance, working through AlwaysCreative.

What I did

Rebuilt the storefront in Framer against the Shopify backend, wired through Frameship
Solved a hidden ordering bug: Shopify's API doesn't expose the manual product order, so I added a numerical Sort Order field to the Framer CMS and sorted the grid low to high
Lazy-loaded the product grid (9 items on first paint, the rest on scroll) to keep first render fast as the catalog grew past 15 products
Built nav, cart, lightbox, and size guide as a single overlay system, since ~84% of storefront traffic was on mobile
Swapped the design's hover-zoom for an image-swap rollover, because it matches how people actually scan a catalog

The motion that does the work

Because most shoppers were on a phone, every secondary action opens as an overlay instead of routing to a new page. The cart slides over the grid, the size guide drops in over the product, and the screen never blanks out between actions. Page transitions read as friction on mobile, so keeping the whole flow on one continuous surface makes a small catalog feel like a considered shopping experience instead of a series of loads.

Results (first quarter of trading)

97% of storefront revenue through the headless front end ($2.5K, against $82 through Shopify's default theme)
13.21% conversion rate, 9.75% returning customer rate
2m44s average session, ~84% of storefront traffic on mobile
1,010 page views and 355 visitors on launch day, from a near-zero baseline

Let's talk

If you've got a custom design and a brief that says "make it real but don't water it down," this is the exact problem I solve.
Visit my website: https://hannesatian.com

Hannes is a great person to work with. His quality is fantastic, very organized, and so much better than most in his industry. Excited to continue working with him in the future.

— Roby Fitzhenry, Founder/CCO, AlwaysCreative

Live: speakul.com · Timeline: Dec 2025 – Apr 2026 launch · Stack: Framer, Shopify, Frameship
Like this project

Posted Jun 9, 2026

Headless Shopify storefront for apparel brand Universal Language. Custom Framer front end on a live Shopify backend; 97% of storefront revenue ran through it.

Likes

1

Views

2

Timeline

Dec 3, 2025 - Feb 9, 2026

Clients

Always Creative