Back to Top

Shopware Hybrid Mobile App

Updated 20 October 2023

Introduction

Shopware Hybrid Mobile App allows Shopware store owner to build own beautiful designed mobile app without any coding or designing.

This app is fully integrated with the Shopware website populates the date in real-time.

The app is more advanced as it uses the functionality of a Web app over a native container. All the orders, customers, the product information will be synchronized with the Shopware website.

Also, it uses the theme of the website and could be downloaded from the Google Play Store and iTunes store. Also, the app provides the customer view of the website.

Shopware merchants will be able to allow customers to shop online directly using the mobile app on the go with better security and high speed.

Searching for an experienced
Shopware Company ?
Find out More

Check a brief overview of the shopware 5 hybrid mobile app –

d92zadH_6Wo

Why choose Shopware Hybrid Mobile App?

Shopware is one of the most popular feature-rich open-source eCommerce platforms. Effective interface, highly flexible, intuitive navigation, and advanced technology makes Shopware more powerful and scalable.

Due to less complexity and significant advantage almost 80% online store owners turning towards Shopware.

Although, nowadays having an eCommerce mobile is essential to boost your customer loyalty as well as gain more sales to stay ahead of the competition.

Therefore, we have come up with a new hybrid mobile app – Shopware mobile app. Now Shopware merchants can seamlessly convert their Shopware website into a fully functional hybrid mobile app.

The Mobile app owner can configure the module from the admin panel. Follow the below installation steps to configure the module:

Installation

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

  1. Using Command
  2. Manual installation

Installation using commands

Customers will get a zip folder, and they have to extract the contents of this zip folder on their system. After extracting the WebkulHybridApp folder, the customer needs to transfer this custom > plugins on the server, as shown in the image below:

Shopware-hybrid-mobile-app-installation

After the successful installation, you have to run these commands in the Shopware root directory.

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

/bin/console sw:plugin:install WebkulHybridApp
/bin/console sw:plugin:activate WebkulHybridApp

To clear the cache run this command –

php bin/console sw:cache:clear

Now refresh the administration.

After that, visit administration Configration->Plugin Manager->Installed, the Hybrid Application for Shopware 5plugin will be listed there

Shopware-hybrid-mobile-app-plugin

Manual Installation

1 – Go to the plugin manager by navigating Shopware backend – Configuration -> Plugin Manager.

2 – Upload the zip from the plugin manager in the backend.

Shopware-hybrid-mobile-app-upload-1

3 – Click on the installed link on the left side menu in the plugin manager.

4 – Check the plugin in the uninstalled category and then click on the install button.

Shopware-hybrid-mobile-app-upload-plugin

5 – After the successful installation, click on the open button and Install it.

Shopware-hybrid-mobile-app-installation-1

Note:

After the installation process and plugin configuration if the module will not visible at front-end then run this command to clear the cache:

/bin/console  sw:cache:clear –env=prod

How to Get the Server Key?

To use push notification for Shopware 5 Mobile App, you need to have Firebase Project Credentials. It is required during module configuration. 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.

Firbase-add-project

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.

project-name-firebase

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

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

Hybrid-Mobile-App-Firebase-console

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.

Hybrid-Mobile-App-Settings-Firebase-console

Module Configuration

After that, visit administration Configration->Plugin Manager->Installed

Here you have to enter your Firebase project credentials. Enter the Server key and Sender ID as shown in the below screenshot.

Shopware-hybrid-mobile-app-server-key

After that click the Save Config button to apply changes.

Publish On Google Play & Apple App Store

After receiving the prerequisite information, your e-commerce hybrid mobile apps will be instantly developed and will be published on Google Play Store and Apple App Store.

To publish the mobile app, you can either do it yourself or we can do it on behalf of you. To do so, you must have the below details:

  • For Google Play, need a Google Play Console account.
  • For the Apple store, you must have Apple Developer Account credentials.

So, you can get the APK and IPA files once the apps are developed completely.

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

Interactive Homepage

Now, your website live on mobile. You can keep engage your customers and grow your sale scale hassle-free by offering them a well designed light weighted application.

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

This homepage contains multiple functionalities with which customers can engage themselves to remain connected with the app. Therefore, it includes the following sections:

  • Homepage Banners
  • Shop by categories
  • Register/Login
  • Overview
  • Profile
  • Addresses
  • Payment Method
  • Shipping Method
  • Orders
  • Instant Downloads
  • Wish List
  • Push Notification
  • Comment
  • Shopping Cart
  • Checkout Process
  • Search suggestions
  • Multiple Currency
  • Language Change

Homepage Banners

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

Shopware-hybrid-mobile-app-home-page1-1
Shopware-hybrid-mobile-app-homepage-1

Left Navigation Drawer

Left navigation drawer makes the navigation process easier. It displays the important features links of the application in one raw such as categories, customer profile, change currency & language and support.

Shopware-hybrid-mobile-app-side-navigation-bar2-1-1
Shopware-hybrid-mobile-app-left-navigation

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 mobile app, these categories are linked to Sub-categories, then it can be re-directed towards the Collection page.

That means, 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.

Shopware-hybrid-mobile-app-side-navigation-bar2-1-1
Shopware-hybrid-mobile-app-shop-by-category

Login/Registration

This mobile app allows customers to log in to the application if they have already registered. To do so the customers have to enter the registered email id and password which has used while registering.

Furthermore, customers can also register themself, if they are not. For that customers have to fill few personal details such as registering as Private customer or Company, First name, last name, email address, password and address(billing & shipping address).

Also, the customer can even subscribe to the newsletter and accept the Privacy Policy.

Shopware-hybrid-mobile-app-register4
Shopware-hybrid-mobile-app-new-customer5

Overview

To view the below information, the customer must first log in with the application.

On the side panel, the very first option is Delete Account.

You can find the delete Account option after tapping the profile image icon with a green tick.

Here, you can delete your account as well by confirming the same.

mockup-4
mockup-1-3

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

  • Profile
  • Selected Payment Method
  • Primary Billing Address
  • Primary Shipping Address
  • Your newsletter settings
Shopware-hybrid-mobile-app-overview-2
Shopware-hybrid-mobile-app-overview-1-1

Payment Method

In 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 based owner’s list of preferred payment methods.

Shopware-hybrid-mobile-app-payment-methods

Shopware-hybrid-mobile-app-payment-methd

Orders

Orders section displays the list of the order 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-hybrid-mobile-app-orders
Shopware-hybrid-mobile-app-order-view

Instant Downloads

In this section, the customer can find the downloadable item along with the serial number immediately after the successful checkout through mobile application.

Wish List

A wishlist is a pretty attractive eCommerce feature that allows customers to collect the desired product in their account for future reference which they don’t want to purchase immediately.

Shopware-hybrid-mobile-app-wish-list
Shopware-hybrid-mobile-app-wishlist

Push Notification

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

How admin can send a push notification?

Admin needs to navigate through Marketing –> Push Notification(Hybrid Application).

push-notification-shopware-hybrid-mobile-app

Once you’ll click on Push Notification pop-up window will appear shown as below:

edit-notification-1

Admin can add new notification and edit an existing. 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.
  • Message: Here you have to enter the content of your message.
  • Target Url:  Enter the web page link where the notification will be displayed.
  • Icon: Select image which will be shown in the notification.
Notification-Message

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

Shopware-hybrid-mobile-notification

Comment

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

Shopware-hybrid-mobile-app-share-comment
Shopware-hybrid-mobile-app-comment-1

Add to Shopping Cart

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.

This app gives an option to view the list of products added in the shopping cart, where they can delete the product from the cart and proceed further.

Shopware-hybrid-mobile-app-product7
Shopware-hybrid-mobile-app-product-page6

Checkout Process

Shopware hybrid mobile app provides a responsive mobile checkout for users that make the checkout process easy and quick. When users ready to place the order for the desired product, users must go through with checkout page.

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

  1. Address: Showing Billing and Shipping Address with options to update/ change it.
  2. 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.
  3. Complete order: Next checkout stage, will show the summary of the order such as the total amount and place the order.
Shopware-hybrid-mobile-app-checkout8
Shopware-hybrid-mobile-app-shipping-details10

Search Suggestions

An advanced search option will boost your sales as well as improve the shopping experience. As your customers will be able to reach the desired product faster by using the search option.

It will display all relevant results associated with the search keyword. It works with text search, showing exact results matching with the product title.

Shopware-hybrid-mobile-app-search-result

Multiple Currency

Shopware hybrid mobile application supports multiple currencies. It will show all currency type which has configured in the backend of the store. The customers can easily find product prices in the desired currency.

Shopware-hybrid-mobile-app-currency

Language Change

This app will provide you the option to change the entire store including category, subcategory, product information, and others into the desired language(depends on admin configuration).

Shopware-hybrid-mobiel-app-language

Support

This is all about Shopware hybrid mobile application, if you have any query feel free to ask your e-commerce evangelist is ready to help raise your concern at [email protected] or refer the link

Please explore our shopware development services and Quality shopware extensions .

Current Product Version - 1.0.0

Supported Framework Version - 5.5.x and 5.6.x

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content