Shopware 6 Hybrid Mobile App

• Build an intuitive hybrid application effortlessly for your Shopware website.
• The existing website theme integrates into the mobile app.
• All the payment gateways and shipping methods are available.
• Push notifications support.
• Shopware storefront customizations & features are also available in the app.
• Supports various mobile devices and tablets.
• Real-time synchronization with the web store – products, categories, orders, customers, etc.
• The hybrid Mobile app source code is available.
• Hybrid Mobile App is fully customizable as per your requirements.

Shopware provides two ways to install the plugin to the server.

1. Using Command
2. Manual installation

The Customers will get a zip folder, then they have to extract the contents of this zip folder on their system.

The customer has to copy the folder WebkulHybridApp to the custom/plugins directory of Shopware6. As shown in the below image:

Now open the Shopware6 application in the Terminal.

Run this command to refresh the plugin –

/bin/console plugin:refresh

Go to your Shopware installation Root directory then run this command to install then activate the plugin –

/bin/console plugin:install --activate WebkulHybridApp

To clear the cache run this command –

./bin/console c:c

Now refresh the administration.

For the manual installation of the plugin follow the steps as mentioned below:

1) Extract the zip file of the plugin.

2) Go to your Shopware 6 installation backend panel and navigate to  Extensions-> My Extensions after that you can find all the installed plugins in it.

To install the plugin, the user can click on the Upload extension button. The user can upload the plugin zip (Webkul Hybrid App) here.

3) After uploading the plugin zip, the user can see the Extensions in the list.

4) Now the user can click on the install icon to install the Shopware 6 Hybrid Mobile App extension.

5) After the installation of the plugin, the user can click to activate the extension.

While in the process the admin can see the success message ‘Extension has been activated’.

After the installation process and plugin configuration if the Shopware Hybrid Mobile App icon option is not visible then run this command to clear the cache:

/bin/console c:c

After installing the Shopware 6 Hybrid App plugin, the admin can configure this module under Extensions -> My Extensions -> Hybrid Application -> Config

Here need to enter your Firebase project credentials for the Server key.

To use push notifications for Shopware 6 Mobile App, you need to have Firebase Project Credentials. Please click here then create a new project with your Google account.

1.  After opening the Firebase page. Please create a project by clicking the Add project button.

2. A small pop-up window will appear with the name of Create a project. Here you have to enter your Project Name, then select your Country/Region.

Then click the Create Project button.

3. After creating your new project click the Settings menu icon.

Then select the Project Settings option. After that, a new Settings page will open.

4. After entering the Settings page, go to the Cloud Messaging tab. From here you will find your Project Credentials. Copy then save your Server Key and Sender ID as visible below.

Now go to the configuration and first select the sales channel and then enter the Server key.

After that click the Save Config button to apply changes.

You can publish your mobile apps either from your own account or choose Webkul’s Google Play and Apple App Store account. So, you can get the APK and IPA files once the apps are developed completely.

Now, let us walk through the Shopware 6 Hybrid Mobile App and see all the features and functionalities it has.

After installation, the app opens up with an informative homepage that gives a clear exposure of your web store in form of a mobile app and provides a good user experience.

The customers can sign up/ log in to the Shopware6 Mobile App under the Profile tab.

Moreover, customers can also register themself, if they are not.

For that customers have to fill few personal details such as registering as the First name, last name, email address, password, and address (billing & shipping address).

Also, the customer can accept the Privacy Policy.

The customer will come across a very interactive Homepage which includes various features such as Banner, Category, Overview, Payment Method, Shipping Method, Orders, Push Notification, Comment, Shopping Cart, Checkout Process, Search suggestion, etc.

Homepage Banners

The admin can add banners from the backend admin panel and can add the categories and products for respective banners.

Shop by Categories

This feature will make the application more user-friendly as customers can view or navigate the product catalog page based on categories.

In the Shopware 6 mobile app, these categories are linked to Sub-categories, then it can be re-directed towards the Collection page.

All the categories (Root category with their Sub- Categories) and all the products of the store owner which are displayed on the store, will also be shown in the mobile application.

Although, the category is selected by the Admin from the backend panel. Including the main category, the admin also adds any sub-category under the root category.

If the customers have a product in their minds, it can be directly searched by simply adding the product keyword or the product name in the search tab as shown in the image below.

As the customer adds a keyword for the product, other products or search suggestions associated with the keyword shall also appear.

The customers can select any of the results to view the details of that product. The customers will find the details on the product with related products as well.

In the overview section, customers can access the account dashboard which enables them to view and change the account activity. This section includes:

• Personal data
• Payment Method
• Newsletter Subscription
• Billing Address
• Shipping Address

In order to view the above information customer must have to first log in with the application.

Personal Data 

In this section, the customers can click on the button Edit profile and can edit their added personal data.

In the Payment Method section, customers can preset the preferred method of payment for an order product that will display while checkout. The payment method will display the owner’s list of preferred payment methods.

The order section displays the list of orders made by the customer. Customers can view the order details such as order reference number, date, status, and total price.

Also, customers can click on “View” to check the detail of the order or can reorder the products.

Shopware 6 hybrid mobile app allows app publishers to send a notification to customers. To get push notifications customers should have an internet connection.

How admin can send a push notification?

Admin needs to navigate through Settings>>Extensions >>Hybrid Application Messages.

After that, you can see the create new message button, click on that button.

The admin can add new notifications and edit an existing one. Once you will click on Add item button you will get an option to add notification information:

• Title: Give the title name for the notification.
• Description: Here you have to enter the content of your message.
• Store Url:  Enter the web page link where the notification will be displayed.
• Icon: Select the image which will be shown in the notification.
• Click on the Active button and after that click on the Save button.

Once the admin click on the send button, a notification will send to the customer mobile as shown below:

In addition, the Shopware 6 hybrid mobile app allows customers to add and view other customer comments on the product.

While shopping, customers can add multiple items into the cart which they gonna buy.

The customer can add products into the cart quickly and then continue with the shopping further. This process makes the checkout process super easy and helps to boost the sale.

Shopware 6 hybrid mobile app provides a responsive mobile checkout for users that make the checkout process easy and quick.

When users are ready to place the order for the desired product, users must go through with the checkout page.

In Shopware 6 mobile app, the checkout page consists of three below steps:

• Address: Showing Billing and Shipping Address with options to update/ change it.
• Payment & Shipping: This page will display the pre-set payment method along with the shipping method with the option to update/change it. Customers can also check total shipping costs before placing the order.

• Complete order: The next checkout stage, will show the summary of the order such as the total amount and placed order.

This is all about Shopware 6 hybrid mobile application if you have any query feel free to ask your e-commerce evangelist who is ready to help, raise your concern at support@webkul.com.

Please explore our Shopware development services and Quality Shopware extensions