Progressive Web App
PWA is the next generation of any eCommerce platform frontend
Ultrafast, offline-ready and platform-agnostic Progressive Web App.
PWA for Special's Fashion Store
Meet Special – the Italian fashion retailer. They wanted to enchant their customers with a unique user experience while shopping online.
Special is a retail store located in Milan, northern Italy. The store specializes in streetwear shoes and accessories of the best international brands. To their customers, they offer exclusive products, often impossible to find in any other shop in Italy. Since 2010, they have offered their products to online customers via the Magento 1 platform. Now, they have decided to move to Magento 2 and the Vue storefront.
Selling in a progressive web app
Progressive web apps are quite new on the market, but they have already proved their advantages. Online shops built as PWAs are much faster, safe on the front end, and work offline.
These benefits encouraged Special to invest in progressive web apps. Additionally, it turned out this solution is cheaper than building separate native apps.
Solutions selection for Special’s store
Special has only a simple and size configurable product catalog. It consists of 10,308 items in total. The goal was to restyle and to replatform the online store in 3 months.
The perfect match: Magento 2 & Vue Storefront
The idea was to go live with a minimum set of functionalities, and then improve. They built the store upon the Magento 2 platform on the backend, and connected it to a customizable front-end for progressive web apps – Vue Storefront.
Vue Storefront implementation
The store’s checkout and the CMS blocks were left on Magento 2. There is just a small component that takes, via a GET call, the HTML of the blocks from the Magento platform and puts them in Vue Storefront.
During the development of Vue Storefront, a fork was implemented. It is used to stay up-to-date with the new developments from the community. Every week Special’s store is synchronized with the official repo, so as to always have the latest version available. After check out, a tag is added, and a new version is released.
Check it out live at the Special.
Meet La Nature – a Jewellery eCommerce with 0.1s Loading Time on Mobile
La Nature offers magnificent jewellery, but the most precious thing lies in their eCommerce. The online store is extremely fast thanks to the Vue Storefront architecture. And when the Internet is switched off, customers can use it as a native app on their mobiles.
Standard of speed for mobile eCommerce
When you visit the La Nature online store, the first thing you may notice is the marvelous design. Vivid colors, splendid ring and bracelet images combined with product filtering tools makes the user experience truly unique.
There are over 16,800 product images. In mCommerce it is challenging. A high number of images is directly correlated to poor loading times, and slow pages are the number one issue that enrages mobile users most. Google set the gold standard on the time when users no longer notice performance lags and can directly focus on experiencing the content. The reasonable standard in mobile UX is 4 seconds or less.
In La Nature loading time is not a problem. With the use of progressive web apps, their final speed for catalog loading – is 0.1 second.
Reaching the short loading time
La Nature needed both B2B and B2C eCommerce. The base is Magento 2.2 with a set of integrations with 1C USP, CRM Bitrix-24, a loyalty system and wholesale functions for franchisees. Independently from Magento, the La Nature chose Vue Storefront as a front end PWA solution.
Separating backend and frontend allows for short loading and rendering times. Switching catalog pages time was decreased up to 0.1 second and catalog first loading time (providing the visible part of the catalog with images) up to 1.5 second.
Magento 2.2 provides business logic and serves as a repository of entities (prices, stocks, images and almost all catalog-related details). It is noteworthy that to receive all data, node.js / Vue systems associated with data view, instead of using traditional MySQL. This additionally speeds up the interaction with data.
Vue Storefront is extremely elastic and easy to extend. Like adding CMS integration and custom category page features (like switching the product variants from the product list, geo-localization, additional entity types).
PWA instead of a native apps
Progressive web apps will soon replace mobile native apps. By leveraging the Service Workers and PWA manifest, users are able to install the progressive web app on their home screens straight from the browser. This is convenient as they can skip the app store.
Combine that with high loading speed and users will benefit from an enjoyable experience. Check it out live at the La Nature store.
The La Nature store works twice as fast thanks to separating the Magento backend and the Vue Storefront frontend. At the same time, eCommerce managers and developers can provide fast project support and modify any page without disturbing the backend logic systems.
Unique Online Pop-up Store with PWA for NOMOS Watches
The Hour Glass wanted to enchant their customers with the unique shopping experience. On the occasion of the global launch of the NOMOS Glashütte collection, they launched exquisite online pop-up store leveraging Vue Storefront framework.
The NOMOS Glashütte “Red Dot” Capsule Collection 2018 is a series of thoughtfully designer and exceptionally decorated watches. The Hour Glass, the global retailer of the luxury watches, present the full collection in the designated online pop-up store on the 27th September 2018.
The online pop-up store is essentially a full-fledged point-of-sale platform, the site showcases the heritage and design inspiration of NOMOS watches. Combined with hi-res imagery and intuitive design, the pop-up store is intended to mirror the level of consideration and customer-centricity of The Hour Glass offline boutiques.
Customer-centric PWA frontend framework
Having customers on 5 continents, The Hour Glass is well-attuned to online shopping experiences. The choice of a customer-centric PWA frontend framework was essential to provide:
most engaging interactions from button clicks to enter a new page,
convenience of viewing the site, placing orders and entering credit card details without being susceptible to intermittent in 4G connections,
best-in-class loading speed.
Vue Storefront framework stood out as a clear choice given its integration with Magento 2 Commerce.
Vue Storefront PWA customization
The Hour Glass conducted the whole implementation in-house. Vue Storefront is relatively elastic and the developer’s team used it to create custom-built features integrated with the online pop-up store. Customization included the following areas:
Frontend in particular – brand story page, product details page, magnifiable gallery, single page checkout, FAQ page, and implemented mobile responsive web design.
An extension to display images based on product attributes.
Stripe integration to securely transmit orders and credit card details, and to trigger the anti-fraud 3DS feature.
Secure extension to push orders from VS into Magento 2, ensuring orders are captured in M2.
A new feature for price display, based on a central pricing table.
An extension to ensure orders are properly captured and mapped to the SCO page, which in turn triggers the Stripe payment process.
Middle layer to integrate with a global logistics provider allowing the airway bill to be generated without manual input.
Integration with Gtag, FB Pixel, InterCom.
All the customizations mentioned above were completed within a 3-week sprint.
Visit the store at nomosreddot.thehourglass.com