Shopware PWA Beta is Here

It's been a while since we gave some sneak peeks about Shopware PWA development in our last update. As we are now about to release the Beta version, it is the right time to fill you in on what we have achieved so far.

The Developer's Preview came to light in the early days of January during Shopware Partner Day. Since then, the project has moved on at pace. We must acknowledge the role the community played in the progress we have now made. The feedback was tremendous and gave us the confidence that we are aiming in the right direction. Even though there were not many pull requests, we got a great insight via emails and on our Alokai Slack channel #shopware-pwa (you can join us anytime at https://slack.vuestorefront.io/ ).

Shopware PWA is for everyone

Primarily, you must know, that Shopware PWA is not dedicated only to big eCommerce players. Obviously, there are limitless possibilities of customization stores built with Shopware PWA, via writing external plugins or creating unique themes, but that is not all that we cared about. We never thought about Shopware PWA as a product dedicated only to agencies because—no matter how corny it sounds—the open-source mindset was always in our DNA. Therefore, it was equally important for us to be open to the needs of the community and involve developers in enhancing the product. We wanted to give them possibilities to create external plugins and, eventually, sell them on the Shopware marketplace.

From the very beginning, we were devoted to making Shopware PWA as accessible as possible, which is also the reason why we can now present a product that is able to answer both the needs of the small local businesses and those of enterprises seeking flexibility.

With Shopware PWA, it is possible to start your fully functional shop using the default plugins and themes. It takes just a few minutes, which can pave the path to eCommerce for local merchants, especially at these turbulent times; however, it doesn't impose any limits on the bigger players. Shopware PWA is written with extensibility in mind, so the default shop can be treated as a foundation for further customization. The enterprises willing to provide a full and unique PWA experience are more than welcome to extend and override any elements to create a genuinely personalized eCommerce site.

What exactly does Shopware PWA have to offer?

Fully functional shop out-of-the-box

When you create a new project with our CLI, all you need to do is provide information about your Shopware 6 instance. The project will be prepared, and plugins installed in your Shopware instance, that have PWA support, will be installed.

This is both your starting point and a fully functional shop. Change your logo, add the plugins you’d like to use, adjust categories and CMSes for your needs, configure your out-of-the-box payment integrations, and you’re ready to go!

Plugins support

This is a really exciting functionality because it allows you to extend your PWA by adding new plugins directly from the Shopware marketplace. It creates tremendous opportunities for developers and shop owners by giving them reusable, well-tested features in minutes.

What can plugins do in Shopware PWA?

CMS extension (more on that below this section)
Injection into theme slots (in order to provide any functionality you want)

And what are those theme slots? There are placeholders in the theme where plugins can be injected and do what they were designed to do. Let’s take a look at a product page:

In theme, when you enable “developers’ mode” you can easily see where your plugin can be placed.

A full description of developing plugins can be found in our docs but, in a nutshell, after clicking at any of those boxes, you’ll see a slot name in the console. You provide it to your plugin settings, telling Shopware PWA which part you want to extend. As a great example, here is the product description: with the plugin, you can add something on above or below, replace it completely, and provide anything else you want.

Most importantly, multiple plugins may be injected into a single slot. For example, while you’re providing a social login plugin, you can implement only a Google login while someone else provides the Facebook one, and they can co-exist under the “Login” button.

CMS support

We’ve made huge progress in this area as well. It’s one of the most important parts of Shopware 6 and we’re happy to introduce its full Shopware PWA support.

In almost every page, all you see between the top navigation and the footer is Shopping Experiences provided by Shopware 6. It’s a composition of sections, blocks, and elements, which look more or less like this.

It lets you easily drag-and-drop CMS elements to the right places and personalize the shop to your needs. What’s more, it works instantly and without any additional work.

Default CMS components are provided by the theme but every Shopware 6 plugin can override any of them or add new custom components. You can still customize it in your final project, too.

Dive into our docs and see all the magic you can do . I’ll let the example speak for itself. Our community is already very active and we have an incoming Store Locator plugin, which extends CMS components, so you can do something like this just by installing the plugin.

As a first proof of concept we tried to make our Store Locator plugin compatible with the PWA. The Store Locator by Meteor helps visitors to find your physical stores. The plugin allows you to manage multiple stores and schedules and seamlessly integrate this with the Shopware shopping experience (CMS) capabilities. Using Google's Geocoding API, the plugin is able to automatically generate the coordinates of the store to show it on the map.

Jens Van Dorpe from Meteor company developing StoreLocator plugin

And this is composed of just a couple of CMS elements so the final look is still highly customizable.

Plans for future

As we achieved great results with CMS and plugins integration, we’re going deeper into customization. For now, every project starts with our default theme and this is a starting point for any customization. As our community is very creative and would like to have the possibility to introduce their own themes as well, we want to make it as smooth as it can be. We’d, therefore, like to provide custom themes as starters, so you could pick whatever theme most suits your needs.

How do we want to do this? By introducing theme inheritance. You can create a new theme by taking one of the existing themes and extending or overriding it. It is basically the same thing you can do in your own project, but you can also release it later as a custom theme. So, you’ll be able to create a maintainable structure of themes for different occasions.

We’ll always aim to have our default theme as a good starter for such customizations, so most of this work will be provided for you out of the box. The rest is up to your imagination and the client’s requirements—and we’re here to help you achieve that with the least effort.

Announcing the beta stage means we’re ready to start production implementations. Our community already started them, so we have great feedback from them. We’re not letting up on our work, as we have more we want to do, but we’re confident that the project is stable and can provide fully working shops.

A great journey lies ahead of us :)