Change website to your Opencart site

  1. Open the Setup tab of the Cebuilder, and change to your Opencart URL site.
  2. Install Mstore Api extension. Open admin panel, then click Extensions->Installer and upload

opencart api

Api document: -

  1. If you don't want to use the CeBuilder to update the URL, open the common/AppConfig.json and change the url under the Opencart section
  "Opencart": {
    "url": ""

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

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,
        url: ''  // replace by any URL that you would like to show on the page
      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": "OpencartApp",
"icon": "./assets/icons/app-icon.png",
"loading": {
    "icon": "./assets/icons/loading.png",
"splash": {
      "image": "./assets/icons/loading.png",

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

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

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