Aether Apparel

Challenges

To better showcase Aether’s brand and product story.

• Build a fast website that is easy to maintain and one that provides a solid foundation to move fast in the future.
• Develop solid user experience (UX) practices, especially for mobile.
• Improve overall performance.
• Have 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 UX consultancy and ongoing support.

Delivering a Website Builder, Not Just 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. In other words, 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, including live preview.

Every Product is Unique, so the Product Page Also Needs to Be

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 by 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 to save 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 content management system (CMS) like Sanity.

Building a Website Is a Collaborative Effort

When designing and developing a website, there are many factors to consider, including 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 design team to ensure that the final product meets the highest standards.

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 and Peloton, that allows 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 when considering 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. The 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.