Skip to main content

Customization Setup

Country Filter

To change the country filter, follow the steps below-

  • If you want your country only in country choosing dialog which we saw in login, registration and forget password page, you have to set your default country first from admin panel Business Setup section. Then open <project>src/component/CustomPhoneInput.js file and search onlyCountries Now add a parameter with value like this: onlyCountries={[defaultCountry]}

  • If you want to disable the country choosing dialog then just change disableDropdown="false" to disableDropdown="true".

tip

Recommended tutorial is below 👇

Add New Local Language

To add a new language, follow the steps below-

  • Go to project /src/language and press the right button on the language folder and create a new file and name it with your language code (.js). For example if your language is Bengali then you have to name your file as bn.js. You have to name it with proper and valid language code otherwise app won’t work. For getting language and country code you can visit this url: https://docs.oracle.com/cd/E13214_01/wli/docs92/xref/xqisocodes.html

  • Copy all data from en.js and paste it in your created file.

  • Translate all English text placed here after colon(:) to your local language. Their texts are in key-value format. You have to translate the value only, not the key , otherwise it won’t work. For example: “home”: “Home” -> “home”: “বাড়ি”*

  • Import your language file i18n.js which is placed in the same folder.after that in i18n.js file (resources object) add your language as like other.

  • You can set initial language by following way I18n.js file set lng: “your initial language” and set fallbackLng:”your initial language”.

  • Open src/components/header/top-navbar/language/languageLists.js file and add one more object under the languageLists array with your languageCode, languageName, countryCode, countryFlag. Again must remember that your language code and country code should valid otherwise it won’t work. In countryFlag you have to import countryFlag with correct path.

/src/language?/i18n.js
const resources = {
en: {
translation: english,
},
bn: {
translation: bengali,
},
ar: {
translation: arabic,
},
}

i18n.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
lng: 'en',

fallbackLng: 'en',
interpolation: {
escapeValue: false,
},
})
tip

Recommended tutorials are below 👇

Change App color

To change the app color, follow the steps below-

  • Open <project>/src/theme/light-theme-options.js file and set preferred primary colors for light themes.
  • In the same way open <project>/src/theme/dark-theme-options.js file and set preferred primary, accent and etc. colors for dark theme.
tip

Recommended tutorial is below 👇

Change App Font

To change website font you have to go to <project>src/theme/base-theme-options.then line 299 fontFamily: '"Signika Negative", "sans-serif"', replace fontFamily. Path: project/src/theme/base-theme-options Example : fontFamily:”your font family”