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

    bin/magento cache:clean
php bin/magento cache:flush

2. Change website to your Mangeto site

  1. 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
  2. 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. 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.

4. 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'
    },
  ],

5. 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",
},

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

7. 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',