Recognizing the enormous potential of PWA technology in eCommerce early on allowed Scandiweb’s team to start designing and constructing a PWA solution for Magento right away. Finally, they successfully developed the ScandiPWA theme.
It allows anyone to add all of the PWA’s capabilities to an existing Magento store, including fast browsing, offline mode, pushing notifications, home screen app saving, etc.
Let’s take a look at the ScandiPWA theme demo here. Then, we will discuss its features in the following parts of this blog.
Content
About Scandiweb Company
To begin with, ScandiPWA is a product introduced by Scandiweb firm.
Founded in 2003, Scandiweb is a digital strategy and web development firm specializing in the Magento platform based in Latvia.
However, they have many offices in the United States, the United Kingdom, Sweden, Norway, France, and Canada.
The company provides eCommerce solutions to businesses worldwide and serves as a strategic IT development partner with an emphasis on the web, mobile, and big data analytics.
Over 18 years, they have worked with a variety of e-businesses globally.
ScandiPWA Theme For Magento 2
In 2018, Scandiweb released ScandiPWA – the first open-source progressive web app theme for Magento websites (accessible for free on GitHub).
It is free and useful for both developers and merchants.
ScandiPWA has tight integration with the Magento 2 backend. Thus, it is able to deliver and support Magento 2 Docker configuration (allowing for easy scalability in production and quick setup on local) with the ScandiPWA theme core.
1. Technology
ScandiPWA utilizes several technologies such as React, GraphQL, Varnish, or Redis to improve the Magento store’s performance and user experience.
Actually, we slightly favor the themes with the official PWA Studio base since they will be frequently and timely updated with the latest Magento versions. ScandiPWA, unfortunately, is not among those.
React.JS
ScandiPWA is quite similar to a regular Magento theme as it is installable without the need for additional software on any Magento instance.
The only difference is that instead of using Magento’s layout system with templates, it uses React components to render the user interface. They have the same structure to ensure consistency.
GraphQL
ScandiPWA has the advantage of using GraphQL as a single data exchange interface. The theme enhances and optimizes it, making development, testing, and maintenance easier than alternative PWA solutions.
It uses GraphQL to get the data it requires from Magento. Thus, if you need to create unique backend functionalities for your site or adapt existing code to ScandiPWA, ensure it can be accessed via GraphQL.
Varnish
ScandiPWA uses Varnish – an HTTP accelerator, to cache static material to improve the website’s speed.
Redis
Redis is a database server that caches frequently requested queries. With this technology, ScandiPWA allows visitors not to access the main database server every time they send a request.
2. Design
Desktop
The ScandiPWA theme’s homepage appears to be typical with all of the most basic elements of an eCommerce store. A header with the handy search bar, a banner, a category banner list, a bestseller product list, and a footer all are available.
When we hover over the product image on the category page, it will show a nice box with the add to cart, add to wishlist, and add to compare button. That is a plus point for this theme.
Mobile
ScandiPWA is device-agnostic, which means your Magento 2 website will look and function the same on any device when using this theme.
Generally, this theme’s design is neat and clean on both desktops and mobiles. Due to its ability to display a wide range of products, ScandiPWA is best suited for technical gadgets stores. However, it might lack creativity and uniqueness when being applied to fashion sites.
3. Functionality
Basic
ScandiPWA supports 95% of Magento’s functionalities.
The theme takes you through every step of the buying process, from finding the right product to paying for it. Promotions, numerous languages and currencies, custom prices, 301 redirects, many product kinds, SEO enhancements, various search engines, and so on are all supported.
ScandiPWA is also compatible with common shipping methods such as FedEx and UPS. A wide range of payment methods is also supported. PayPal, Stripe, Braintree, Klarna, and other payment processors are available.
Overall, this theme delivers enough PWA’s standard features (fast loading time, add to home screen, push notifications, offline mode) to deliver an app-like experience while maintaining Magento’s functions.
Advanced
- Extensions
ScandiPWA allows you to construct “plug-and-play” extensions for your site, which are typically packaged as follows.
ScandiPWA extension: An NPM (Node Package Manager) package containing your feature’s presentation layer (front-end).
Magento 2 module: Typically, a composer package (or ZIP archive) containing Magento 2 back-end capability extensions. GraphQL endpoints and Magento 2 admin adjustments are two of the most typical services they offer.
You can visit the ScandiPWA marketplace to download the ones that you need. There are numerous choices to pick from, such as Magento 2 Commerce Page Builder or Magento 2 Commerce Gift Cards.
The price ranges from 0 to up to $500 for an extension.
- Override Mechanism
The concept of “overriding” files is introduced in ScandiPWA. While regular methods of Magento theme extension will not work, ScandiPWA provides a better solution: the Override Mechanism.
Overriding files are used to create a customized theme based on ScandiPWA. They accommodate store owners and developers who want a ScandiPWA-based theme but need to alter it for their own needs.
You can modify any component of the ScandiPWA theme using the override mechanism, including styling, user interaction, page structure, and custom functionality. Any element of the code that you don’t need to alter will revert to the default.
With this, you are able to maintain whatever basic functionality while customizing particular components to meet your requirements.
4. Costs
Theme
As mention previously, ScandiPWA is an open-source theme, so you can get a free copy to start building your own storefront.
Installation
Because the theme is totally free of charge, you can download and set it up by yourself at any time. However, hiring a professional development team from Scandi or other companies is necessary if you do not have technological skills.
The theme installation service costs differently among providers, starting from hundreds to thousands of dollars.
Customization
Most of the stores will need customization to make the theme totally meet their needs.
Since Scandiweb is a well-known company with many large-scale projects, the price they ask for the customization service might be significant.
Therefore, if you plan to use Scandi’s Magento PWA theme, let’s prepare your budget – for the theme installation, configuration, and customization.
5. Updates & Support
Scandi has an active ScandiPWA Slack Workspace where everyone can join. Currently, the community has more than 800 people.
You can come to seek help (scandipwa-help channel), discuss technology (pwa_tech), or keep up with developments and announcements (insights).
The ScandiPWA core team and other people in the community might respond to your questions.
Nonetheless, if you ask for dedicated and instant support from the firm, an extra fee will be required.
Documentation
Currently, Scandi is offering various types of extensive documentation, including tutorial videos and written guides.
The guides are divided into four sections: ScandiPWA, Create Magento App, Create ScandiPWA App, and User Manual.
6. Others
Scandi offers ReadyMage – a kind of managed hosting with its theme already set up. It allows any merchant to set up a PWA store on the Cloud with some simple steps.
As the firm advertised, this solution will help merchants “market in a matter of minutes”. However, we think that it’s quite unrealistic since most Magento stores will need to customize the PWA theme design more or less (and it takes time) before releasing their PWAs.
For deploying your project on the ReadyMage, you will have to pay different costs (e.g., service base cost covering default configuration, metered costs for autoscaled and additional instance consumed resources, additional services connected to instances, user Sessions generated handled during the month). So, it will be at least $230/month.
Outstanding Projects
Puma Mexico
Creating a PWA site for Puma Mexico – one of the world’s leading sportswear brands is Scandi’s biggest project.
Puma’s backend team cooperated with Scandi’s frontend team to design a PWA that fulfills their business goals, is extendable, easy to maintain, and lightning-fast.
The result is, Puma Mexico’s site became the quickest of all Puma international websites after deploying ScandiPWA with ReadyMage hosting.
Technodom
This is the largest mid-Asian retailer whose website migrated to ScandiPWA to enjoy the best features of Progressive Web App.
Technodom’s site was built with PWA, ESB, PIM, and Magento on a complicated infrastructure to provide a high-load and intrusion-resistant platform.
Sportland
It is a well-established sportswear retailer with over 40 locations in the Baltics, working with the world’s best sports brands.
ScandiPWA’s features, product information management, order flow, payment and checkout, and internal document workflow have all seen performance improvements to accommodate a wide range of use cases.
In Brief
ScandiPWA allows anyone to integrate all PWA’s features into an existing Magento store without a long development time. With smart architectures, the theme can maximize front-end user-side capability to be quick and responsive and user-friendly, and engaging.
Taking into account all of its benefits, ScandiPWA could be a suitable choice for many Magento businesses. However, the theme’s related services might be over the budget of small-to-medium firms. Moreover, this PWA solution was not built on the Magento PWA Studio, so possible conflicts might happen when Magento updates in the future.