User Guide to Build Your
Mobile App With Mosho Cart

How to Configure Navigation Menu?

A Navigation Menu is a list of links that helps users navigate your website or app. You can customize your Navigation Menu by adding, editing, or removing menu items. Follow these steps to configure a Navigation Menu:

• Step 1
  Navigate to “Navigation Menu”
  
  
  
  option from the sidebar menu options.
• Step 2
  Add a New Menu item by clicking on “New Menu Item.”
• Step 3
  Click on Edit icon, to Choose a Menu Type to define the characteristics of the
  menu item.
• Step 4
  Search for the desired Collection or Product.
• Step 5
  Select the Collection or Product based on your search results.
• Step 6
  Provide a name for the Navigation Menu in the designated field.
• Step 7
  Click on the “Submit” button to finalize and save the configuration.
• Step 8
  To remove a menu item, Click the “Delete” icon.
• Step 9
  Confirm the removal by clicking on the “Confirm” button.

How to Edit Header Bar?

• Step 1Click on “Customize App”
  
  
  
  option.
• Step 2Click on the Edit icon to update a Header bar section.
• Step 3After editing details, click on the Submit button to update Header bar section.

How to Configure Banner Slider?

A Banner Slider is a feature that allows you to display multiple images or Banner on your website or app.   Follow these steps to configure a Banner Slider:

• Step 1Navigate to “Customize App” option from Sidebar menu.
• Step 2Select the predefined “Banner Slider” layout option or Click on “Add” button and select the “Banner Slider” layout option within the Add New Widget sidebar.
• Step 3Click on” Banner Slider Item” button for new Banner slider item by clicking the down arrow icon.
• Step 4Provide the necessary details and confirm by clicking the “Submit” button.
• Step 5Update specific details for a Banner Slider Item by selecting the “Edit” icon
• Step 6Remove a particular Banner by clicking the “Delete” icon.
• Step 7Confirm the removal of the selected Banner Slider Item by clicking on the “Confirm” button.
• Step 8Update a specific Banner slider Layout by clicking the “Edit” icon.
• Step 9Remove the entire Banner slider Layout by clicking the “Delete” icon.
• Step 10Confirm the complete banner slider Layout removal by clicking on the “Confirm” button.

• Step 1Navigate to “Customize App” option from Sidebar menu.
• Step 2Select the predefined “Banners Slider” layout option or Click on “Add” button and select the “Banners Slider” layout option within the Add New Widget sidebar.
• Step 3Click on” Banners Slider Item” button for new banners slider item by clicking the down arrow icon.
• Step 4Provide the necessary details and confirm by clicking the “Submit” button.
• Step 5Update specific details for a Banners Slider Item by selecting the “Edit” icon
• Step 6Remove a particular Banners by clicking the “Delete” icon.
• Step 7Confirm the removal of the selected Banners Slider Item by clicking on the “Confirm” button.
• Step 8Update a specific Banners slider Layout by clicking the “Edit” icon.
• Step 9Remove the entire Banners slider Layout by clicking the “Delete” icon.
• Step 10Confirm the complete banner slider Layout removal by clicking on the “Confirm” button.

How to Configure Collection Slider?

A Collection Slider is a feature that allows you to display multiple collections of products on your website or app.  Follow these steps to configure a Collection Slider:

• Step 1
  Navigate to “Customize App”
  
  
  
  option from Sidebar menu.
• Step 2
  Select the predefined “Collection Slider” layout option or Click on “Add” button and select the “Collection Slider” layout option within the Add New Widget sidebar.
• Step 3
  Click on” Collection Slider” button for new Collection slider item by clicking the down arrow icon.
• Step 4
  Enter the necessary details and confirm by clicking the “Submit” button.
• Step 5
  Update specific details for a Collection Slider Item by selecting the “Edit” icon.
• Step 6
  Remove a particular Collection Slider by clicking the “Delete” icon.
• Step 7
  Confirm the removal of the selected Collection Slider Item by clicking on the “Confirm” button.
• Step 8
  Update a specific Collection Slider Layout using the “Edit” icon.
• Step 9
  Remove the entire Collection slider Layout by clicking the “Delete” icon.
• Step 10
  Confirm the complete Collection Slider Layout removal by clicking on the “Confirm” button.

How to Configure Collection Grid?

A Collection Grid is a feature that allows you to display a grid of products on your website or app.  Follow these steps to configure a Collection Grid:

• Step 1
  Navigate to “Customize App”
  
  
  
  option from Sidebar menu.
• Step 2
  Select the predefined “Collection Grid” layout option or Click on “Add” button and select the “Collection Grid”
  layout option within the Add New Widget sidebar.
• Step 3
  Click on” Collection Grid” button for new Collection Grid item by clicking the
  down arrow icon.
• Step 4
  Enter the necessary details and confirm by clicking the “Submit” button.
• Step 5
  Update specific details for a Collection Grid Item by selecting the “Edit” icon.
• Step 6
  Remove a particular Collection Grid by clicking the “Delete” icon.
• Step 7
  Confirm the removal of the selected Collection Grid Item by clicking on the
  “Confirm” button.
• Step 8
  Update a specific Collection Grid Layout using the “Edit” icon.
• Step 9
  Remove the entire Collection Grid Layout by clicking the “Delete” icon.
• Step 10
  Confirm the complete Collection Grid Layout removal by clicking on the
  “Confirm” button.

How to Configure Collection Section?

A collection section is feature that allows you to display a list of collection on your website or app. These steps guide you through the systematic configuration of a Collection Section with clarity and precision.

• Step 1
  Navigate to “Customize App”
  
  
  
  option from Sidebar menu.
• Step 2
  Select the predefined “Collection section” layout option or Click on “Add” button
  and select the “Collection section” layout option within the Add New Widget
  sidebar.
• Step 3
  Click on” Collection Section” button for new Collection Section item by clicking
  the down arrow icon.
• Step 4
  Enter the necessary details and confirm by clicking the “Submit” button.
• Step 5
  Update specific details for a Collection Section Item by selecting the “Edit” icon.
• Step 6
  Remove a particular Collection Section by clicking the “Delete” icon.
• Step 7
  Confirm the removal of the selected Collection Section Item by clicking on the
  “Confirm” button.
• Step 8
  Update a specific Collection Section Layout using the “Edit” icon.
• Step 9
  Remove the entire Collection Section Layout by clicking the “Delete” icon.
• Step 10
  Confirm the complete Collection Section Layout removal by clicking on the
  “Confirm” button.

How to Configure Product Slider?

A product slider is a way of showing multiple products on a website or on a mobile app in a slideshow format. These steps show you how to set up a Product Slider in a clear and exact way.

• Step 1
  Navigate to “Customize App”
  
  
  
  option from Sidebar menu.
• Step 2
  Select the predefined “Product slider” layout option or Click on “Add” button and
  select the “Product slider” layout option within the Add New Widget
  sidebar.
• Step 3
  Click on” Product Slider” button for new Product Slider item by clicking the down
  arrow icon.
• Step 4
  Enter the necessary details and confirm by clicking the “Submit” button.
• Step 5
  Update specific details for a Product Slider Item by selecting the “Edit” icon.
• Step 6
  Remove a particular Product Slider by clicking the “Delete” icon.
• Step 7
  Confirm the removal of the selected Product Slider Item by clicking on the
  “Confirm” button.
• Step 8
  Update a specific Product Slider Layout using the “Edit” icon.
• Step 9
  Remove the entire Product Slider Layout by clicking the “Delete” icon.
• Step 10
  Confirm the complete Product Slider Layout removal by clicking on the “Confirm” button.

How to Configure a Small Standalone Banner?

• Step 1
  Navigate to “Customize App”
  
  
  
  option from Sidebar menu.
• Step 2
  Select the predefined “Small Standalone banner” option or Click on “Add” button and select the “Small Standalone
  banner” layout option within the Add New
  Widget sidebar.
• Step 3
  Update Small Standalone Banner Layout by clicking on the “Edit” icon.
• Step 4
  Enter the necessary details and confirm by clicking the “Submit” button for the
  Small Standalone Banner Layout.
• Step 5
  Remove the Small Standalone Banner Layout by clicking the “Delete” icon.
• Step 6
  Confirm the removal of the Small Standalone Banner Layout by clicking the
  “Confirm” button.

How to Configure a Large Standalone Banner?

• Step 1
  Navigate to “Customize App”
  
  
  
  option from Sidebar menu.
• Step 2
  Select the predefined “Large Standalone banner” option or Click on “Add” button
  and select the “Large Standalone banner” layout option within the Add New
  Widget sidebar.
• Step 3
  Update Large Standalone Banner Layout by clicking on the “Edit” icon.
• Step 4
  Enter the necessary details and confirm by clicking the “Submit” button for the
  Large Standalone Banner Layout.
• Step 5
  Remove the Large Standalone Banner Layout by clicking the “Delete” icon.
• Step 6
  Confirm the removal of the Large Standalone Banner Layout by clicking the “Confirm” button.

How to configure Theme Color Option?

The steps below guide you through configuring a Theme Color option.

• Step 1
  Navigate to “Theme Settings”
  
  
  
  option from the sidebar menu.
• Step 2
  Select a suitable Theme option or Select a custom color from the “Custom Theme” option.
• Step 3
  Click on “Save” button to finalize and save the configuration.
• Step 4
  Select “Default Theme” option to establish it as the default theme for your
  application.

How to configure Icons setup option?

The steps below guide you through configuring an Icon setup option.

• Step 1
  Navigate to “Theme Settings”
  
  
  
  option from the sidebar menu.
• Step 2
  Select an Icon Set option from the “Icons Setup” option.
• Step 3
  Click on “Save” button to finalize and save the configuration.
• Step 4
  Select “Default Icon Set” option to establish it as the default icon for your
  application.

How can Push Notifications be sent to users?

• Step 1
  Navigate to “Push Notification”
  
  
  
  option from Sidebar menu.
• Step 2
  Enter “Notification Title” and “Notification Description” details and click on the
  “Send Alerts” button to notify users.

• NOTES:

  • 1. Users will only receive notifications if their notification settings are appropriately configured.
  • 2. Users who have activated the “Do Not Disturb” (DND) mode on their mobile devices will not receive push notifications.

• Additional Notes for Android users:

  If you encounter issues with receiving notifications on your Android device. Follow these steps to enable app notifications:

  • 1.
    Open the Settings app on your Android phone.
  • 2.
    Navigate to the Notification Control Center menu.
  • 3.
    Under “Most recent,” to find more apps, in the dropdown menu, select all apps. Alternatively, select the “App Notification” option to view a list of all apps.
  • 4.
    Locate and tap on the Moshocart app.
  • 5.
    Toggle the switch to turn on “Allow Notifications” for the app.
  • 6.
    Customize your notification preferences, such as those for the Lock screen,
    Banner/Floating Notification, and Badges/Bubble.

  These steps provide an alternative set of instructions for users facing notification issues on their Android devices.

How to Reset My Password?

• Step 1Login into Mosho Cart Bridge App.
• Step 2Click on the downward arrow located on the right side of the header.
• Step 3Click on the “Reset Password” option.
• Step 4Enter your email address.
• Step 5Click on the “Send Reset Link” button.
  (Ensure that the provided email address matches your Shopify account email).

How to check Preview of your mobile App?

After configuring relevant details on the MoshoCart app, please follow below mentioned steps to check the preview of your mobile app.

• Step 1Navigate to the “ Dashboard”
  
  
  
  option from the Sidebar menu.
• Step 2Preview the app by selecting the “Preview App” button located in the header bar.

How can I configure Color-Swatch Images?

• Step 1  Display Product Variants:

  Users can display product variants in two different ways:

  • 1.Using variant names like Red, Blue, Pink, etc. (Default behavior of Shopify)
  • 2.Using image previews of the product variant colors.

• Step 2  Configuring Product Variants Using Images:

  To configure product variants using image previews, follow these steps:

  • 1.Create an image for each variant.
  • 2.Preferred image size: 80×80 or 100×100 pixels.
  • 3.Rename the images according to Shopify’s standards.
  • 4.Add “swatch” before the color name in all image names.
  • 5.Example: swatch-red.png or swatch_red.png.
  • 6.Upload all the renamed images to your Shopify files folder.
  • 7.Go to your Bridge App.
  • 8.Navigate to the “App Features” option.
  • 9.Enable the button for “Color Swatches”.
  • 10.Select the Image Extension.
    [Please use the same image file Extension for all images]
  • 11.Restart your Moshocart mobile app.
  • 12.Navigate to the product’s PDP (Product Detail Page).
  • 13.Check that the Color variant options are displayed with the configured images.