Lift Foils

An e-commerce experience that feels like flying above the water

Shopify Plus Development
Headless Commerce
NEXT.js
Internalization
UX Consultancy
  • Shopify Plus Development
  • Headless Commerce
  • NEXT.js
  • Internalization
  • UX Consultancy

Digital design

Ania et Lucie

TechStack

Shopify Plus

Sanity

Next.js

Vercel

Sayduck

Mux

Mapbox

Klaviyo

Stamped

In 2015, Nick Leason — an engineer and avid surfer born and raised in Puerto Rico — came up with the idea to put an electric motor on a foil and build a flying surfboard. He invented what we today call eFoil.

Soon after, the product went viral. You’ve probably seen Mark Zuckerberg casually riding a Lift3 or you’ve spotted one in Imagine Dragons’ Sharks music video.

To date, Liftfoils has sold over 10,000 boards and built a worldwide network of 300+ demo locations in the United States, Europe, Asia, and Australia.

But as the company expanded, its existing WordPress site became a roadblock for growth. That’s where Commerce-UI comes in. Liftfoils tasked us to build an entirely new digital experience in only 6 months — just in time for the new flagship Lift 3F product launch.

Oren Schauble
Liftfoils VP of e-commerce

Commerce-UI did an excellent job understanding our technical requirements, communicating and working through with us actually recommending partners like designers and performance to integrate into our site and processes.

To achieve the best customer experience we needed to reimagine not just the website technology but also the user interface design. To help us, we invited brilliant Ania et Lucie to collaborate on the project. The right call! Together we created a modern ecommerce website with outstanding video content, inspiring storytelling, clear calls to action, and an advanced product configurator.

Immersive experiences with high-quality videos

Despite getting a lot of traction in recent years, efoiling is still a new concept to most customers. So, how do you translate a physical experience into the digital space? The answer: immersive video content. But having high-quality video content while not ruining e-commerce performance is challenging. Supporting multiple formats (background video, youtube, custom player etc.), optimizing video for different devices, and loading heavy video data only when needed add to the challenge.

We built an architecture that allows for any number of high-quality videos per page, doesn’t sacrifice overall site performance, and makes it easy for editors to manage their video content.

In-depth we did:

  • Showing the first frame as an image until the video loads — Instead of an empty canvas, users see meaningful content without any layout shifts from the start.
  • Loading videos only when you need them — Instead of slowing down the site by loading all videos from the start, videos are only loaded once users scroll to a specific part of the page.
  • Automating video processing with MUX video — Ever wondered how to compress video for the web? Editors should never have to do this manually. That’s why we integrated leading video service provider MUX with their website. Editors upload high-quality videos in the CMS and MUX does the heavy lifting of video optimization and distribution automatically.

Product configurator — overcoming Shopify limitations

Liftfoils offer an impressive amount of product customization.  But how do we ensure Liftfoil’s configuration experience is easy and enjoyable? A holistic approach is crucial as there are challenges around user experience, as well as platform limitations.

Shopify is among the most prominent e-commerce platforms today. It has one downside: it does not support advanced product configurations out of the box. This means you cannot create products with more than three options (think of size, color, material, etc.) using Shopify.

Fortunately, there’s a way to overcome these limitations with an external CMS. The Commerce-UI team extended Shopify's native product model with Sanity CMS (Shopify’s recent strategic investment). The result is a system that makes creating various product configurations with a completely adjustable user interface and business logic possible.

3D models are incorporated into the product gallery. AR support lets users visualize the product dimensions in their own space.

Internalization: Shopify Markets, multi-instance setup, or a combination of both

Previously, Shopify only offered a multi-store setup. The idea was simple: each country or region is assigned to a separate Shopify store under an organization account. This allowed for creating different product lists, setting up suitable payment methods, or installing specific apps. However, it quickly became unmaintainable for brands, some ending up with 50+ expansion stores.

With the recent launch of Shopify Markets, we were able to provide multiple currencies and pricing lists for each country without needing to create even one additional Shopify store.

Shopify Markets is a significant improvement to the Shopify ecosystem. However, it is still not as flexible as a multi-store approach. Stores that want to process payments in a customer's local currency must use Shopify Payments as the primary gateway. It is impossible to set up a different payment gateway for particular countries and optimize the transaction provision costs. And it’s still not possible to maintain a separate product list per region either.

After considering Liftfoils’ business cases, a hybrid solution turned out to be the most effective. Liftfoils can set up separate stores and configure them tosuit a region's specifics. At the same time, all stores use Shopify Markets features so the company can keep a small number of stores and still have full flexibility in business decisions. Plus, from their customer’s perspective, there is no visible difference when switching between regions.

High-quality video-first content with the highest e-commerce performance.

Mobile first approach with seamless user experience on any device.

Product detailed page with incorporated 3D models.

Fully customizable high-quality video content.

Page building capabilities for editors with Sanity CMS

To support growth, Liftfoils’ marketing team has to be able to create, update, and experiment with content pages without developer involvement.

Using Sanity CMS, we’ve built a custom editorial experience, that is powerful and easy to use. All changes are visible instantly thanks to live preview.

Optimizing ‘try before you buy’ user journey

For Liftfoils the online dealer locator is as important as the product configurator. Most customers decide on a demo ride first, then make a purchase.

Relying on out-of-the-box locator apps usually comes with limitations — in functionality, performance, and interface design. Taking the importance of this feature into consideration, we decided to build it completely custom, leveraging Mapbox as an underlying map engine.

What we think makes a good store locator:

  • Supporting any kind of query (eg. country, street, point of interest) with autocomplete.
  • ‘Fly to’ animation as you search.
  • Adjust map zoom based on the number of locations in a specific area — always try to show at least one result.
  • High performance — get results instantly with a loading time close to zero.
  • Designed in a mobile-first way, should feel like a mobile app.

Exceptional customer experience starts with performance

Site performance matters. According to a Google report:

  • When load times increase from 1 to 3 seconds, the chance that the user will bounce off the site increase by 32%.
  • From 3 to 10 seconds, it increases by 123%.

At Commerce-UI, we know that performance is the key to providing a remarkable user experience. We developed Liftfoils’ entire site considering both measurable and user-perceived performance.

An in-depth list of optimizations:

  • Static site generation —  fast initial page loads worldwide.
  • Prefetching pages —  instant page-to-page navigation.
  • No layout shifts — improves perceived site performance.
  • Advanced lazy loading of images and videos —  load a minimal amount of assets only when you need it.
  • Custom strategies for loading third-party scripts — reduce the impact of apps running in the background (eg. Klavyio).

The site passes Google Core Web Vitals both on mobile and desktop. This metric is extremely important since (1) it assesses the real-world experience of the site, and (2) has a direct impact on SEO rating.

An ongoing partnership

We are truly proud that Liftofils entrusted us with the ongoing care and development of their site. As Liftfoils’ technology partner, we continue to work closely with their team to improve existing features and explore even more ways of enhancing the user experience.

If you’re interested to learn more about this specific case or want to know how we can help you tackle your own challenges, please reach out to us.

Ecommerce Platform

Shopify Plus logo

The global commerce platform with the best-converting checkout.

Headless CMS

The Composable Content Cloud. Sanity helps building flexible and remarkable CMS experiences at scale.

Front-end Framework

Powerful framework that extends React for web stores production.

Deployment

Fast and reliable platform that delivers applications across the planet.

Media

Sayduck

3D and Augumented Reality for Ecommerce.

Media

Mux logo

Best in class video processing.

Other

Mapbox logo

Maps and locations service used by the biggest brands.

Other

Klaviyo logo

Ecommerce marketing automation platform perfectly integrated with Shopify.

Ecommerce Platform

Stamped

Reviews and Loyalty for growing brands.

Let’s talk
Do you feel like we could help with your ecommerce challenges? Contact us at:
hello@commerce-ui.com
Copied to clipboard

Hiring Front-End Engineers

Join us

© 2024 Commerce-UI

linkedin
instagram
twitter