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 Mobile App Builder For Shopify 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.

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 themes 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 requirements.

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 themes 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 requirements.

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

Say goodbye to the tedious task of repeatedly filling in details just to get a quick preview of your app. Now, experience the magic by adding a component and instantly diving into the exhilarating world of app previews! No more waiting – just one click, and you’re in for an electrifying preview adventure!

Follow The Steps Below To Preview Your App

• Choose the theme of your choice, such as Predefined or Custom.
• For a Predefined theme, click the Edit button to fill in the data in the app components.

As you fill in the data for the components, simply click the Preview button and follow the steps to preview the app.

• In the case of Custom Theme, choose the components of your choice by dragging and dropping.
• As you choose the components, click on the edit button to fill in the data in the component.

• After adding and filling in the components, click the Preview button to directly preview the app by following the steps.
• If you ever get stuck designing your app’s home page, connect with us by clicking on the Chat icon in the bottom right corner. Alternatively, you can reach us through WhatsApp at +91 6393 417 500.

Build Mobile App for your Shopify Store

Note: We suggest filling in the data in the ‘Brand it your way’ section as well to match your brand’s identity and publish your app on the Play/App Store.

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 timing 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.⬇️

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.

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. Now you can see the generated code in the box below.

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.

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

Are you ready to unlock the extraordinary potential of Augmented Reality (AR) and transform your mobile app into an immersive experience? 

With AR adoption skyrocketing, and reaching an estimated 1.73 billion users by 2024, incorporating AR into your app can be a game-changer. 

Not only does it capture users’ attention, but it also boosts customer engagement by up to 300% and drives conversion rates by 94%. Discover how integrating AR into your mobile app can revolutionize the way you interact with your audience, elevate brand experiences, and propel your business ahead of the competition.

So, unlock the potential of AR in your Shopify mobile app with just a few easy steps.

Step 1- First, log in to the MageNative app panel and then click on the “Feature Settings” link located in the left menu bar.

Step 2- To proceed, navigate to the ‘Categories’ tab and select the ‘Feature’ option from the menu bar.

Step 3- Here, you’ll find the AR feature listed on the page, just go and click on the ‘Enable’ button to activate the feature in your app.

Upon successfully enabling the feature in your application, you will gain the ability to view products in a 3D model format. However, it is essential to note that for optimal functionality, please ensure you upload the images in the .usdz or .glb format only from the Shopify admin panel. 

Now, Let’s proceed to explore the process of uploading 3D/AR Models from the Shopify admin interface.

Step 4 – After accessing the Shopify admin panel, navigate to the left menu bar and click the ‘Products’ link from the left menu bar.

Step 5- Now, select the desired product you wish to showcase in a 3D model/ Augmented Reality (AR) format. Let’s suppose you have selected ‘Table Lamp’ from the product list. From here, you need to upload the image in .usdz or .glb format.

Step 6- After adding .glb and .usdz files from the Shopify admin you can now view those products in 3D/AR format: 

• Go to your mobile app:
• Search your mobile app for the product(Table Lamp) you want to view in 3D/AR format. 

Step 7- Products enabled with 3D/AR features are marked with a 3D/AR symbol.

Step 8- You are now able to observe the chosen product in a three-dimensional/augmented reality (3D/AR) format. With your mobile camera, position the product wherever you desire and immerse yourself in an unforgettable experience.

That’s it!!🤩 You’re all now set. Get ready to blow minds and surpass expectations with AR integration in your Shopify mobile app. The future of user engagement and brand success awaits you!

The Product Listing Page (often referred to as PLPs or category landing pages) streamlines the process for customers to quickly browse and find products they wish to purchase. As a result, it is important for the page to facilitate easy product discovery and engagement, while also reducing the time to make a purchase.
A top-notch Product Listing Page (PLP) offers user-friendly filtering and sorting features, to help customers in finding their desired items. On this page, customers can easily access crucial product information:

1. Product Title
2. Product images
3. Product descriptions
4. Pricing details
5. Star ratings
6. Review count

This information empowers users to take actions easily such as adding to their wish list, making comparisons, or making a purchase effortlessly.

1. In the admin panel, on the side menu bar click on App Studio.

2. In the drop-down menu in the side menu bar click on the Product Listing Page.

3. Now, you can choose how you want to view your page:

A. Grid: Elements are organized in rows and columns, creating a grid where customers can easily browse and compare multiple products at once.

B. List: This layout is suitable for showcasing products one by one, and users scroll horizontally to view more options.

4. Now, choose how you want your image to in the grid view or line view should look like:
A. Fill: The image will crop to fill the frame.
B. Fit: The width of an image in relation to its height.
C. Square: The width and height are the same.

5.  Now, you can adjust corners of the image you have uploaded to make the corners look curved.

6. Product Listing Show/Hide Setting: You can hide or show, Enable/Disable the following categories on the Product Listing Page.

A. Product Border: This gives the product’s border a visual distinction, provides alignment, and highlights the product border.
B. Product Description: This provides product information and gives clarity about the full description of the product.
C. Discounted Price: Show the comparison between the actual price and the selling price.
D. Add to Bag Button: You can either add the button to this or only a tag to it.
E. Vendor Name: You can hide or unhide the seller’s name.

That’s it !🤩 Now Incorporate these user-friendly customization options for your Product Listing Page through the admin panel, ensuring a seamless and visually appealing shopping experience that not only captivates your customers but also accelerates their journey from product discovery to effortless purchase.

The Navigation Menu section allows you to personalize your menu by incorporating categories and subcategories, assigning names according to your preference.

MageNative enables you to customize your Side Menu and Bottom Navigation with simple steps.

A side menu, also known as a navigation drawer or hamburger menu plays an important role in overall app navigation. Through the Side Menu navigation, users can directly access their desired category, manage their account, choose a country, select a language, explore promotions and marketing, and engage in multilevel navigation.

How to edit the menu

1. To edit the menu, open the MageNative admin panel and locate the ‘App Studio’ in the left panel.

2. Now Click on Navigation Settings to edit your Side Navigation.

3. Now Choose Side Navigation

4. By default we show main menu, in order to change you can add a card or edit the current menu as well.

5. You can also choose the icons from our icon library or even upload the icon that suits the collection.

6. As you finish the changes, click on Done and Save the changes. And Yes! Your Newly built Side menu is ready to preview.

Thank you for choosing MageNative. We wish you success in creating your Side Navigation!

Welcome to the MageNative Admin Panel! This document will guide you through the process of creating custom landing pages for your app. Please follow the steps below to get started:

Step 1: Navigate to the MageNative Admin Panel.

Step 2: On the left-hand side, you will find the “App Studio” option. Click on it, and then select “Custom Pages”.

Step 3: Within the “Custom Pages” section, you can easily create your custom pages. Simply drag and drop the desired blocks to the right side of the interface. Configure each component to meet your specific design requirements.

Step 4: After you have customized the content on your Custom Pages, proceed to the “Navigation” section. Click on “Enable Tab View.”

Step 5: Within the “Top Bar Navigation” settings, you can set the number of tabs you want, with a minimum of 2 and a maximum of 10.

Step 6: Name each tab as per your page’s needs and link them to the custom pages you’ve created. This will allow your users to access these custom pages via the newly added tabs.

Step 7: In addition, you have the option to enable or disable the default landing page. Under the “Tabs” section, you can select the default page. Once enabled, this page will be the first one users see when they open the app.

These steps should help you create and configure multiple landing pages tailored to your specific needs. Should you have any questions or need further assistance, please do not hesitate to contact our support team. We are here to assist you in enhancing your app’s user experience.

Thank you for choosing MageNative. We wish you success in creating your custom landing pages!

Welcome To The Analytics Overview Section

In this user guide, we’ll walk you through the Analytics Overview section of the MageNative App. Here, you’ll find valuable insights into your mobile app’s performance and user engagement. We’ll explain key terms and how to navigate this section effectively.

1. App Revenue:

Mobile app revenue refers to the total income generated by your app over a specific time period. Analyzing app revenue is essential to understanding your app’s financial performance and can help you make informed decisions about monetization strategies.

2. Active Users:

The number of users who regularly engage with your app. It’s a key metric for assessing user engagement and app popularity. By understanding your active user base, you can tailor your app’s features and content to meet their needs and preferences.

Sessions:

A session in mobile app analytics refers to a single user interaction with your app, starting when the app is launched and ending when the user exits. Monitoring sessions help you gauge user engagement and app usage.

Retention Rate:

Retention rate measures the percentage of users who continue to use your app over a specified period. It’s a key indicator of user satisfaction and app stickiness. High retention rates indicate that users find value in your app and are likely to return.

Choose Range:

It allows you to select a specific time period for which you want to view the analytics data. You can choose from various pre-defined ranges:
Today
Yesterday
This Week
Last Week
This Month
Last Month

6. Mobile App Revenue:

It’s a crucial metric that reflects the financial performance of your mobile application. It encompasses various components, with “sales” and “orders” being two of the most vital aspects. Let’s dive into what each of these terms means:
Sales: This represents the total sales generated through your mobile app over a specific period, typically measured in days, weeks, or months. It’s the sum of all transactions, including purchases, subscriptions, and more.
Orders: The number of orders placed by app users.

7. Order Id:

Each order is assigned a unique identification number for easy reference.

8. Avg. Order Value:

The average value of each order, is calculated by dividing the total sales by the number of orders.

9. Total App Install:

The total count of app installations.

10. App Activity:

The App Activity Card employs a heatmap to visually represent the total count of sessions, both by day and by hour, that occurred within your app during the selected time frame. This heatmap employs varying shades to convey information: darker colors indicate hours with a high number of sessions (high app activity), while lighter colors represent hours with fewer sessions (low app activity).

11. Page Analytics:

This section provides insights into user interactions with different app pages. It includes the following:
Home Page: Data related to the home page of your app.
Category Page: Information about category-specific pages.
Listing Page: Insights into product listing pages.
Product Details Page: Information about individual product pages.
Cart Page: Data related to the shopping cart, including items added and removed.

12. Push Notifications:

This section covers data on the push notifications sent to app users. It includes:
Sent: The number of push notifications sent.
Open: How many users opened the notifications.
Receive: The number of notifications received by users.

User Guide: MageNative App Customer Acquisition Analytics

Welcome to the Customer Acquisition section of the MageNative App’s Analytics. This guide will help you understand and make the most of the key metrics and terms in this section, enabling you to acquire and retain customers effectively.

1. Overview of Customer Acquisition Analytics

The Customer Acquisition Analytics section in MageNative helps you measure and understand the effectiveness of your efforts in attracting and retaining customers for your mobile apps. It provides insights into user behavior and key performance indicators that can help you refine your acquisition strategies.

2. Accessing Customer Acquisition Metrics

To access the Customer Acquisition Analytics in the MageNative App, follow these steps:

• Log in to your Shopify.
• Open the MageNative App in your Shopify admin.
• From the side menu, tap or click on “Analytics.”
• In the Analytics section, select “Customer Acquisition.”
• You will then be presented with various metrics related to customer acquisition.

3. Active Users

Definition: Active Users refers to the number of users who have interacted with your app within a specified time frame. This metric helps you understand how many users are engaged with your app and can be potential customers.

Use: Monitor changes in active user numbers to gauge the impact of marketing campaigns or app updates. Higher active user counts often lead to increased sales.

4. App Open Rate

Definition: App Open Rate is the percentage of users who open your app after installing it. It’s a measure of user engagement and the appeal of your app.

Use: A high app open rate indicates that users find your app valuable and are likely to make purchases. A low open rate may indicate the need for improvements to the app’s user experience.

5. Source To Open

Definition: Source To Open represents the various sources or channels used by users to open your app. This metric can include sources like Product Share, Product Search Deep Link, Deep Link, Push Notification, and others. It provides insights into which channels are most effective in driving app engagement.

Use: Analyze the Source To Open data to understand which acquisition sources or channels are driving user engagement with your app. This information can help you allocate resources effectively to the most successful channels and optimize your marketing strategies.

6. Time To First Purchase

Definition: Time To First Purchase is the time elapsed from when a user installs the app to when they make their first purchase. It’s an essential metric for assessing the onboarding process and conversion rate.

Use: A shorter time to first purchase is usually a positive sign, indicating that users quickly see the value in your products. Focus on improving user onboarding to reduce this time and increase sales.

7. App Installed

Definition: App Installed indicates the number of users who have successfully installed your app.

Use: Tracking app installations is essential for evaluating the reach of your acquisition efforts. You can also use this data to measure the effectiveness of different marketing channels.

8. Uninstalled Users

Definition: Uninstalled Users refers to the number of users who have uninstalled your app after previously installing it.

Use: Analyze this metric to identify why users uninstall your app. It can provide valuable insights into areas for improvement in your app’s user experience and features.

9. App Sign Up User

Definition: App Sign Up User measures the number of users who sign up for an account within your app.

Use: Tracking app sign-up users can help you understand the effectiveness of your onboarding process and encourage users to create accounts, increasing the likelihood of repeat purchases.

By utilizing these customer acquisition metrics within the MageNative App, you can make data-driven decisions to enhance your customer acquisition strategies and ultimately drive the success of your mobile apps. These metrics will help you to identify areas for improvement and optimize your marketing and app performance for sustainable growth.

User Guide: MageNative App Customer Journey Analytics

Welcome to the Customer Journey section of the MageNative App’s Analytics. This guide will help you understand and make the most of the key metrics and terms in this section, enabling you to analyze and optimize the customer journey through your mobile apps.

1. Overview of Customer Journey Analytics

The Customer Journey Analytics section in MageNative provides insights into how customers navigate through your mobile app and interact with your products. Understanding the customer journey is crucial for optimizing the user experience and increasing conversions.

2. Accessing Customer Journey Metrics

To access the Customer Journey Analytics in the MageNative App, follow these steps:

• Log in to your Shopify.
• Open the MageNative App in your Shopify admin.
• From the main menu, tap or click on “Analytics.”
• In the Analytics section, select “Customer Journey.”
• You will then be presented with various metrics related to the customer journey.

3. Conversion Funnel

The Conversion Funnel metrics represent the steps users take in the journey from initially browsing your mobile app to making a purchase. It helps you identify where users drop off and provide insights into potential areas for improvement.

3.1 Session Start

Definition: Session Start represents the number of sessions initiated by users in your app. This is the starting point of the customer journey.

Use: Monitor session starts to understand the overall app engagement. A higher number of session starts indicates active app usage, while a drop in this metric may require attention.

3.2 Product Viewed

Definition: Product Viewed measures the number of product pages viewed by users. This indicates their engagement with your products.

Use: Tracking product views helps you understand which products are attracting the most interest. Optimize product pages or marketing efforts for the most viewed items to drive conversions.

3.3 Add to Cart

Definition: Add to Cart indicates the number of times users added products to their shopping carts. This is a crucial step towards a potential purchase.

Use: Monitoring the Add to Cart metric helps identify how effective your product listings are at converting interest into actions. Optimize the cart page and checkout process to minimize cart abandonment.

3.4 Order Created

Definition: Order Created measures the number of completed purchases. It signifies the final step in the conversion funnel.

Use: Tracking order creation helps you gauge the overall success of your app in driving sales. Use this data to assess the effectiveness of your sales strategies and to identify popular products or marketing channels.

4. Most Product Viewed

Definition: Most Product Viewed indicates the products that have received the highest number of views by app users.

Use: Identify the most viewed products to understand customer preferences. Use this information to feature these products prominently and potentially cross-sell or upsell related items.

5. Most Sold Product

Definition: Most Sold Product highlights the product that has been purchased the most.

Use: Knowing the most sold product helps you emphasize it in your marketing efforts and product recommendations. Consider bundling it with other related products for increased sales.

6. Most Search Keyword

Definition: Most Search Keyword identifies the keyword or search term that users have entered most frequently within the app’s search function.

Use: Recognize popular search keywords to refine your product listings and SEO. Ensure that the products corresponding to these keywords are easily accessible to users.

7. Most Wishlist Product

Definition: Most Wishlist Product indicates the item that has been added to wishlists the most by app users.

Use: Promote the most wish-listed product as a featured item. Encourage users to convert their interest into purchases by offering special deals or discounts.

By utilizing the Customer Journey Analytics within the MageNative App, you can gain valuable insights into how users interact with your mobile apps and products. These insights can guide you in improving the customer experience, optimizing your product offerings, and ultimately increasing sales and customer satisfaction.