Read More
Menu Close

    Shopware 6 Hybrid Mobile App

    Introduction

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

    Flutter cross-platform based Shopware 6 Fully Native Mobile App also available with more features and Whitelabel mobile app development.

    Check a brief over of the shopware 6 hybrid mobile app –

    -TcnTSzM4_Q

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

    Searching for an experienced
    Shopware Company ?
    Read More
    1. Using Command
    2. Manual installation

    Installation Using Commands

    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:

    Screenshot_from_2020_05_13_12_53_29

    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.

    Manual Installation

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

    1) Extract the zip file of the plugin.

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

    screenshot-shopwaredemo.webkul.com-2021.11.15-11_39_35

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

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

    screenshot-shopwaredemo.webkul.com-2021.11.15-12_01_53-1-e1636972577888-1

    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.

    screenshot-shopwaredemo.webkul.com-2021.11.15-12_01_53-2-e1636972693608-1

    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

    Module Configuration

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

    screenshot-shopwaredemo.webkul.com-2021.11.15-12_22_58-e1636972853996-1

    Here need to enter your Firebase project credentials for the 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.

    Firbase

    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

    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.

    Hybrid-Mobile-App

    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.

    Firebase-console-1200x498-1

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

    screenshot-shopwaredemo.webkul.com-2021.11.15-15_18_32

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

    WhatsApp-Image-2021-11-17-at-11.46.51_samsung-galaxys20-pink-portrait

    WhatsApp-Image-2021-11-17-at-11.46.51-1_samsung-galaxys20-pink-portrait

    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.

    WhatsApp-Image-2021-11-17-at-11.46.51-2_samsung-galaxys20-pink-portrait

     

    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.

    WhatsApp-Image-2021-11-18-at-11.05.16_samsung-galaxys20-pink-portrait

     

     

    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.

    WhatsApp-Image-2021-11-18-at-11.15.24_samsung-galaxys20-pink-portrait

     

     

    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.

    WhatsApp-Image-2021-11-18-at-11.15.24-1_samsung-galaxys20-pink-portrait

     

     

    Overview

    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.

    WhatsApp-Image-2021-11-18-at-13.18.08_samsung-galaxys20-pink-portrait

    WhatsApp-Image-2021-11-17-at-11.46.51-1_samsung-galaxys20-pink-portrait_samsung-galaxys20-pink-portrait

    Personal Data 

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

    screenshot_20211129_110841_samsung-galaxys20-pink-portrait

     

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

    WhatsApp-Image-2021-11-18-at-13.18.08_samsung-galaxys20-pink-portrait

     

    Newsletter Subscription 

    In this section, the customers can click the checkbox to subscribe to the newsletter and can uncheck the same if want to discontinue.

    screenshot_20211129_110910_samsung-galaxys20-pink-portrait

     

    Shipping & Billing Address

    For both the sections Shipping and billing address the customer can click on the button to change billing address or the change shipping address and thereby can edit their address or add a new one.

    screenshot_20211129_111014_samsung-galaxys20-pink-portrait

    screenshot_20211129_111049_samsung-galaxys20-pink-portrait

    Orders

    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.

    WhatsApp-Image-2021-11-22-at-16.25.40_samsung-galaxys20-pink-portrait-1

     

    Push Notification

    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.

    screenshot-shopwaredemo.webkul.com-2021.11.15-15_21_06

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

    screenshot-shopwaredemo.webkul.com-2021.11.15-15_23_03

    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.
    screenshot-shopwaredemo.webkul.com-2021.11.15-15_27_17

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

    WhatsApp-Image-2021-11-17-at-11.46.51-1_samsung-g_samsung-galaxys20-pink-portrait

     

    Review

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

    WhatsApp-Image-2021-11-25-at-11.08.37_samsung-galaxys20-pink-portrait

    WhatsApp-Image-2021-11-22-at-17.42.0346r6_samsung-galaxys20-pink-portrait

    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.

    WhatsApp-Image-2021-11-23-at-16.33.52-2_samsung-galaxys20-pink-portrait-1

    WhatsApp-Image-2021-11-23-at-16.03.37-2_samsung-galaxys20-pink-portrait

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

    Checkout Process

    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.

    WhatsApp-Image-2021-11-26-at-17.30.32-4_samsung-galaxys20-pink-portrait

    WhatsApp-Image-2021-11-26-at-17.30.32-1_samsung-galaxys20-pink-portrait

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

    screenshot_20211122_153531_samsung-galaxys20-pink-portrait

    Support

    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 [email protected].

    Please explore our Shopware development services and Quality Shopware extensions

    Current Product Version - 1.0.5

    Supported Framework Version - Shopware 6.4.5.1

    Blog Version - Shopware 6.4.5.1
    • Version Shopware 6.4.5.1
    • Version Shopware 6.3.0.1
    • Version Shopware 6.1.1
    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Table of Content