Shopware Hybrid Mobile App
Table of Content
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.
Check a brief overview of the shopware 5 hybrid mobile app –
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.
- Using Command
- 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:
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
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.
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.
5 – After the successful installation, click on the open button and Install it.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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).
Once you’ll click on Push Notification pop-up window will appear shown as below:
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.
Once admin click on the save button, a notification will send to the customer mobile as shown below:
Comment
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:
- 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: Next checkout stage, will show the summary of the order such as the total amount and place the order.
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.
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.
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).
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 or refer the link
Please explore our shopware development services and Quality shopware extensions .