App Customization

Now that you have successfully installed all dependencies of the app, it's time to customize and modify it using any code editor to meet your branding requirements.

To customize the app, open the common folder:

hubay -> src -> app -> common

1. How to change colors ?

In the Colors.js you can define your app colors. AppColor is the main color of the app and other colors are used within different components in the app. You can change the color using rgba color codes as follows:

  AppColor:'rgba(60,160,220,1)',
  Gray:'rgba(178,178,178,1)',
  Blue:'rgba(70,120,172,1)',
  DarkGray:'rgba(64,64,64,1)',
  LightGray:'rgba(207,206,204,0.5)',
  Red:'rgba(208,83,67,1)',
  Green:'rgba(55,203,123,1)',
  DarkBlue:'rgba(17,107,213,1)'

For example: to change the AppColor, simply change numbers between ( ) with your desired rgba color code : (60,160,220,1)

2. What to change in the configuration file ?

In the Config.js you can define baserUrl, AccessToken, promotion slider, and main brands:

baseURL: defines your Magento2 website URL,
AccessToken: will enable to integrate your site with hubay mobile app,
Promotion slider: shows home page sliders and required URLs,
Brands: shows list of brands and their URLs.

How to change the baseURL ?

Add your website URL in baseUrl and also the AccessToken that can be generated from your Magento2 admin dashboard.

MagentoConfig:{
    baseUrl:"https://www.hubay.net/magento2",
    AccessToken:'p346j6lk3j9h3gegwwjmfeq2c1jqq9gy'
  }

You can generate the AccessToken from admin dashboard of your Magento2 website. To do so follow these steps:

Login to your Magento2 admin dashboard.
Go to System -> Extensions -> Integrations -> Add New Integration
Add details in the Integration Info and then grant access to all in the API

Then the site will generate all api details that can be used in Hubay app integration.

How to change/add promotion sliders:

Add your banner image url and categoryID for your slider as follows.

 Promotions : [
    {
      image:'http://hubay.net/banner1.jpg',
      categoryId: 42
    },
    {
      image:'http://hubay.net/banner3.jpg',
      categoryId: 41
    },
    {
      image:'http://hubay.net/banner2.jpg',
      categoryId: 37
    }
  ],

To remove promotion sliders, simply remove the object including { }.

How to change/add brands:

Add url and image for your Brands as follows.

  Brands : [
    {
      url:'https://apple.com',
      image:'https://hubay.net/img/apple.png'
    },
    {
      url:'https://www.lego.com',
      image:'https://hubay.net/img/lego.png'
    },
    {
      url:'https://www.samsung.com',
      image:'https://hubay.net/img/saamsung.png'
    },
    {
      url:'https://www.next.co.uk',
      image:'https://hubay.net/img/next.png'
    },
    {
      url:'http://www.hm.com/',
      image:'https://hubay.net/img/hnm.png'
    },
    {
      url:'http://www.adidas.com/',
      image:'https://hubay.net/img/adidas.png'
    }
  ]

To remove brands , simply remove the object including { }.

3. Icons:

All icons used in the app are defined in the Icons.js file. Please ensure replacing icons with same names given below:

  Drawer : require('@assets/icons/ic_drawer.png'),
  Logo : require('@assets/icons/AppTopLogo.png'),
  Search : require('@assets/icons/ic_search.png'),
  Cart : require('@assets/icons/ic_cart.png'),
  Deals : require('@assets/icons/ic_deals.png'),
  Favorite : require('@assets/icons/ic_favorite.png'),
  FavoriteSelected : require('@assets/icons/ic_favorite_selected.png'),
  Share : require('@assets/icons/ic_share.png'),
  Home : require('@assets/icons/ic_home.png'),
  User : require('@assets/icons/user.png'),
  Delete : require('@assets/icons/ic_delete.png'),
  EnFlag : require('@assets/icons/english.png'),
  ArFlag : require('@assets/icons/arabic.png'),
  Selected : require('@assets/icons/ic_selected.png'),
  Close : require('@assets/icons/ic_close.png'),
  UncheckCircle : require('@assets/icons/uncheck_circle.png'),
  CheckCircle : require('@assets/icons/check_circle.png'),
  DownArrow : require('@assets/icons/ic_down_arrow.png'),
  Address : require('@assets/icons/ic_address.png'),
  Shipping : require('@assets/icons/ic_shipping.png'),
  Star : require('@assets/icons/ic_star.png'),
  Language : require('@assets/icons/ic_language.png'),
  Feedback : require('@assets/icons/ic_feedback.png'),
  SignOut : require('@assets/icons/ic_sign_out.png'),
  Add : require('@assets/icons/ic_add.png'),

For example if you want to change the Drawer icon, then you can replace the icon from assets -> icons folder. However, the replaced file should be ic_drawer.png

4. Languages:

You can add a new language via Languages.js file. The app support RTL and Arabic Languages. Simply add a new language by adding it as the following structure:

en:{
    'Submit' : 'Submit',
    'Empty List' : 'Empty List',
    'What are you looking for?' : 'What are you looking for?',
    'See All' : 'See All',
    'Browser By Category' : 'Browser By Category',
    'Brands' : 'Brands',
    'Free Shipping' : 'Free Shipping',
    'Quantity' : 'Quantity',
    'Total' : 'Total',
    'Checkout' : 'Checkout',
    'My Orders' : 'My Orders',
    'My WishList' : 'My WishList',
    'Yours' : 'Yours',
    'My Address Book' : 'My Address Book',
    'New Feeds' : 'New Feeds',
    'Add to Cart' : 'Add to Cart',
    'Results' : 'Results',
    'Result' : 'Result',
    'Change Language' : 'Change Language',
    'Rate App' : 'Rate App',
    'Share App' : 'Share App',
    'Can not connect to server' : 'Can not connect to server.',
    'Sponsored' : 'Sponsored',
    'Category' : 'Category',
    'Price Range' : 'Price Range',
    'Brand' : 'Brand',
    'Feedback' : 'Feedback',
    'Email' : 'Email',
    'Password' : 'Password',
    'Sign In' : 'Sign In',
    'Sign Up' : 'Sign Up',
    'Do you have account with Hubay?' : 'Do you have account with Hubay?',
    'First Name' : 'First Name',
    'Last Name' : 'Last Name',
    'Successfully' : 'Successfully',
    'Telephone' : 'Telephone',
    'Street' : 'Street',
    'City' : 'City',
    'Postcode' : 'Postcode',
    'Choose Country' : 'Choose Country',
    'Shipping Methods' : 'Shipping Methods',
    'Please choose shipping method' : 'Please choose shipping method.',
    'Please input all fields' : 'Please input all fields',
    'Payment Methods' : 'Payment Methods',
    'Sign Out':'Sign Out',
    'Add Address':'Add Address',
    'Choose Region' : 'Choose Region',
    'Status' : 'Status',
    'Created' : 'Created',
    'Code' : 'Code'
  },

Ensure defining the languages correctly between single quotation mark. For example :

To adde French language, add the following :

fr:{
'Submit' : 'Soumettre',
.
.
.
},

left side will contain english item (i.e Submit) and the right site will contain the translated item (i.e. Soumettre).

How to change logo, app icon, and splash screen:

How to change the app logo ?

To change the app logo that appears in the top of the app, you need to replace AppTopLogo.png in Hubay -> assets -> icons with your logo:

How to change app icon and splash screen for iOS?

Open your HuBay.xcodeproj in the iOS folder and search for App Icons Source and click in the arrow next to it:

Then you will be directed to the following screen where you can change app icons and also the splash screen:

To read more about Apple guidelines for creating App Icon click here

How to change app icons for Android ?

Open Hubay -> android -> app -> src -> main - res and replace the following png files:

To read more about Google Play guidelines for creating App Icon click here

PreviousDevelopment Envirnoment NextPush Notification

Last updated 6 years ago