Complete Guide to Magento (Adobe Commerce)

Most know and recognize the platform as Magento—a market-leading player in eCommerce for quite some time. Although still powered by Magento, Adobe acquired the company in 2018, becoming its parent company. As of April 2021, merging Magento Commerce and Adobe Commerce Cloud, the enterprise edition of the platform is known as Adobe Commerce. We’ll interchangeably refer to it as Magento and Adobe Commerce throughout the following overview.

Adobe Commerce is a highly advanced eCommerce development platform with rich and customizable out-of-the-box features and integrations, helping B2C and B2B businesses of all sizes build and manage their online stores, expand their growth, and deliver seamless customer buying experiences, enabling successful online sales.

This article will provide a comprehensive overview of what Adobe Commerce (Magento) is and how it works; helpful whether you’re a business owner considering using Adobe Commerce for your online store or a merchant already managing a store built on the platform. Learn about its features with an insight into Adobe’s free product, Magento Open Source, Adobe Commerce pros and cons, and how it compares to other eCommerce platforms on the market.

Why do merchants use Magento?

Each year Adobe Commerce continues to be a popular choice among online merchants to build, launch, and manage their online stores. In October 2022, more than 250,000 active eCommerce sites worldwide were powered by Magento/Adobe Commerce.

There are multiple reasons eCommerce businesses go with this platform over others on the market, and companies considering it are on the right track.

Adobe Commerce offers flexibility and customization, allowing merchants to tailor the platform to their specific needs. This includes the ability to create custom themes and templates, as well as to extend the platform’s functionality through the use of extensions and integrations.

The many out-of-the-box features, including inventory and order management, integrated checkout, payment and shipping solutions, CMS page builders, product recommendations, analytics, marketing tools, and more, help merchants deliver optimal shopping experiences.

Adobe Commerce is also designed to scale with the business regardless of the industry and can handle high traffic levels and large product catalogs.

Who should use Magento?

Magento (Adobe Commerce) is so versatile and customizable that eCommerce companies of different sizes, from small retailers to medium and large enterprises, find its features and functionalities ideal for running their online business.

Magento Open Source is free, fully customizable, and has a plethora of extensions available on the Magento (Adobe Commerce) Marketplace. Smaller companies and those who are just entering the eCommerce field find it a great advantage that the platform is free, allowing them to start developing their store with no upfront platform costs. If they need to add more features and functionalities, they can easily do so by using extensions from the marketplace, many of which are also free. And because Magento Open Source can easily be expanded with new features, medium-sized companies also consider it an ideal platform for their needs.

Adobe Commerce is the enterprise edition of Magento Open Source—a fully featured, subscription-based eCommerce solution from Adobe. It comes with advanced features out of the box, but it is also fully customizable and easily integrates with third-party extensions. Large businesses that require those advanced capabilities, value 24/7 customer support, and want the option for cloud infrastructure opt for Adobe Commerce. The platform is robust, scalable, secure, and allows eCommerce companies to manage multiple brands, currencies, and geographies from a single platform. Adobe Commerce supports both B2C and B2B business models.

Who should use Magento (Adobe Commerce)? Small, medium, and large eCommerce enterprises will all find Magento (Adobe Commerce) a suitable platform for their online stores.

But this is just an overview of who should use Magento (Adobe Commerce). Let’s dig in deeper into the differences between Magento Open Source and Adobe Commerce and the advantages of each.

Magento Open Source

Magento Open Source is a self-hosted platform that comes with all the basic eCommerce features needed to launch an online store. Because the platform is open-source and widely used in the eCommerce world, it has a very active and dynamic community that helps develop it. Developers from around the world work together to introduce new features, fix bugs, and optimize it.

Merchants who opt for Magento Open Source need to set up their own server and hosting. They can use the default Magento theme, customize it, or purchase a third-party theme from the Magento (Adobe Commerce) Marketplace. They can add new features by installing either free or paid extensions from the marketplace. So while the platform itself is free, using it entails costs related to customizations, extensions, hosting, and the like.

When it comes to maintenance, companies should either have a development team of their own or get a third-party Magento development agency to keep everything in order. The Magento platform regularly gets updated and merchants need to keep up if they want their stores always performing at their best.

We discuss in more detail the features and advantages of Magento Open Source in Adobe Commerce vs Magento Open Source.

Adobe Commerce

Adobe Commerce is an enterprise-level eCommerce solution that has more advanced ready-to-use features in addition to all those available to Magento Open Source.

Adobe Commerce on cloud infrastructure is a fully managed platform with automated hosting and additional exclusive features. eCommerce companies choose it mainly because of lower maintenance costs, improved scalability, and enhanced security, among other benefits. Adobe Commerce on cloud infrastructure is offered as a platform-as-a-service (PaaS) hosted on AWS. Nevertheless, merchants can choose to set up their own server environment, which Adobe refers to as an on-premise installation of the Magento (Adobe Commerce) software.

Adobe Experience Cloud is a collection of applications and services, which Adobe Commerce is a part of, designed to help businesses deliver personalized customer experiences and make informed business decisions based on data. Other solutions from the Adobe Experience Cloud can easily integrate with Adobe Commerce. And through the platform, marchants can take advantage of the business intelligence services offered by Adobe, along with the personalization and other capabilities powered by Adobe Sensei.

Adobe Sensei is what brings the power of artificial intelligence (AI) and machine learning (ML) to the services included in Adobe Experience Cloud.

Learn more about Adobe commerce from Adobe Commerce vs Magento Open Source.

Now, let’s talk about the most important features of Magento (Adobe Commerce) that you should know about.

• Ease of use
• Support and extensions
• Themes and templates
• Marketing and SEO tools (coming soon)
• Customer Support (coming soon)
• Security (coming soon)
• Inventory management (coming soon)

Ease of use

For an eCommerce company with a developer working on its team, installing Magento (Adobe Commerce) is fairly straightforward.

For Magento Open Source and Adobe Commerce, any hosting service can be used as long as the server meets the Adobe system requirements. For Adobe Commerce on cloud infrastructure, Adobe provides an automated hosting platform with an infrastructure that already has the prerequisite software installed, including PHP, MySQL, RabbitMQ, and Redis, among others.

Developers can then proceed to set up the store, using a default Magento theme, a customized one, a third-party theme from the marketplace, or one that is created from scratch.

Because Magento is so widely used by merchants around the world, there is no lack of resources available online on how to use it. For example, scandiweb has published a series of articles detailing the steps developers need to follow in order to accomplish specific Magento tasks or explaining how certain Magento configurations work. Here are two interesting articles from the series—Magento Series: Creating CMS Content Programmatically and Magento Series: Working with Store Configs.

The Magento community is very active and developers from all over collaborate and share information on tackling everything from the most common to the most challenging issues they face. Adobe also provides many resources that developers can refer to when working with Magento.

All these resources available on Magento makes it easy for even new Magento developers to work with the platform and resolve the most common issues. Add to that that developers generally find the Magento interface easy to understand and use.

In terms of actually using the platform to manage content and products on an eCommerce platform, Magento has many integrated features that make things easy for users. For example, Page Builder lets users create content with drag-and-drop tools. No coding required. There are inventory and order management tools that allow for real-time product inventory visibility. Business intelligence tools make monitoring business performance a cinch. Adobe Target gives marketers the ability to personalize and experiment with content and user experiences.

Support and extensions

We’ve already mentioned that Magento has an active community of users and developers that share their knowledge and experience in using the platform. Developers who find themselves stumped by issues that crop up during their work with Magento can always turn to that community for support and guidance. Adobe offers support for Adobe Commerce users (see Customer Support for more details).

Third-party extensions and plugins can be used for a variety of purposes, like adding new functionality, improving store performance, enhancing customer experience, and increasing page speed.

Extensions and plugins also make way for more advanced Magento functionality and integrations with other systems and services. Magento easily integrates with ERP, CRM, PIM, and accounting software, for example.

The Magento (Adobe Commerce) Marketplace is the go-to place for developers looking for extensions for their Magento projects. Both free and paid extensions can be found there, covering all the bases in any Magento project—from content and localization to accounting and finance, marketing, SEO, customer services, shipping and fulfillment, etc.

Themes and templates

A design theme is what gives a Magento store its unique look and feel. It uses a combination of styles, layouts, images, and templates. Frontend developers are the ones in charge of implementing the theme in a Magento store development project.

Magento comes with a Blank theme (to be used as basis for custom theme creation) and the Luma theme as its default theme. But developers need not be restricted by what Magento provides out of the box. There are a good deal of themes available on the Magento (Adobe Commerce) Marketplace, some are free and others are paid. So, merchants using Magento as their eCommerce platform can have a theme created from scratch, use the default theme, or download/purchase a theme from the marketplace.

Templates determine how content blocks appear on a page. For example, where a side bar is displayed (left or right) and how the hero banner is positioned are all defined in the page template.

With Magento, both themes and templates can be customized. Creating a theme from scratch or customizing an existing theme requires some experience with PHP, CSS, JavaScript, and other such programming languages. Templates can be PHTML or HTML files.

When customizing themes and templates, developers are strongly advised not to change the default files. If edits are made on the default Magento themes/templates, there is a good chance that the changes will be overwritten by the new version of the default files later, i.e., during an update. The best practice is to create a new theme and then add the modified templates there.

Luma Theme

The Luma theme is the default theme of Magento 2. It was first released in 2015 and has been updated since to adopt all the major features and functionality of the latest version of the platform. The Luma theme is free to use, without any restrictions when used for a live store. It is tile-based, has a responsive design that renders well on a variety of devices, and with endless customization possibilities.

The category pages in the Luma theme have list- and grid-based view options, star ratings, and CTAs that appear on mouse hover, among other features. The product pages are presented with a clean design, featuring large and high-quality product images. The cart and checkout pages are easy to navigate.

The default Magento 2 Luma theme can be a great choice for eCommerce merchants who are just starting out or want to minimize costs on web development.

Hyvä Theme

Hyvä is claimed to be the frontend theme for Magento by its creators—the entire frontend rebuilt from the ground up and simplified. But not only that, “it is also a toolset, extension ecosystem, and supporting community.”

Compared to the standard Magento theme that loads over 200 JS/CSS resources, Hyvä loads only 2 JS/CSS resources, which translates to less complexity while working with it and faster page load time. Out of the box, the theme scores 100/100 in Google PageSpeed Insights—passing the Core Web Vitals assessment on all metrics. It is also fully responsive and displays well on different devices.

Hyvä offers flexibility, customizability, ease of maintenance, community support, and great performance. The theme is based on the PHP framework of Magento, with a simple-to-use interface that is developer-friendly. It simplifies frontend development and reduces time-to-market.

A license must be purchased to use Hyvä themes—unlimited updates and access to third-party compatibility modules are included, among other benefits of the license.

ScandiPWA Theme

ScandiPWA is the first open-source Magento PWA theme. It is a Magento-first solution installed on top of any Magento project (version 2.3 and later) and requires no middleware or infrastructure changes. The theme supports conventional extensions from the Magento (Adobe Commerce) Marketplace, A/B testing, and over 350 Magento features.

The ScandiPWA theme is ready-to-use, fully customizable, and the fastest way to set up a Magento store as PWA. In just 15 minutes, development and production environments can be made available on readymage.com.

The cost of using Magento (Adobe Commerce) will depend on the organization, its size, needs, resources, and priorities.

In this section, we’ll talk about the costs related to building and maintaining these Magento platforms:

• Magento Open Source
• Adobe Commerce
  • Adobe Commerce On-premise Software
  • Adobe Commerce on Cloud
  • Adobe Commerce on Managed Services

And the costs we’ll be looking include the following segments:

• Infrastructure costs: hosting, web/app servers, databases, domain name, SSL certificate, etc.
• Development costs: design, customizations, programming, extensions, integrations, etc.
• Support & maintenance costs: technical staff, training, troubleshooting, updates, patches, bug fixes, paid support, etc.

Magento Open Source pricing and costs

Licensing: Free Infrastructure: Additional cost Basic functionalities: Included Advanced functionalities: Additional cost

The Magento Open Source software is free to install and use. However, getting it set up and running entails costs related to all three segments: infrastructure, development, and support & maintenance.

A merchant opting for Magento Open Source needs to pay for hosting, domain, SSL certificate, design, customizations, integrations, support, and maintenance.

Hosting costs

Hosting options for Magento Open Source include in-house, from a hosting provider, or on the cloud.

• In-house hosting is risky and costly, but some industries make it necessary (e.g., cannabis).
• Shared, VPS, and dedicated hosting are all viable options depending on the business size and needs, and could cost from $150 (shared hosting) to $5,000 (multiple dedicated servers) per month.
• Cloud hosting can be as little as $10 and as much as $4,000 a month.

Development costs

Magento Open Source comes with all the basic eCommerce features an online store needs. However, extensions, integrations, and further development are usually necessary to make it perform exactly as the business needs it to.

With extensions and third-party services, the possibilities of expanding the platform’s capabilities are almost endless. The catch is that the best and most reliable extensions are often subscription-based, so there are ongoing costs associated with them. Magento extensions can costs anywhere from $50 to $500.

And of course, developers are needed to make these extensions and integrations work. Depending on the amount and complexity of work that’s required, a company might need to hire a team of developers to get everything set up. An alternative is to get a Magento development agency whose expertise is building Magento eCommerce stores. Either way, development work costs money.

Support & maintenance costs

Finally, support & maintenance costs will depend on whether or not the business has its own development team to take care of bugs, patches, updates, and further development. At least one developer familiar with the ins and outs of Magento needs to be looking after the eCommerce store. Alternatively, there are agencies that offer 24/7 Magento support that merchants can turn to. And getting a support agency may be more cost-effective when the SLTs and expertise are considered—there is a whole team of Magento experts that could work together to solve an issue in the quickest time possible.

Adobe Commerce pricing and costs

Licensing: Starts at $22,000/year Infrastructure: Additional cost or included Basic functionalities: Included Advanced functionalities: Included

An Adobe Commerce license is based on the subscribing company’s Gross Merchandise Value (GMV) and Average Order Value (AOV). And prices vary depending on the type of Adobe Commerce offering subscribed to:

• Adobe Commerce On-premise Software
• Adobe Commerce on Cloud
• Adobe Commerce on Managed Services

Adobe Commerce is licensed per Base Package and licensing starts at $22,000 per year for a company with up to $1M GMV for Adobe Commerce On-Premise Software, and $40,000 for Adobe Commerce on Cloud.

Search Engine Optimization has always been a widely misinterpreted topic. The trend gains additional momentum when it comes to Progressive Web Apps. PWAs are different from “traditional” HTML-based websites, and it has caused a lot of myths and misconceptions over time.

How good is PWA for SEO?

The most popular myth states that “Google prioritizes PWA pages in their search results.”

Unfortunately, this is false. Google doesn’t rank your page higher simply because you have a PWA, but Google does care about the enhanced user experience brought by PWA. The bottom line is, simply having a PWA won‘t help your SEO, but having a well executed PWA most likely will.

Another myth states that PWAs can’t be indexed by the search engines at all.

This is not true, obviously. Progressive Web Apps can be indexed just like any other web page, although the techniques used to ensure that the search engines see and understand your website’s content will be different.

SO, WHY EXACTLY IS SEO A CHALLENGE?

PWAs are JavaScript-based sites, and their rendering mechanics differ from those of standard HTML-based websites. To understand the difference between the two approaches, you need to understand server-side and client-side rendering:

Traditionally, the majority of websites use Server-Side Rendering or SSR to “pre-boot” everything on the server-side. The way it works is pretty straight-forward: a user requests a page, then a rendered version is sent from server to their browser. Easy!

This, however, has some drawbacks. Even though the first meaningful paint loads very fast, this approach will require you to load the entire HTML every time a user switches pages. This can be a pain, especially when operating on a poor internet connection.

Progressive Web Apps and other Javascript-based pages use an alternative method called Client-Side Rendering or CSR. With this approach, content is rendered in the client’s browser, using JavaScript.

Instead of sending an entire HTML document every time a user wants to go to a new page, only a tiny string of data is passed, containing JavaScript that requests and renders the necessary parts of the page in client’s browser, resulting in a significant page load speed increase.

Seems like a good idea, right? Still, many site owners are cautious about switching to CSR, trying to make sure that their content is properly exposed to Googlebot and search engine crawlers.

Comparing a “traditional” website against a JavaScript-based PWA, we see that, while the former clearly renders all the website’s content, the latter must rely on search engine’s ability to process JavaScript and get all the data you want search engines to index. This has caused a lot of confusion, making people think that PWAs cannot be indexed at all.

The reality, however, is that CSR apps can be – and are – crawled and indexed by search engines, and Googlebot is currently the best among them at processing a Client-Side rendered JavaScript.

Is there a solid working solution?

The short answer is Yes. In fact, several of them. So, you can definitely go with PWA for SEO-focused projects.

An approach we’d like to discuss hereby is called DYNAMIC RENDERING. In a nutshell, it requires your webserver to understand the source of a request – whether it is a visitor, or a search engine crawler and serve different versions of content to different sources.

This allows you to provide a Client-Side Rendered version for your real visitors, and conditionally serve the server-side rendered version to search engine crawlers.

Dynamic rendering is a technique approved by GOOGLE, and should not be confused with s.c. “cloaking”, a common black-hat SEO technique to serve different content to search engines vs. users.

PRIORITIZE YOUR CONTENT & COMBINE SSR WITH CSR

Another neat way to solve this is to prioritize content by identifying the most important elements of your page that you definitely want to pass to search engines as soon as possible, and serve this content using Server-Side Rendering.

By doing this you can be confident that search engines will pick up the crucial information (like canonicals, titles, etc.) immediately after discovering your page, and the rest of the information will be processed via Client-Side Rendering during the second wave and eventually added to the index.

TIP: SEO BEST PRACTICES REMAIN UNCHANGED

Since PWA isn’t a ranking factor, all technical, on-site, and off-site SEO best practices apply to PWAs as well. Here are some of the usual SEO aspects you need to take into account if you’re migrating your site to a PWA:

1. Implement self-referring canonicals for unique pages and canonicalize duplicates or set meta robots to “noindex, nofollow.” (This is especially important if you’re combining PWA and AMP.)
2. Each page should have a unique URL.
3. Make sure crawlers can access valuable content hidden in tabs, infinite scroll, etc. If you want crawlers to explore content behind buttons, images, etc., use an HTML link.
4. Use Schema.org markup to help crawlers understand the content of the page and Open Graph markup so that URLs share nicely over social media.
5. Don’t show different content to users than you show to Google (save for the caveat above).
6. Make sure your page passes the Google Mobile-Friendly Test.
7. Audit pages for speed on Google PageSpeed Insights.

Why PWA is the future

The biggest and the best are using PWAs already

You may have heard that Amazon is using a PWA. And Alibaba. And Uber. However, what was once a technology leveraged mostly by digital giants, due to high costs of development and inescapability of custom solutions, is becoming increasingly democratized and accessible. Thanks to emerging ready-to-use PWA solutions and the widespread appreciation for PWA, the technology is now available to everyone.

PWA has already proved to be a game-changer, with businesses around the globe flocking to adopt it and reap the benefits it offers. In this light, it is important to understand what this new technology can bring for you.

MOBILE-FIRST ERA IS HERE

The amount of traffic from mobile devices has been increasing year-by-year. It is safe to say that we got past the tipping point already a couple years ago with 2018 desktop-mobile traffic distribution showing that 52% of overall web traffic came from mobile devices during that period.

The trend continues to demonstrate steady growth in both usage volume, as well as rate of technological progress, changing the way people interact with the web. Among the best PWA examples are in mobile eCommerce, which has been booming over the past few years.

GOOGLE ANNOUNCES MOBILE-FIRST INDEXING AS DEFAULT

At the end of 2018, Google announced that it was already using mobile-first indexing for over half of the pages globally. Eventually, Google announced that mobile-first indexing will now be the default option for all new web domains as of July 1, 2019.

Google has made it clear that there is only one index for serving all search results, as opposed to separate “main” and “mobile-first” search indices. This means that you need to make sure your website is performing great, primarily, on mobile devices.

Even if you have a fully optimized website from the content and technical SEO perspective, this might not be enough to outperform your competition. By rolling out mobile-first indexing as a default method, Google made it clear that the company will continue to emphasize the importance of providing the best possible experience for mobile device users.

So, if you are looking at how to improve the user experience, especially for mobile device users, this is the right time to consider Progressive Web Apps.

MIGRATION TO MAGENTO 2

An average PWA project development may take up to several months. However, the biggest eCommerce platforms like Magento suggest going with ready-to-use applications, like the e-point PWA Commerce Accelerator. With these, the time spent on the project will drop even up to 1-2 months.

Let’s not forget that as of June 2020, Magento, one of the most popular eCommerce platforms, no longer supports their Magento 1 version. This means that the eCommerce websites still running Magento 1 will no longer receive official support and updates. With this come decreasing functionality, higher maintenance costs, escalating security issues, end of PCI compliance. If you want to continue receiving all the latest Magento updates, make sure the necessary security measures are in place, and are considering a Progressive Web App for your business, now is the right time to significantly save on development resources and migrate to Magento 2 while implementing the PWA technology.

The most cost-efficient way to do so is by leveraging a ready-to-use PWA solution for Magento, that can be installed on top of Magento 2 store within just several developer hours.

With all things said, it is understandable if you’re left with some uncertainty, wondering whether or not you have warmed up to the idea of implementing PWA yet. The multiple benefits offered by the technology present it in a very lucrative light – promising traffic and profit boost, increased levels of engagement and user satisfaction, competitive advantage with a future-proof platform.

“But what about the downsides?” you might be asking yourself, “Am I ready to put up with the logistics of implementation to get to the desired results?”

Let us try and clear these doubts by answering some of the most popular questions asked by people first coming to contact with PWAs.

Despite the countless benefits PWA offers it’s just SUCH a hassle, right? – Wrong.

With ScandiPWA, convenience is principal and unlike other solutions on the market, ScandiPWA is a theme that is installable on top of any Magento project later than V2.3. No infrastructure changes, no middleware, no problems. Getting started is hassle-free.

Ok, but I’m short on manpower, how big should the developer team be? – A team of 1 is enough.

A single developer in a couple of hours can have a functional PWA store up and running and ready for customization. ScandiPWA is installable via composer and doesn’t require any manual installation work with cloning. Thanks to composer, even the updates are automatic, meaning you always have the latest stable version.

Still… it will take a while for that developer to get familiar with ScandiPWA. – Less than you think actually!

ScandiPWA is a Magento-first solution, so the countless benefits come on top of all Magento out-of-the-box features. Following Magento’s example in crucial aspects, e.g. doing rewrites, means your developers will feel right in their element.

Interesting, but can I trust ScandiPWA? – Results and feedback speak for themselves.

It’s open source, it’s celebrated for the technology, it’s spoken very highly of in the Magento community. The core team is constantly updating the theme, with weekly releases. Any technical issues are taken care of on the fly. What’s more there are several eCommerce projects in development, all contributing to the main theme.

Final question, is PWA a mobile app? – You can make it act like one!

PWAs are different from native apps. Native apps are self-contained programs that live on the mobile device. A PWA is still a website that runs through a web browser, but it displays like a mobile app, can work offline, and has app-like features that engage the users.

BE SURE TO PICK THE RIGHT PWA SOLUTION

Today PWA is more affordable than ever before, and is available to any business willing to adopt the technology. The fastest and most cost-efficient way to implement it is by leveraging a ready-to-use PWA solution.

Let’s take a look at some of the most popular ones offered on the market today.

PWA STUDIO

In January 2019, Magento announced the release of the PWA studio. An anticipated announcement, welcomed with great enthusiasm by the community, although it doesn’t strictly offer a ready-to-use solution. Rather, it is a set of tools for building PWA stores.

A few proof-of-concept demo stores have been released to display its functionality, notably, by Magento themselves and another one by Inchoo. These demos made it clear that, while PWA Studio boasts some impressive features, it is also fairly complex in terms of integration and setting up in production, suggesting that additional infrastructure adjustments are required.

SCANDIPWA

ScandiPWA is the first open-source PWA theme for Magento. Unlike other solutions on the market, ScandiPWA is not a storefront, but a theme that is installable on top of any Magento project later than V2.3, without changes to infrastructure. It doesn’t have any middleware that can slow down or cause bugs and it is easy to upgrade and maintain.

As an open-source solution with detailed documentation available, multiple teams contributing to conversion optimization, implementing extensions, performance optimization, and consistent architectural solutions, it can be used to deliver a fully functional PWA store with the help from only one developer, in a matter of a few hours. Moreover, maintaining a website built on ScandiPWA is convenient, as it updates to the latest stable version via composer update and doesn’t require manual updates and checking for the latest stable version.

A Magento-first solution, ScandiPWA allows the use of all Magento out-of-the-box features, already familiar to developers, and adds the multiple crucial benefits provided by PWA technology.

Magento feature support, integration of admin interface, data caching, community support, the simplicity of installation: ScandiPWA is actively developed, with new features being added and improved on a regular basis.

VUE STOREFRONT

A platform-agnostic storefront PWA solution created by Divante was one of the first PWA solutions available on the market.

Vue Storefront offers an open-source storefront solution under the MIT license. At the core of its value proposition is the ability to connect various eCommerce CMS or third party software to the storefront via API.

While such an approach provides a one-size-fits-all solution, mind that an additional middle layer will require extra maintenance resources.

OTHER SOLUTIONS

Apart from the above mentioned, there are several other PWA solutions worth mentioning, such as DEITY Falcon, Front Commerce, Spartacus, Angular Storefront.

While every PWA provider has its own value proposition, different PWA solutions use different architectures, which may be crucial when choosing a solution for your business: we recommend to book a free consultation and learn which solution works best for you.

We’ve gathered some tips from a renowned industry experts to make sure you follow the best practices when designing your Progressive Web App and avoid common mistakes in user experience and appearance.

1. DON’T OVERCOMPLICATE THINGS

As you have learned already, with all the benefits, Progressive Web Apps can be a killer-tool that will bring your mobile user experience to a whole new level, delivering immediate impact. However, by being able to use all these previously unseen features like home-screen install, push-notifications, offline mode, often webmasters tend to get too excited.

As Ryan Warrender, a UX expert from Google, wisely pointed out, Progressive Web Apps features should accentuate the experience, not distract from it.

4. PERCEIVED PERFORMANCE — MAKE WAITING SEAMLESS

Let the users see that they are making progress by preloading skeleton screens and transition animations to make waiting seamless.

To achieve seamlessness, ScandiPWA uses an opacity transition, which takes 0.53s from initiation to video start, creating a smooth and soothing effect. Not only does it look great, it also allows the users to orientate themselves.

5. MAKE YOUR BRAND STAND OUT

The home screen install feature is a powerful tool that could bring a lot of value for your business. Make sure to leverage it, by creating a great icon!

A UX expert Sophia Brooke is suggesting to follow the essential guidelines of native apps to create a distinctive, but simple enough icon to stand out on different backgrounds, and easily accommodate various elements like shades.

6. FONTS — KEEP IT SIMPLE

Try to avoid fancy fonts on subsequent loads and use device default fonts whenever possible. Not only custom increasing the download size of your first page, but custom fonts also can slow down the performance of your app, and create additional visual distractions.

7. THINK OFFLINE

Make sure you are making the most out of the PWA by providing all your key features in the offline mode and implementing the caching option.

8. FOLLOW SEO BEST PRACTICES

Although PWAs can look and perform exactly like native apps, Progressive Web Apps have URLs and can be crawled and indexed by the search engines. Make sure to check the Progressive Web App Checklistand follow the SEO best practices.

9. TEST YOUR APPS WITH LIGHTHOUSE

Google has introduced an open-source performance management tool called Lighthouse that can run as a Chrome extension or as a Node module. You can audit your web app or any web page with Lighthouse and get an extended report of the page. Moreover, you can get a reference doc for each audit item describing why the audit is important and how to fix the failing audits.

It’s possible to run Lighthouse against any web page, to generate reports for performance, accessibility, progressive web apps test, and more. Additionally, you will get a detailed list of all issues with suggestions on how to fix the failing audits.

Since digital titans like Twitter, Forbes, Uber, AliExpress switched to PWA, we see a constantly growing collection of case studies that show the positive effect of Progressive Web Apps on all major KPIs: conversions, revenue, time spent, engagement, re-engagement, leads, etc. We have compiled these PWA case studies for your inspiration:

PUMA MEXICO

• Puma becomes the first sports shoe manufacturer to build their eCom store using ScandiPWA
• After implementing ScandiPWA supported by ReadyMage hosting, Mexico becomes the fastest among all Puma international websites
• ScandiPWA was optimized and enhanced with 3rd party integrations, achieving impressive Lighthouse scores:
• 90+ on Mobile
• 98 on Desktop

SPICE

• Spice is a shopping mall that adopted Hybrid Retail model, and turned its new website into a hub ensuring easy access to all of its stores as a way to adapt to anti-COVID retail restrictions
• 200+ of the mall’s stores have gained a universal digital platform and an extra online sales channel

KARMIA

• Karmia is a Silicon Valley charity startup aiming to build the biggest nonprofit donation service in the US
• A massive database of 2M+ nonprofits was assembled for processing to enable instantaneous donations
• The resulting website is the world’s biggest charity fundraiser on Magento, with a powerful tech-stack and a distinct memorable presence

SPORTLAND

• Well-established sportswear retailer, working with the world’s leading sport brands, and represented by 40+ stores across the Baltics
• Multiple performance enhancements and ScandiPWA feature adjustments, to address a wide range of use cases, including: product information management, order flow, payment and checkout, internal document workflow
• Better connectivity and in-store management with fully custom ERP integration incorporating Python middle layer and Citrix virtual apps

TECHNODOM

• The largest mid-Asian retailer migration to ScandiPWA
• Multi-streamed development with PWA, ESB, PIM and Magento
• Complex infrastructural build to enable high-load and intrusion resistant platform
• ScandiPWA was set up to easily build into the apps for AppStore and Play Stores