Aether Apparel designs functional and stylish clothing for the modern adventurer, and has several showrooms across the United States that provide an on-brand experience for shoppers. They wanted to create an online shopping experience that was as powerful as their in-store one, a goal that comes with both technical and design challenges.
Aether approached Commerce-UI—a digital consultancy specializing in headless commerce—to help them move from their existing Shopify store and build a new ecommerce experience, both for the end user and the content team creating product pages. Aether envisioned a website that would reflect their physical stores—not just built around selling apparel, but more importantly giving a sense of community to shoppers.
The team at Commerce UI built an composable commerce site powered by headless Shopify, Sanity CMS, Next.js and Netlify that’s more performant and customizable, and delivers shoppers a unique, on-brand experience.
Project Goals:
- Better showcase Aether’s brand and product story
- Offer content editors the ability to make every product page unique
- Building a website that is highly-performant — a solid foundation to improve store conversions
- Develop solid UX practices, especially for mobile
Sanity and Mux Allow for Beautiful, Unique Product Pages
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.
In addition, 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.
Creating unique, content-heavy pages requires a user interface that content editors can easily use, while still staying on-brand. The Commerce-UI team decided to use Sanity as a headless CMS, and built a set of 30 designed, customizable sections for the Aether team to use as templates when they build new product pages. With videos optimized by Mux, the content team can populate high-converting video content into the pages in Sanity without worrying about slowing site performance.
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! — Michal Wolczecki-Klim, CTO at Commerce-UI
Better Site Performance with Netlify, Headless Shopify and Next.js
Since the backend of their site still uses Shopify, there was no need to migrate all ecommerce data into a new platform. But the team can build experiences that were unimaginable on their previous Shopify store.
Why? Because the site is decoupled. That is, the frontend (built with Next.js), is not dependent on the backend logic (Shopify and Sanity). A decoupled approach allows for much of the data to pre-built or prefetched. For example: as shoppers hover over a product card, the product page they’re about to enter is being loaded underneath so that they’re immediately available when a visitor needs them. The moment you click, the product page appears instantly.
By hosting the site on Netlify’s High-Performance Edge network, Aether’s pre-built content is hosted on servers across the globe, ensuring speedy delivery, no matter where the user is. Netlify’s support for Next.js optimization techniques like incremental static regeneration and Next.js Middleware make it a great fit for building and delivering Next.js sites.
One of the critical decisions we had to make during the development of the aetherapparel.com site was the choice of a hosting platform. At that point, we knew we would develop a Jamstack, Next.js e-commerce site. The prospective platform had to support all Next.js native functionalities like ISR or Edge Middleware out of the box and provide exceptional performance CDN. Netlify ticked all the boxes on top of offering a great developer experience. Taking into account the adaptable and transparent pricing model, we didn’t have to look much further. — Michal Wolczecki-Klim, CTO at Commerce-UI
