Aether Apparel

How we brought an in-store experience into the digital realm

Shopify Development

Accessibility compliance

Headless Commerce

UX Consultancy

Visual QA

Shopify Development
Accessibility compliance
Headless Commerce
UX Consultancy
Visual QA

Live site

https://aetherapparel.com

Digital design

Aether Design Team

TechStack

Sanity,

Next.js,

Shopify Plus,

Mux,

Netlify,

Klaviyo,

Algolia,

Sentry,

Founded over a decade ago by movie producers Palmer West and Jonah Smith, Aether Apparel brings design-conscious technical outerwear that can accompany people on their life adventures. Today, Aether is hugely successful, with several unique showrooms around the US, including in Los Angeles and Aspen, as well as the ultimate shop on wheels designed in cooperation with Paris-based designer Thierry Gaugain.

When Aether approached us to build a new online store, they envisioned an experience that would reflect their physical stores — not just built around selling apparel, but more importantly giving a sense of community.

To achieve this, we decided to build an ecommerce store powered by headless Shopify Plus and Sanity CMS — an environment that is fast, robust, and flexible.

The result is a website that perfectly reflects Aether's brand — bold, adventurous, and built to last.

"When we decided to redesign our ecommerce website, we very carefully looked for a dev agency that cared as much about technical capabilities as they did about design. This is truly a rare combination of talents, but we found it with the Commerce-UI team"

Evan Backes, Designer, Aether Apparel

Challenges

Better showcase of Aether’s brand and product story.

Building a fast website that is easy to maintain — a solid foundation to move fast in the future.
Develop solid UX practices, especially for mobile.
Improve overall performance.
Having a long-term partner, who can support and maintain the product in the future.

What we did

A headless ecommerce build on top of Shopify Plus.

An extensive page builder with live preview, powered by Sanity CMS.
A platform shipped using Netlify for fast access around the world.
SEO, analytics, and performance marketing optimization.
Ecommerce User Experience (UX) consultancy and ongoing support.

Delivering a website builder, not a website itself

To truly engage your customers, it’s not enough to rely on generic pre-built pages. Brands need the ability to tell their stories exactly as envisioned. The way a website is built should reflect today’s needs, but more importantly be flexible enough to support whatever will come in the future — be an enabler, not a limiter.

That's why we’ve developed a unique page builder with over 30 customizable sections, each coming with multiple variations. This vast modular system allows Aether designers to tailor their online presence while ensuring aesthetic uniformity.

But how about editing experience? Does going headless necessarily mean sacrificing the user-friendly interface of Shopify’s Online Store 2.0? Well, not if you choose Sanity CMS — a headless solution Shopify invested in recently.

At Commerce-UI we believe the editing experience is as important as the final result. By combining Shopify and Sanity CMS we were able to bring the best of both worlds — cutting-edge technology with an already familiar and comfortable editing experience, live preview included!

↑ Editing experience with real-time preview, inside Sanity CMS.

Every product is unique so does the product page

While physical stores allow customers to see and feel products in person, it can be difficult to recreate this online. One way to bring the in-store experience into the digital realm is by adding editorial context to product pages. This can include: presenting the product in different settings, styling with other items, educating on fabric specs, or providing information on potential uses for the product.

The Aether design team set an ambitious goal for each product page to be unique. As customers browse through the site, they can experience the thrill of discovery and the feeling of being in a physical store.

However, with so many products in their online store, how could this be done effectively?

We started by enabling editors to extend basic product pages with editorial sections, giving them the ability to customize the layout and content in a way that sets their products apart. Then, we added the capability to easily reuse certain pieces of content between product pages, saving valuable time and effort.

The above would normally be extremely difficult or even impossible with a standard Shopify setup, but can easily be achieved with an external CMS like Sanity.

↑ Each product page can be extended with custom editorial content for better showcase of Aether's brand and product story.

Building a website is a collaborative effort

When designing and developing a website there are many factors to consider. Time and budget constraints, performance goals, user experience (especially on mobile), and design aesthetics.

Finding a balance between all of these can be difficult, but that's where partnership matters.

Our team proactively worked with the Aether designers team, to ensure that the final product meets the highest standards.

"On top of all this, the Commerce-UI team are simply wonderful people to work with–from day one until the launch. It was genuinely a synchronized partnership. I can’t stress just how important that is; building websites is a very tedious and long process, and throughout it all, the Commerce UI team showed patience, attention to detail and a level of consistency that was truly a pleasure to work with."

Evan Backes, Designer, Aether Apparel

↑ Mobile first approach with seamless user experiences on any device.

↑ Product detail pages with high-quality photo content and editorial elements.

↑ Extensive search filters.

↑ Search with real-time suggestions.

↑ Custom editorial content and dynamic progress bar.

Boosting ecommerce conversions with web performance

Consumers have little patience for slow loading times and often abandon websites that fail to meet their speed expectations. In other words, the faster your website loads, the more likely visitors will make a purchase.

The ecommerce team at Aether recognized the importance of speed right from the start. We knew we had to find a solution that would allow us to push the boundaries of typical Shopify stores. That's why we chose to use the Next.js framework — used by brands like Nike or Peloton — allowing for advanced performance optimization techniques, like:

Prefetching — certain elements of a website are loaded in the background. For example, as you hover over a product card, the product page you’re about to enter is loaded underneath, so they're immediately available when a visitor needs them. The moment you click, the product page appears instantly.
Static Site Generation (SSG) — pre-built pages (which means there is no building time when you open a website) are distributed across a worldwide network of servers. Your ecommerce store loads equally fast, no matter the customer's location.

These techniques, among many others, ensure a smooth and enjoyable experience for all Aether’s customers.

The importance of quality video content, that loads fast

As a brand rooted in movie production, Aether understands the importance of quality video content. It enhances the brand's storytelling and helps build strong connections with the audience.

However, even the best video won’t convert if it takes ages to load. And video is complex: formats, compression, processing, streaming, and distributed infrastructure.

To support this extensive need for video content, we decided to use the Mux video platform for advanced video optimization and infrastructure. This cutting-edge technology allows for the level of optimization so far available only for giants like Netflix. Results exceeded everyone’s expectations — Aether’s videos load faster than traditional images on the website.

Now with extensive usage of video content, the new Aether website is closer than ever to the brand's DNA.

Headless CMS