Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    hyperlocal-marketplace-guide

    Shopware Hybrid Mobile App

    Introduction

    Shopware Hybrid Mobile App, the merchants will be able to allow customers to shop online directly using the mobile app on the go with better security and high speed. You can convert your Shopware store into a hybrid mobile app and deliver a combination of both native app and web app experience to your customers.

    Features

    • 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.
    • Hybrid Mobile app source code is available.
    • Hybrid Mobile App is fully customizable as per your requirements.

    Installation

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

    1. Using Command
    2. Manual installation

    Installation Using Commands

    Consumers will get a zip folder, then they have to extract the contents of this zip folder on their system. The consumer has Copy the folder WebkulHybridApp to 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 –

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

    To clear the cache run this command –

    Now refresh the administration.

    Manual Installation

    1. Upload the zip file of the plugin.
    2. Go to your Shopware6 installation backend panel then navigate to Setting -> System -> Plugins after that, you can find all the installed plugin in it.

    Click on the Plugin. For installing the plugin, the user can click on the Upload Plugin button. The user can upload the plugin zip(WebkulHybridApp)here.

    Further, in the newly added plugin, two actions can be performed which are: Install and Delete. The admin will install the plugin by clicking on the Install option in the dropdown.

    After installation, you have to click on the activate button.

    Module Configuration

    After that, click on the Config button.

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

    How to Get the Server Key?

    To use push notification 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 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.

    Publish On Google Play & Apple App Store

    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 Hybrid Mobile App and see all the features and functionalities it has.

    Login/Register

    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.

    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 First name, last name, email address, password and address(billing & shipping address).

    Also, the customer can accept the Privacy Policy.

    Homepage

    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 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.

    Overview

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

    • Profile
    • Selected Payment Method
    • Billing Address
    • Shipping Address

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

    Payment Method

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

    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.

    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 –>Hybrid Application Messages.

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

    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.
    • 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 image which will be shown in the notification.
    • Click on the Active button and after that click on the Save button.

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

    Review

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

    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.

    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: The next checkout stage, will show the summary of the order such as the total amount and place the order.

    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 support@webkul.com

    Current Product Version - 1.0.0.

    Supported Framework Version - Shopware 6.1.1

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index