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 eCommerce performance is challenging. Supporting multiple formats, such as background video, YouTube, a 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.

What 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 wonder 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 content management system (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 because there are challenges around user experience as well as platform limitations.

Shopify is among the most prominent eCommerce 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, with 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 to suit 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 built a custom editorial experience that is powerful and easy to use. All changes are visible instantly thanks to live preview.

Optimizing the “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 by leveraging Mapbox as an underlying map engine.

What we think makes a good store locator:

• Supporting any kind of query, such as 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 and always try to show at least one result.
• High performance to get results instantly with a loading time close to zero.
• Designed in a mobile-first way that makes it 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 increases 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, such as Klavyio, running in the background.

The site passes Google Core Web Vitals both on mobile and desktop. This metric is extremely important since it assesses the real-world experience of the site and 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 in learning more about this specific case or want to know how we can help you tackle your challenges, please reach out to us.