App Customization

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:

hubayWoo -> 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 or Hexa codes as follows:

  AppColor:'#96588a',
  LeftMenu:'#b262d2',
  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)',
  LighterGray:'#f2f2f2',
  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 endpoint, consumer_key, consumer_secret, romotion slider, and main brands:

• endpoint: defines your Magento2 website URL,

• consumer_key and consumer_secret: will enable to integrate your site with hubayWoo mobile app,

• Promotion slider: shows home page sliders and required URLs,

• Brands: shows list of brands and their URLs.

How to change the endpoint ?

Add your website URL in endpoint and also the consumer_key and consumer_secret that can be generated from your WooCommerce admin dashboard.

WoocommerceConfig:{
    endpoint : 'https://hubay.net/wordpress',
    consumer_key : 'ck_9d13ee9988b0587d0de0009a6488867ee0f7c92b',
    consumer_secret : 'cs_35ae33d62b8a0a3418aa6ccf9e5296f1bf4a8424'
  }

You can generate keys from admin dashboard of your WooCommerce website. To do so follow these steps:

1. Login to your WooCommerce admin dashboard.

2. Go to Dashboard -> WooCommerce -> Settings -> Advanced -> REST API

3. Click "Add key" and make permissions Read and Write.

Then the site will generate all api details that can be used in HubayWoo 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.

{
      url:'https://hubay.net/wordpress',
      image:'https://hubay.net/wordpress/img/brand3.gif'
    },
    {
      url:'https://hubay.net/wordpress',
      image:'https://hubay.net/wordpress/img/brand2.gif'
    },
    {
      url:'https://hubay.net/wordpress',
      image:'https://hubay.net/wordpress/img/Shop1.jpg'
    },
    {
      url:'https://hubay.net/wordpress',
      image:'https://hubay.net/wordpress/img/brand1.gif'
    },

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'),
  MenuBg: require('@assets/icons/imageBg.png'),
  RightIcon: require('@assets/icons/rightIcon.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',
     'Email or password is incorrect':'Email or password is incorrect.',
     "Don't have any shipping methods at your address" : "Don't have any shipping methods at your address",
     "Top Deals" : "Top Deals"
  },

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

5. 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 HubayWoo -> 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 HubayWoo -> android -> app -> src -> main - res and replace the following png files:

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

6. How to change the gradient header ?

Go to src -> app -> common -> Icons.js then uncomment the desiered color and also change the AppColor from section 1 above to the code under the desired color.

Ensure that you comment other MenuBG and only uncomment the desired color.

Enable or Disable Dokan Multi-Vendor

If you have a single store, then you need to disable dokan option. Otherwise, you will get errors when product page is rendered.

To enable or disable dokan option change it to either true or false : Go to hubayWoo -> src -> app -> common -> Config.js and make the following change:

EnabledDoken: true,