User Guide

You can select from different themes, colors, and fonts to create an attractive and professional-looking homepage. You can also add your logo and banner images that showcase your brand. Mosho Cart offers a user-friendly interface that enables you to make changes quickly and easily without needing technical expertise. Once you’ve personalized your homepage, your customers will know they are in the right place and can navigate your app with ease. Personalizing your app ensures a consistent and memorable experience for your customers, which can lead to increased retention and loyalty. This step by step user guide helps you in building your home screen, navigation menus with ease.

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.
step by step user guide navigation menu

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.
step by step user guide header edit

How to Configure Banner Slider?

A Banners Slider is a feature that allows you to display multiple images or banners on your website or app.  Follow these steps to configure a Banners 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” Banners Slider Item” button for new banners slider item by clicking the
    down arrow icon.
  • Step 4
    Provide the necessary details and confirm by clicking the “Submit” button.
  • Step 5
    Update specific details for a Banners Slider Item by selecting the “Edit” icon
  • Step 6
    Remove a particular Banners by clicking the “Delete” icon.
  • Step 7
    Confirm the removal of the selected Banners Slider Item by clicking on the
    “Confirm” button.
  • Step 8
    Update a specific Banners slider Layout by clicking the “Edit” icon.
  • Step 9
    Remove the entire Banners slider Layout by clicking the “Delete” icon.
  • Step 10
    Confirm the complete banner slider Layout removal by clicking on the
    “Confirm” button.
step by step user guide banner slider

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.
step by step user guide collection slider

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.
step by step user guide collection grid

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.
step by step user guide collection section

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.
step by step user guide product slider

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.
step by step user guide Small-Standalone-Banner

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

step by step user guide push notification

How can I configure Color-Swatch Images?

  • Step 1  Display Product Variants:

    Users can display product variants in two different ways:

    • 1.
      Create an image for each variant.
    • 2.
      Preferred image size: 80×80 or 100×100 pixels.
  • 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.

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.
step by step user guide preview app

Ready for More? Get the Mobile App Now

TRY NOW