This section will guide how to change the app logo, icons, splash screens

Change the logo and Icons, splash screen

Open src/common/config.jsto 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


Change the default Home layout

It's possible to customize the app homepage screen to show the default layout as your wish, open src/container/Home/index.js

img


Change the HomePage horizontal layout

Open src/common/Config.js then you can change the horizontal layout with quite flexible data config.

  • 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)
  • layout: Support varies layout UI:

    • Banner: Constants.Layout.miniBanner
    • Three column view: Constants.Layout.threeColumn
    • Two column view: Constants.Layout.twoColumn
    • Two column with higher UI: Constants.Layout.twoColumnHigh
    • Card view: Constants.Layout.car
  • image: the banner image to show on top when view all the post Let me explain more about this config

Example: showing the content as Banner View

{
    tag: 273, 
    paging: true, 
    layout: Constants.Layout.miniBanner
}

This mean show all recent post which have tag id:273, show as the per page with sticky support via paging:true, this is show as the miniBanner (use for banner only so we will not display the name here)

img

Example: showing the content as 3 column view

{
	name: "Feature Products", 
	category: 21 , 
	image: Images.Banner.Feature, 
	layout: Constants.Layout.threeColumn
},

Show the category id:21 with label 'feature products'

Show the banner when click show all: Images.Banner.Feature

The horizon layout is show as three column by support Constants.Layout.threeColumn

img

Show the content as three columns view


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

Change the logo and Icons

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 locate to src/common/Images.js

--

Change the splash screen

To change splash screen on Expo version try to edit the app.json

To change splash screen on Pro version, you can refer to this guide

How to update to new 4 Category layout

img

Open common/config.js file and replace the Categoriesayout value with one of the following:

CategoriesLayout: {
    card: 'card',
    sideMenu: 'side-menu',
    column: 'column',
    topMenu: 'top-menu'
}
  1. card: default UI from the original Mstore app, when clicking to the card view it will display the detailed product with other flexible Filter.
  2. sideMenu: display the category selection from the left side.
  3. topMenu: display the tab categories item on top.
  4. column: display the list category by list

How to config to support Affiliate app.

Since v3.8.0 there is a new powerful feature that supports for the Affiliate website which doesn’t require the checkout screens, open the common/config.js file and update the enable option to true

Affiliate: { enable: false }

By this update, when the user taps the Buy Now button, it will open Webview and go to the Affiliate link to process the checkout via another website, the Order screen will also be hidden by this config.