Lift Foils

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.

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.

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.