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.
- 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.
Shopware provides two ways to install the plugin to the server.
- Using Command
- 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 –
/bin/console plugin:install --activate WebkulHybridApp
To clear the cache run this command –
Now refresh the administration.
1) Extract the zip file of the plugin.
2) Goto your Shopware 6 installation backend panel and navigate to Setting -> System -> Plugins after that you can find all the installed plugin in it.
For installing the plugin, the user can click on the Upload Plugin button. The user can upload the plugin zip(WebkulHybridApp) here.
3) After uploading the plugin zip, the user can see the plugin in the list.
4) Now the user can click on the install icon to install the Shopware Auction plugin.
5) After the installation of the plugin, the user can click to activate the plugin.
While in the process the admin can see the success message ‘Plugin has been activated‘.
After the installation process and plugin configuration if the Auction icon option is not visible then run this command to clear the cache:
After installing the Shopware Hybrid App plugin, the user can navigate to Setting -> System -> Plugin.
After clicking on the plugin, the user can see all the installed plugin in the Shopware. The user can click on the “…” icon for the configuration option of the plugin.
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
Now, let us walk through the Shopware 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 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).
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.
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.
In the overview section, customers can access the account dashboard which enables them to only view the account activity. This section includes:
- Selected Payment Method
- Billing Address
- Shipping Address
In order to view the above information customer must have to first log in with the application.
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 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 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 Settings>>Plugins >>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:
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.
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: The next checkout stage, will show the summary of the order such as the total amount and place the order.
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@example.com
Current Product Version - 1.0.1
Supported Framework Version - Shopware 22.214.171.124