How To Build Your Mobile App With MageNative

1.Overview #

The MageNative Shopify Mobile App extension is very useful to build the mobile app easily and in a very flexible manner. With the help of the MageNative Shopify Mobile App extension, the store admin can convert the Shopify website into a featured mobile app consisting of all the website functionalities.

MageNative is the Application Development Platform that enables the presentation of the website in the Mobile Application Environment. You can customize the app to match the brand image and publish it to meet the requirements of your customers.

The app displays the product information in a very interactive and fascinating way. This application is compatible with the Android and IOS operating systems.

 

Key features are as follows:

  • Attractive and User-Friendly Layout: Provides an attractive and user-friendly layout that makes the users instinctively experience how to use the interface.
  • Multi-Lingual and RTL Support: It supports multiple languages and the right to the left theme. In the right to the left theme, writing starts from the right of the page and continues to the left.
  • Drag and Drop: The drag and drop app builder allows you to build your app by simply dragging and dropping different blocks of the app.
  • Real-time Synchronization: The app synchronizes with your store in real-time, so whatever changes you make in your store are automatically reflected in the app. 
  • Supports all product types: It supports all types of products available in the Shopify store.
  • Search: The enhanced search feature is available to search the required product in the app based on the name, description, and category of the product.
  • Barcode And QR Code Reader and Scanner: QR Code Reader is used for Product sharing and easy product search. Barcode Scanner is used for the Real-world product search.
  • Complete Marketing Support: Get comprehensive guidance and support on how to promote your mobile app. Increase app downloads by four times.
  • Push Notification: Using Push Notification, the MageNative Shopify Mobile App sends the user a notification message regarding any new offer or any other app-related messages without the user actually opening the app. The notification is pushed to the mobile to draw the attention of the user towards the latest happening in the app, even when the screen of the tab or mobile is locked, and the app that is pushing the notification is closed.
  • Social Login: A single sign-on technology is used that enables users to authenticate themselves to the MageNative Shopify Mobile App by connecting through social media, such as Facebook and Google. Thus, offering an option to register, log in with their regular social login ID and password rather than going through the regular process of registration for using the App.

2.Theme Settings #

Once you have installed your app, you would first design the homepage that suits your brand image and preferences. With MageNative, you can perform customization seamlessly with minimum effort and view the changes in real-time.

Theme Settings

Click the ‘Let’s Get Started’ button from the dashboard.
Lets-Get-Started-2
After this you will be redirected to the ‘Store selection’ page where you can select the type of store you are running, just pick your desired store and click ‘Save & Next.

Save-next-1-scaled
Then go to the ‘Choose theme section’ where you can pick your favorite theme from a bunch of pre-built ones or build your own theme. Then click on ‘save & next’ to move ahead.
choosetheme-2
Use components

Here You’ll find the list of components enabled on your home screen. Right next to it, you’ll see the mobile app where you can drag & drop the components and see the changes you make. Utilize these components along with the selected theme, and start customizing your app the way you want.
Use-components-1
MageNative offers 9 components that you may utilize to design your apps: Category circle, banner slider, product slider, Standalone banner, Category square, collection grid layout, product layout, product grid layout, and collection slider.

Each component allows you to adjust its layout, color, or font and enable you to upload any item into it.
Configure-your-theme-1
Banner Slider

A banner slider is the component of an app that lets you add the banners to your app to make it look more appealing and enticing. Here you can adjust its layout, change colors, and fonts, and upload banners you want to add.

Collection Grid

An interactive grid presents users with a collection of products in an easy-to-search and customizable way. It lets you customize its color and layout and upload products/images. Customize however you want and click on ‘apply changes’.

In the same way, you can do it for other components also.

Once you are done with your app customization process, move on to branding by clicking on ‘Save & Next’.

Personalize Branding

MageNative lets you personalize your mobile app to suit your brand’s image and color. This personalization is essential for your loyal customers to connect with your app and feel comfortable utilizing it.
Head to the MageNative dashboard and glance around the Personalize Branding section!
themesettings
Here you are required to fill in all the details of your app

1- App Name

Here you need to enter the title of your app, which appears under the app icon on the home screen. So choose it wisely as per your business type and needs.
app-name
2- Theme color & secondary theme color of your app

Here’s where you can give an appealing touch to your app the way you want. You can adjust the theme color and secondary theme color of your app. All you need to do is hover over the color, and you can pick out the hex codes of respective colors.
The overall theme color refers to the overall color scheme of your app.
themecolour
3- Maintenance Mode

Maintenance mode lets you display a message to your users when your app is temporarily out of service or is in the under-development phase.
maintenence
4- Upload Images
imageupload

  1. Splash screen image- The minimum requirement for splash screen image is 1080px * 1556px.
  2. Login screen image- An ideal size for login screen image would be 750px * 1334px.
  3. App icon- The app icon image needs to be 1024 px * 1024 px size for the icon to be visible clearly.

Save the changes you’ve made and preview them in real-time by clicking on the ‘preview’ button on the top right corner of the page.

Click on the ‘Launch’ button to proceed with the launching process of your mobile apps to App Store and Play Store.

3.Theme Components #

Start customizing your mobile app in the theme settings section. Just drag and drop the component you want to add to your mobile app and preview the changes happening in real-time on the mobile screen next to it.

In the right-hand corner, you can find the button to change the theme and theme section.

Configure Theme

MageNative’s mobile app builder comes with 9 pre-built themes that are completely customizable. The themes are built to cater to certain specific kinds of stores.
You can also find an option to Build Your Theme using the available components.

Theme-Setting

There are 9 components by making use of which you can build and customize your app. You can see the list of components that are enabled on your home screen. Right next to it, you’ll see the preview of all the components and changes you make. Let’s discuss each component and its functionality.

Category circle

Using the ‘category circle’ component, you can categorize your products and offering and make it easier for shoppers to find the product they are looking for. Drag it to the mobile screen next to it and see what it will look like in your app.

It lets you adjust its layout, color, and fonts and uploads different items into it by clicking on the edit button. When you are done with changes click on the ‘apply changes button’ to save the modifications. Or you can hide/delete it by clicking on the ‘hide/delete’ button.

Banner Slider

The banner slider lets you add different banners to your app to make it look more enticing and appealing. Drag it to the mobile screen next to it and see how it will look in your app.

Click on the edit button to adjust its layout, color, and fonts and upload different banners, and click on the ’apply changes’ button to save the modifications. Also, you can hide/delete it by clicking on the ‘hide/delete’ button.

Product Slider

Product slider lets you showcase your featured or top-selling products in your app in the form of a carousel. Drag it to the mobile screen next to it and see how it will look in your app.

It lets you adjust its layout, color, and fonts and uploads different products into it by clicking on the edit button. When you are done with changes, click the ‘apply changes button’ to save the modifications. Or you can hide/delete it by clicking on the ‘hide/delete’ button.

Standalone Banner

A standalone banner lets you display special offers or sales in your mobile app. Here you can change its layout, i.e. button position, text alignment, or button title. Adjust its colors and fonts. And upload banners using collections, products, or web URLs. When you are done with the required changes, click the ’apply changes’ button to save the modifications. Also, you can hide/delete it by clicking on the ‘hide/delete’ button.

Category Square

You can use the category square component to display the product category in the form of squares. Drag and drop it to the mobile screen next to it and preview what it looks like. You can also adjust its layout, color fonts, or upload items by clicking on the edit button. After making all the required changes, click the ‘Apply changes’ button to save the modifications. You can hide/delete it by clicking on the ‘hide/delete’ button.

Collection grid layout

The collection grid layout lets you showcase your product collection in the form of a grid. Here you can adjust its layout by adding ‘no of rows’, ‘Item shape’, or ‘text alignment’. Or you can show/hide the Item Title and Item border.

Moreover, it lets you change its color and fonts. And let you link products to the collection grid. You can make all these changes by clicking on the edit button, and when you are done with the changes, save them by clicking on ‘Apply changes’.You can hide/delete it by clicking on the ‘hide/delete’ button.

3 Product Layout

Another most useful component in the app is the 3 product layout, where you can show one main featured item and related items on the screen. Drag it to the mobile screen next to it and preview what it looks like. Click on the ‘Edit’ button to change the layout, i.e. Item Text Alignment, Product Shape, header title, or header subtitle. Also, you can change color, and fonts, upload images, and click ‘apply changes’.
You can hide/delete it by clicking on the ‘hide/delete’ button.

Product Grid Layout

A product grid layout lets you showcase a product collection in the form of a grid. Click on the edit button to change its layout i.e.

1- ‘Choose layout’ lets you pick the layout in which you want to show your item, like a list or grid
2- You can change the number of items displayed in a row by clicking ‘Items in a row’.
3- Click on ‘No. of rows’ to adjust row numbers as per your requirement
4- You choose from the ‘Item shape’ dropdown to change the item shape to square or rounded
5- You can change ‘text alignment’ by choosing from the ‘text alignment’ dropdown.

Show/hide option

Show/hide options let you show/hide elements like Header, header subtitle, header action, Item border, Item title, Item price, Item special price, or header deals.

Header Title update

Header title update lets you change header title, subtitle, or Header action.

You can also change the colors and fonts of the grid and click on ‘Apply changes when you are done with all the changes or click on ‘cancel’ if you don’t want to make any changes. You can hide/delete it by clicking on the ‘hide/delete button.

Collection slider

The collection slider lets you showcase the collection of the product. You can make changes in the collection slider by clicking on the edit button. Here you can adjust the layout, i.e. product shape and text alignment. You can show/hide the header, header subtitle or Item border. You can change colors, fonts, and upload items, then click on the ‘apply changes’ button when you have completed all the changes. You can hide/delete it by clicking on the ‘hide/delete button.

I hope this will help you use different components and themes and customize your app in a better way.

4.Preview your Apps #

Preview Your Mobile Apps

Congratulations on completing the first step which is the Theme Setting. You can now preview your fully functional and featured Android and iOS apps and make changes in real-time.

 

Follow these simple steps to view your mobile app demo:

Step 1: Install MageNative’s Demo App on your iOS or Android phone from App Store or Play Store respectively.

Apple: https://apps.apple.com/us/app/magenative-shopify-app/id1266263558

Android: https://play.google.com/store/apps/details?id=com.shopify.shopifyapp

Step 2: Open the installed app and click the top-left hamburger menu to open the side panel. Tap on “LIVE PREVIEW OF YOUR STORE”


Step 3: Scan the QR code on your MageNative Admin console and preview your mobile apps.

 

How to find the QR Code

Screenshot-2022-07-08-152844
Note: In case you don’t see the Preview option just Build Your Theme first.

 

5.Publish Apps #

Here is a simple guide and all the main steps to publish your mobile apps.

Assuming that you have created your app and made sure it’s functioning perfectly, there are a couple of simple steps left to launch your mobile app as discussed below.

publishing-app-2

Step 1- Getting Google and Apple developer accounts

If you want to publish your app on behalf of your brand’s name, you must have developer accounts for both Apple and Google Play stores. It is a way of allowing you have full control of your app.

Here, we have already prepared a guide for you to make the process as simple as possible.

You can check the guides below for creating developer accounts for each of these platforms:

Guide For Creating Apple Developer Account

Guide For Creating Google Play Developer Account

Once enrolled, Grant us access to upload your apps to the play and apple stores. Refer to the guide below to grant us access.

Follow this Guide To Grant The developer account Access

After this, subscribe to a paid plan for MageNative App

Click here for a paid subscription plan

Step 2. Filling Up App Details Form

After completing each process for the developer accounts, you need to fill out the App Details Form below.

appdetails-2
App Name: Here you need to fill out the app name; the recommended length for the app name is 30 characters.

Company Name: After filling in the app name, you need to fill out the company name. The Company Name will be shown in the App Store under your App. You can add the company name up to 100 characters.

App Description: In the app description section, you need to fill out the app description maximum length of 4000 characters.

Step 3- Fill Out The Personal Details

personal-detail
Name: Set the appropriate name you wish to set for your developer account

Support Email: Fill out your active email address for communication

Telephone number: Here you need to enter your active phone number for communication.

Privacy Policy Link: Attach the privacy policy link of your website in the textbox.

Step 4- Upload App Images

Here you need to upload the app logo and graphic banner images.

appimages-1
Logo: The app logo image needs to be 1024 px * 1024 px size for the logo to be visible clearly.

Feature Graphic Banner: The requirement for Feature Graphic Banner image is 1024px * 500px.

Step 5- Keywords

Here you need to fill in at least 3 key phrases based on which your App will be searched and indexed on the Store.

keywords

Step 6- Account Details

Once you’re done with the enrollment, provide the Apple Developer Account Name and Google Developer Account Name here. Or you can Ignore it if you are not enrolled in Apple or Google Developer Account.

accdetails

Apple Developer Account Name: This is the name you used to enroll in the Apple developer program. If not enrolled already, please check this Guide.

Apple-Team-Name
Google Developer Account Name: This is the name you used to enroll in the Google developer program. If not enrolled already, please check this Guide.

Google-Team-Name

Step 7- Promotional video

From here you can upload a promotional video of your app. The video will be displayed and played in the App Store/ Play Store.

promotionalvideo
After accomplishing the above steps, our team will take over the process and follow all the processes needed to publish your app on Apple Store and Google Play Store.
Once the process is complete, your app will be published in the app stores.

6.Push Notifications #

Push notifications are the best and amongst the most effective ways to get in touch with your customers. It lets your customers keep engaged and informed about any new updates or special offers in your app. Push notifications delivered to the right customer at the right time can boost your app engagement levels up to 88% and increase app retention rates by 3-10x.

MageNative lets you send custom notifications manually or scheduled notifications for specific scenarios.

Let’s discuss using manual and scheduled push notifications in the app.

Once you have launched your app, it’s time to seek your customers’ attention and entice them with attractive deals and offers using push notifications.

It’s simple, move on to the MageNative app’s dashboard and click the “Push Notification” Link from the left menu bar.

Push Notification

Then click on the “Create Notifications” button at the top-right corner of the page. A dialog box will open

Shopify Push Notification

Here, in the dialog box, you need to Fill in all the required fields and click on the ‘save’ button to create the notifications.

create mob notification

Close the form and the Push Notification will be created.

How To Schedule Push Notification?

Nothing is more effective than a rightly delivered notification to the right person. Scheduled push notification ensures notifications aren’t forgotten. It lets you shoot the notification at the perfect timing to your shoppers.

Let’s have a glance at how can we schedule a push notification

Click on the ‘Create Scheduler’ link on the left corner of the dashboard.

create scheduler

Afterward, the dialog box will appear in front of you where you need to fill in the required details and click the ‘save’ button, and your push notification will be created successfully. You can close the dialog box by clicking the ‘close’ button.

Create Not

That’s it! So start utilizing push notifications suitably and engage better with your customers instantly.

7.How To Enable App Only Discounts #

Offering discounts and rebates on purchases is an effective way to attract customers to your store. 93% of U.S. shoppers cite discounts and offers as important factors when deciding whether or not to purchase from a retailer or brand. Moreover, offering an attractive discount to a bunch of shoppers who utilize a mobile app will entice them to purchase more, increasing conversion rates.

Enabling this feature is quite simple- let’s go through these easy steps.

Step 1 – Head over to your MageNative app dashboard, and click ‘App-only discount’ from the left menu bar.

app-only-discount

Step 2- Click on the “Create Discount Code” button at the top right.

App only discount

Step 3- A dialog box will open where you need to fill in the customer code.

create-discount

Step 4. Now you can see the generated code in the box below.

discount-code-w

Step 5. Click on the copy button and the code is copied to the clipboard.

wintersale-discountcode

Step 6. After that, click on the ‘Create’ button, which will redirect you to your Shopify store admin panel. Where you need to enter the ‘Discount code’ copied previously and fill in all the required details like type of discount, discount value, discount applicable on what amount of minimum purchase, customer eligibility to get the discount, usage limit, and active dates for discount. Fill in all the details and click the “Save” button to create a discount.

create-product-discount

Step 7- Newly created discounts will be listed in the “App only discount” section of the Magenative app.

create-product-discount

Step 8- That’s it! Now you can share the customer code for a discount with your customers through the notification panel or any other way you want.

Hope this guide will help you in generating discounts for your customers. We are consistently working to help you enhance your mobile app selling experience. Attract more customers, better retention, and ultimately, more conversion!

8.Make Products/Collections available for MageNative App #

How to make Products available for Mobile App Builder-MageNative

Make ProductsCollections available for MageNative App

  • Log in to your Shopify Admin
  • Go to the Products -> All products
  • Select the Product(s) which you want to make available for the Mobile App Builder-MageNative
  • Click on More actions and Add available channel(s)…
  • Select the checkbox corresponding to the Mobile App Builder-MageNative and uncheck every other checkbox
  • Click on the Make products available button
  • Wait for some time and the products will be available in your mobile apps
  • After making the products available make sure to make the Collections available too

How to make Collections available for Mobile App Builder-MageNative

make collections available

  • Log in to your Shopify Admin
  • Go to the Products -> Collections
  • Select the Collection(s) which you want to make available for the Mobile App Builder-MageNative
  • Click on More actions and Make collections available
  • Select the checkbox corresponding to the Mobile App Builder-MageNative and uncheck every other checkbox
  • Click on the Make collections available button
  • Wait for some time and the collections will be available in your mobile apps
Suggest Edit

Shopify Mobile App

30-Days Free Trial
Shopify APP
Get Your Mobile App Shopify APP
Go to Top