How To Build Your Mobile App With MageNative

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.

This demonstration video will take you to the journey of creating mobile apps for your Shopify store through quick onboarding steps with MageNative app builder:

After installing the app, start by designing a homepage that matches your brand image and taste. With MageNative, you can seamlessly make customization with minimal effort and view your changes in real time.

Click the ‘Let’s Get Started’ button from the dashboard.

 

 

After this, you will be redirected to the ‘Choose Theme’ page, where you can select the type of theme based on the store you are running in the following manner.

1- Pick Your Theme

• Go on the ‘Choose Theme’ section where you can pick your favorite theme from a bunch of Pre-built or Pre-defined ones or you can build your own theme according to your Brand.
• Then click on ‘Save & Next’ to move ahead.
• Also, from here, you can pick the theme according to your ‘Store Type’ by selecting store type from the ‘Top Right Corner’ of the ‘Dropdown List’, as shown in the image below.

 

 

2- Customize Now

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.

You can also select ‘Language’ of your choice from the options provided.

 

 

MageNative offers Top Banner with 10 components that you may utilize to design your apps:

1. Standalone Banner
2. Spacer
3. Announcement Bar
4. Banner Slider
5. Category Card
6. Product Slider
7. Collection Grid Layout
8. 3 Product Layout
9. Product Grid Layout
10. Collection Slider

Each component allows you to adjust its layout and enable you to upload any item into it.

 

 

3- Brand It Your Way

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 Brand It Your Way section!

 

 

(i) App Setting: Here you are required to fill in all the details of your app in the ‘App Setting’ section.

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.

2- App icon: The app icon image needs to be 1024 px * 1024 px size for the icon to be visible clearly.

3- Header Image: The minimum requirement for a Header image is 700px * 200px.

4- Dark Mode: Also, MageNative has come up with the most recent feature i.e. Dark Mode which you can set as per your requirement, by choosing Auto, Off, or On Mode.

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

 

 

(ii) Color/Font: This section lets you set the Colors and Fonts in your app.

Here’s where you can give an appealing touch to your mobile app the way you want. You can adjust the Global Colors and Top Navigation Color in your app. All you need to do is hover over the color, and you can pick out the hex codes of the respective colors.

 

 

‘Save’ the changes you’ve made and Preview them in real-time by clicking on the ‘Apply’ button at the bottom of the page.

Then finally, you can click on the ‘Save’ button in the ‘Top Right Corner’ of the App to Save all the changes you have made in your Mobile App.

 

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

Configure Theme

MageNative’s mobile app builder comes with Multiple pre-built themes that are completely customizable. The themes are built to cater to different types of stores.

• You can select the store type from the dropdown, and it will display the themes related to the chosen store type (i.e. Fashion, Electronics, Marketplace, Food, Grocery, and Others.).
• You can find an option in the ‘Pick your theme’ section to Build Your Theme using the available components.
• Then after selecting the desired theme click on the Save & Next button.

Top Bar

The Top Bar appears at the top of your mobile screen. It Provides navigation and actions related to the current screen. It is used for branding, wishlist, screen titles, search, and navigation.

Step 1 – Clicking on the Edit button lets you change its Layout and Upload image elements.

• Layout: In the layout section, you can set the Display Layout Option, i.e. Search Position as an icon, Middle Search, Full Width Search, Middle Logo. And Top Bar Settings where you can enable/disable Wishlist Icon and Banner Slider.
• Upload: Upload the Logo Image to it.

Step 2- Apply: Once you are done with all the changes, click the Apply button to Preview the changes.

Reset: The Reset button lets you reset all the changes you have made in the component.
There are a variety of 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 a preview of all the components and changes you make. Let’s discuss each component and its functionality.

(I)- Standalone Banner

A Standalone banner lets you display special offers or sales in your mobile app.

Step 1- Drag it to the mobile screen next to it and see in real-time how it will look in your app. (Note*- applicable for custom themes only).

Step 2- When you click the ‘Edit’ Button, you can easily view all its functionalities in the left side, where you can make modifications as per your requirement.
Users can also edit the components by clicking the configure component button. (Note: *This step is valid for the custom theme only for predefined themes; regular editing will work.)

Step 3- After clicking on the ‘Edit’ button, you can modify the ‘Layout’ of the banner and ‘Upload’ desired images into it.

Layout:

• Display Layout Option: Here you can adjust display layout settings i.e. Button Position, Banner Size, Text Alignment.
• Button Title Changer: Here you can change the text of the button.

 

Upload:

Here in the Upload Section, you can upload the image and add a Button Link to it.

Step 4- Apply: Once you are done with all the changes click on the Apply button to save the changes.

Step 5- Delete Component: You can delete the component by clicking on the Delete Component button.

Step 6- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(II) – Spacer

Spacer lets you give space between the components to make them more appealing.

Step 1- Drag it to the mobile screen next to it and see how it will look in your app.

Step 2- Click on the Edit Button to set the height and color of the spacer as per your requirement.

Step 3-  Apply: Once you are done with all the changes click on the Apply button to Preview the changes.

Step 4- Delete Component: You can delete the component by clicking on the Delete Component button. (Note*: Delete Component Button is only available for Custom theme and not for pre-built themes.)

Step 5- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(III)- Announcement Bar

The announcement bar lets you announce any special offer, new arrivals, or any other special event on your mobile app.

Step 1- Drag the component to the mobile screen next to it and see what it will look like in your app.

Step 2- Clicking on the Edit button lets you modify the following things:

• Add Text or Images.
• Adjust Text Alignment and Color.
• Enable/Disable Text Link, Marquee.

Step 3- Apply: Once you are done with all the changes click on the Apply button to Preview the changes.

Step 4- Delete Component: You can delete the component by clicking on the Delete Component button. (Note*: Delete Component Button is only available for Custom theme and not for pre-built themes.)

Step 5- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(IV)- Banner Slider

The Banner Slider lets you add different banners to your app to make it look more enticing and appealing.

Step 1- You can Drag it to the mobile screen next to it and see how it will look in your app.

Step 2- When you click the ‘Edit’ button, you can easily view all its functionalities in the left side, where you can make modifications as per your requirement.

Step 3- So, after clicking on the ‘Edit’ button, you can modify the ‘Layout’ of the banner slider and ‘Upload’ desired images into it.

Layout Section:

• In the ‘Layout’ Section, you can adjust the size of banners as per your requirement.
• You can enable/disable the dots below the banner.

Upload Section:

Here you can upload banner images and set Banner width, adjust Corners, and Select Banner Ranges as per your requirement.

Step 4- Apply: Once you are done with all the changes click on the Apply button to save the changes.

Step 5- Delete: You can delete the component by clicking on the Delete Component button.

(Note*: Delete Component Button is only available for Custom theme and not for pre-built themes.)

Step 6- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(V)- Category Slider

You can categorize your products and offers using the ‘Category Slider’ component. And make it easier for shoppers to find the product they are looking for. For example, you can segment products into categories like ‘Men,’ ‘Women,’ etc.

Step 1- Drag the component to the mobile screen next to it and see what it will look like in your app.
Step 2- Edit Category Slider: Clicking on the edit button lets you edit the layout in the category slider and lets you upload an image element into it.

Step 3- When you click the edit button, you can easily view all its functionalities in the left side, which you can edit as per your requirement.

Step 4- Layout: Clicking the ‘layout section’ lets you select the ‘Category Shape’, and adjust the ‘Category Title’ and ‘Category Border’.

Step 5- Upload: In the upload section, you can upload product images. It also lets you adjust the Corner Radius and increase or decrease Range accordingly.

Step 6- Apply: Once you are done with all the changes click on the Apply button to Preview the changes.

Step 7- Delete Component: You can delete the component by clicking on the Delete Component button. (Note*: Delete Component Button is only available for Custom theme and not for pre-built themes.)

Step 8- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(VI)- Product Slider

Product slider lets you showcase your featured or top-selling products in your app in the form of a carousel.

Step 1- Drag it to the mobile screen next to it and see how it will look in your app.

Step 2- When you click the ‘Edit’ button, you can easily view all its functionalities in the left corner, where you can make modifications as per your requirement.

Step 3- So, after clicking the ‘Edit’ button, you can modify the ‘Layout’ or ‘Upload’ desired product into it. 

Layout:

Here you can adjust display layout settings i.e. Product Shape, Text Alignment, No. Of Rows.

Upload:

The Upload Section lets you adjust the number of products and link the Product Collection into it.

 

Step 4- Apply: Once you are done with all the changes click on the Apply button to Preview the changes.

Step 5- Delete: You can delete the component by clicking on the Delete Component button. (Note*: Delete Component Button is only available for Custom theme and not for pre-built themes.)

Step 6- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(VII)- 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’.

Step 1- Drag it to the mobile screen next to it and see how it will look in your app.

Step 2- When you click the ‘Edit’ button, you can easily view all its functionalities in the left corner, where you can make modifications as per your requirement.

 

Step 3- Clicking on the ‘Edit’ button lets you modify the ‘Layout’ of the banner and ‘Upload’ desired images.

 

Step 4- Layout: In the Layout Section you can adjust No. Of Rows, Category Shape, and Text Alignment. Also, you can enable/disable Header Title, Category Grid Title, and Category Border Title.

Step 5- Upload: Upload Section lets you upload the category image and links it to the relevant product.

Step 6- Apply: Once you are done with all the changes click on the Apply button to Preview the changes.

Step 7- Delete Component: You can delete the component by clicking on the Delete Component button. (Note*: Delete Component Button is only available for Custom theme and not for pre-built themes.)

Step 8- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(VIII)- 3 Product Layout

Another useful component in the app is the 3 Product Layout, here you can show one main featured item and related items on the screen. Step 1- Drag it to the mobile screen next to it and preview what it looks like.

Step 2- Click the ‘Edit’ button to change the Layout and Upload image elements.

Layout:

In the layout section, you can update:

• Select Display Options- Adjust Product Layout Shape and Text Alignment.
• 3- Product Layout Settings- Here you can enable/disable Header, Header Subtitle, Product Border, and Header Deals.

Upload:

• The upload Section lets you choose the product collection and link products.
• Header Title And Subtitle- Here you can set Header Title and Header Subtitle. 

Step 3- Apply: Once you are done with all the changes click on the Apply button to save the changes.

Step 4- Delete Component: You can delete the component by clicking on the Delete Component button.

Step 5- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(IX)- Product Grid Layout

A product grid layout lets you showcase a product collection in the form of a grid.

Step 1- Drag it to the mobile screen next to it and see how it will look in your app.

Step 2- Click on the Edit Button to change its layout or upload products.

Layout: In the layout section, you can update:

• Select Display Options: It lets you select Layout Type, Products In Row, Product Shape, and Text Alignment.
• Product Grid Settings: Here you can enable/disable Header, Header Subtitle, Header Action, Product Border, Product Title, Product Price, Special Price, and Header Deals.
• Header Title Update: Here, you can set Header Text, Header Subtitle Text, and set Header Action.

Upload: Upload Section lets you choose the product collection and link products.

Step 3- Apply: Once you are done with all the changes click on the Apply button to save the changes.

Step 4- Delete Component: You can delete the component by clicking on the Delete Component button.

Step 5- Reset: The Reset button empowers you to reset all the changes you have made in the component.

(X)- Collection slider

The collection slider lets you showcase the collection of the product.

Step 1- Drag it to the mobile screen next to it and see how it will look in your app.

Step 2- Click on the Edit Button to change its layout or upload products.

Layout: In the layout section, you can update:

• Select Display Options: Here you can manage, Layout Type(Grid, List), No. Of Products In Row, No. Of Rows, Product Shape, and Text Alignment. 
• Product Grid Settings: Here you can enable/disable Header, Header Subtitle, Header Action, Product Border, Product Title, Product Price, Special Price, and Header Deals.
• Header Title Update: You can set Header Text, Header Subtitle Text, and Set Header Action.

Upload: Upload Section lets you upload products from the collections.

Step 3- Apply: Once you are done with all the changes click on the Apply button to save the changes.

Step 4- Delete Component: You can delete the component by clicking on the Delete Component button.

Step 5- Reset: The Reset button empowers you to reset all the changes you have made in the component.

That’s it! 🤩 hope this will help you use different components and themes and customize your app in a better way.

Preview Your Mobile Apps

Congratulations on completing the first step which is the Theme Settings. 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: Open the theme settings page and click on the Preview button on the top right corner of your Screen.

Step 2- After that, a dialogue box will appear, where you need to set the Primary Language and Languages for your theme. After selecting languages click on the Save button and proceed.

 

Step 3- Post proceeding with this, you will get the QR code, which you can use to preview the app.

Step 4- If you haven’t downloaded the MageNative App yet, Download it from the left-hand side of the window.

 

Step 5: Open the installed app and click the top-left hamburger menu to open the side menu. Tap on “Live preview of your store”.

 

Step 6: Scan the QR generated in Step 3 and you will see your preview apps.

 Note: If your Preview option is disabled, then Build your theme first.

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.

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 to 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 the App Details Form

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

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

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.

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

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.

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

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

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.

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.

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

Step 3- Here, in the dialog box, you need to Fill in all the required fields and click on the ‘Save’ button to create the notification.⬇️

Step 4- Close the form and the Push Notification will be created and displayed in the following manner.⬇️

Step 5- You are now ready to send the notification to your customers. Click on the send button, and the notification will be sent to your buyers.

Step 6- If you want to make any modifications to your notification, you can edit it by clicking on the edit button. Or you can also choose to delete the notification by clicking the delete button.⬇️

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 time to your shoppers.

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

Step 1- Click on the Schedule Now button from the left menu bar.

Step 2- Then Go to the ‘Create Scheduler’ link in the right top corner of the dashboard.⬇️

Step 3- Afterward, the dialog box will appear in front of you where you need to fill out the following details:

• Status.
• Select the notification you want to schedule.
• Schedule a Timing (i.e. One time or daily) when you want to schedule that notification.
• Start date of the notification.
• The time slot when you want to shoot the notification.

After filling in all the details, click the ‘Save’ button, and your push notification will be scheduled successfully.

Step 4- You can close the dialog box by clicking the ‘Close’ button. And your scheduled notification will now appear in the following manner.⬇️

If you want to make any modifications to your notification, you can always edit it by clicking on the edit button. Or you can also choose to delete the notification by clicking the delete button.⬇️

That’s it!🤩 So start utilizing Push Notifications suitably and engage better with your customers right away.

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

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

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

• Filling in the customer code will automatically generate a Shopify code in the Text Box below it.
• Copy this Shopify Code which will be required further in the Shopify store admin panel to create a discount.
• After filling in the details, click on the Create button.

 

Step 4. After that, when you click on the ‘Create’ button, it will redirect you to your Shopify store admin panel.

• Here you need to enter the Shopify code copied previously.
• Also, fill in all the required details like type of discount, discount value, discount applicable on minimum purchase, usage limit, and active dates for discount etc.
• After Filling in all the required details, click on the “Save” button to create a discount.
• Your discount is created so you can now check the newly created discount in your MageNative app.

Step 5- Now you can see the newly created discounts in the “App only discount” section of the Magenative app.

Step 6- 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!

How to make Products available for Mobile App Builder-MageNative

• 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

• 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