1. Install Mstore plugin

  1. Copy Mstore plugin folder to app/code folder
  2. Run this command in website directory: php bin/magento setup:upgrade Clear the cache on Magento after upgrade

    php bin/magento cache:flush

2. Change website to your Mangeto site

  1. Open the Setup tab of the Cebuilder, and change to your Magento URL site.

  2. How to get the Integration tokens, go to System > Extensions > Integrations and Add New Integration, please follow this guide - https://devdocs.magento.com/guides/v2.3/get-started/authentication/gs-authentication-token.html

  3. If you don't want to use the CeBuilder to update the URL, open the common/AppConfig.json and change the url and accessToken under the Magento section

  "Magento": {
    "url": "http://magento-demo.mstore.io",
    "accessToken": "oibwhn2t9bx88pp7ivvb07td8nxvnr5y"
  },

3. Customize the homepage layout by CeBuilder

  1. Open the CeBuilder and go to Customization tab and upload the App Icon, Splash Screen, Logo Image, Logo with Text, Logo Loading, or the Main Color of the app
  2. Change the Home Layout by select the Layout type and map to the Category builder customize

To test our app demo website, you can copy the content from App/Common/AppConfigTheme/*.json and override the content of AppConfig.json

4. Change the HomePage horizontal layout manually

Open src/common/appConfig.json then you can change the horizontal layout by these

  • name: the label display for horizontal layout.
  • tag: the tag id for the layout category: the category id for the layout (we can filter the content for both tag and category)
  • image: the banner image to show on top when view all the post
  • layout: Support varies layout UI:

    1. Banner: Constants.Layout.miniBanner
    2. threeColumn: display the layout as three column view
    3. twoColumn: display the layout as two column view
    4. simple: display the layout as two list view
    5. card: Constants.Layout.card
    6. circleCategory: display the category as circle UI
    7. bannerImage: display as the banner image view
    8. bannerHigh: display as the high banner
    9. bannerSlider: display as the slider banner

Please refer to the theme tutorial to explore more about the example config.

5. Update Left Menu side

Open common/config.js - at Step 4, update the Local / Menuor using the ListApp Manager to change the menu from the Wordpress plugin

menu: [
    {
      route: 'home',                    // point to the router Navigation/index.js
      name: Languages.listing,
      icon: 'home'
    },
    {
      route: 'customPage',
      params: {
        id: 19936,                       // replace by to your page-id from Wordpress site
        title: Languages.aboutus,
        url: null
      },    
      name: Languages.aboutus,
      icon: 'assignment'
    },
    {
      route: 'customPage',
      params: {
        id: null,
        title: Languages.contact, 
        url: 'https://inspireui.com/about'  // replace by any URL that you would like to show on the page
      },
      name: Languages.contact,
      icon: 'mail'
    },
    {
      route: 'setting',
      name: Languages.setting,
      icon: 'settings'
    },
    {
      route: 'login',
      name: Languages.login,
      icon: 'User'
    },
  ],

6. Change the app name, app icon and splash screent

Open app.json and replace these values:

"name": "MagentoApp",
....
"icon": "./assets/icons/app-icon.png",
"loading": {
    "icon": "./assets/icons/loading.png",
},
"splash": {
      "image": "./assets/icons/loading.png",
},

7. Generate the build file for delivering

  1. Open the CeBuilder and go to the Delivery tab and input the iOS bundle or Android package name.
  2. Then follow the step from from the termial guide. builder delivery
  • Please note that you need the Mac OS to upload the ipa file to the Appstore
  • Delivery to the Google Play store will be cost 25usd/life time
  • Delivery to the Appstore will cost 99usd/year

8. Manual change the Logo, Icons and Splash screent

Open src/common/config.js to map your news image Logo and icon file.

  LogoImage: require('@images/new_logo.png'),
  LogoWithText: require('@images/logo_with_text.png'),
  LogoLoading: require('@images/logo.png'),

If you need to change other image files please update src/common/Images.js

9. Customize the Components Color

Open /src/Common/Color.js file in project.

You could change most of components color in Color section.

For example, you could change the color of Tabbar to any color you like, then reload the app to see the effect.

//Product tabs
TabActive: '#00BCD4',
TabDeActive: 'white',
TabActiveText: '#333',
TabText: '#333',
BuyNowButton: '#00BCD4',