Mobile app
  • Home
  • Woocommerce Mobile App
    • Bookstore
      • Introduction
      • Environment Setup
      • Platform setup
      • Set up an editor
      • Run the App
      • Website Integration
      • UI Customize
      • Firebase configuration
        • Android Configuration
        • iOS Configuration
      • Dynamic UI changes
      • Basic Features
      • Release
        • Publish to google play
        • Publish to App store
      • UI Screens
  • J2store Mobile App
    • Outfit
      • Introduction
      • Environment Setup
      • Install the Ionic CLI
      • Firebase Configuration
        • iOS Configuration
        • Android Configuration
      • Ionic platforms
      • Push Notifications
      • UI Customization
      • Basic Features
      • Releases
        • Publish to Google Play
        • Publish to Apple Store
Powered by GitBook
On this page
  1. J2store Mobile App
  2. Outfit

UI Customization

You can change the branding including store colors, logo, header, footer, and more. The app is built using the Ionic framework and works beautifully with the J2Store website.

1. Change store Name :

Open src/pages/dashboard/dashboard.htmlfile in the project.

	<ion-col col-5>
		<h3 class="headertitle">Outfit</h3>
	</ion-col>

In the previous code, you can change the Store Name

2. Change Store Colors :

Open src/theme/variables.scss file in the project

$colors: (
  primary:           #F6846C,
  secondary:         #D75E41,
  btnclr:            #B33F26,
  light:             #F7FEDD,
  dark:              #222,
  energy:            #9ad32f
);

The Primary is the main color of the app and Btnclr is the button color of the app

We can change the button color main color in this section.

3. Adding the new Menu :

  • J2store mobile app supports dynamic menu structure.

  • Uploaded the menu.json in the server https://yourwebsite.com/menu.json

  • If you need to add menu simply add that in the menu.json file no need to do any additional work in coding.

Add single menu :

  • Just add the menu name and category id in the json file.

Add sub menu:

  • For the sub menu we need to set CID as 0 in the json file.

4. Change the API URL :

Open src/providers/url-service file in the project

 apiUrl = 'https://themeparrot.com/api/v1/';
 apiUrl2 = 'https://themeparrot.com/api/v2/';

Change the https://themeparrot.com to https://yourdomain.com

5. Change the Image URL :

Open src/providers/config-service/config-service.ts file in the project

export const IMG_PATH= 'https://themeparrot.com';

Change the https://themeparrot.com to https://yourdomain.com

5. Change the Category details :

Open src/pages/dashboard/dashboard.html file in the project

<ion-card class="cardbordor" (click)="test($event, 8)">
<img src="https://themeparrot.com/banner.png">
<div class="card-title">Women</div>
<div class="card-subtitle"></div>
</ion-card>

Here you can change the Category image URL, Category name, & Category Id

6. Change the App Icon

  • Icon size should be 1024 *1024

  • Splash screen size should be 4096 * 4096

7. Change Logo :

  • Added the Logo in the src/assets/imgs/ folder

  • Logo size should be 1024 * 1024

  • To add a logo for the app open src/pages/dashboard/dashboard.htmlfile in the project. and replace the 'headertitle' code with the 'headerimg'.

From

<ion-col col-5>
		<h3 class="headertitle">Outfit</h3>
	</ion-col>

To

<ion-col col-8>
<img src="assets/imgs/logo.png" alt="" 
style="margin-left: 63px; width: 43%" class="headerimg">
</ion-col>

8. Change the Client_id & client_secret:

  1. Open the src/pages/dashboard/dashboard.ts ,src/pages/login/login.ts

    & src/pages/myaccount/myaccount.tsfile and find the client_id & client_secret replace that with your client_id & client_secret. (This information will get after install j2rest plugin)

  refreshData = { grant_type: 'password', client_id: 'xxxxxxxxxxx', client_secret: 'xxxxxxxx' };

9. Change the Forget Password URL :

  1. Open the src/pages/login/login.tsfile, in the forget() function changed the url with your forget Password url

From

  forget(){
      let browserRef = window.open('https://w3cert.net/outfit/index.php/en/register?view=reset&tmpl=component', '_self', 'hideurlbar=yes,location=no');
        this.navCtrl.popToRoot(); 
    browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) {
      var loc = e.url;
      if(loc != "https://w3cert.net/outfit/index.php/en/register?view=reset&tmpl=component")
      {
        browserRef.close();
      }
      });   
  
  }

To

  forget(){
      let browserRef = window.open('https://yourwebsiteforgetpasswordURL?view=reset&tmpl=component', '_self', 'hideurlbar=yes,location=no');
        this.navCtrl.popToRoot(); 
    browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) {
      var loc = e.url;
      if(loc != "https://yourwebsiteforgetpasswordURL?view=reset&tmpl=component")
      {
        browserRef.close();
      }
      });   
  
  }

10. Changed the Checkout URL :

Open the src/pages/checkout/checkout.ts file, in the lstnurl3() function changed the url with your website url

From

  lstnurl3(){
     let localaccesstoken = localStorage.getItem('token');
     let currencycode = localStorage.getItem('currency_id');
     let browserRef = window.open('https://w3cert.net/outfit/index.php?option=com_j2store&view=checkout&access_token=' + localaccesstoken + '&mobile=mobile&currency=' + currencycode + '&tmpl=component', '_self', 'hideurlbar=yes,location=no');
     this.navCtrl.push(MyaccountPage);
     browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) {
     var loc = e.url;
     if(loc.includes('com_j2store&view=myprofile&mobile=mobile')){
     localStorage.removeItem('cart_id');
     browserRef.close();
     }
     else{
     console.log("inside else");
     }
     });
     }

To

  lstnurl3(){
     let localaccesstoken = localStorage.getItem('token');
     let currencycode = localStorage.getItem('currency_id');
     let browserRef = window.open('https://yourwebsite URL?option=com_j2store&view=checkout&access_token=' + localaccesstoken + '&mobile=mobile&currency=' + currencycode + '&tmpl=component', '_self', 'hideurlbar=yes,location=no');
     this.navCtrl.push(MyaccountPage);
     browserRef.addEventListener('loadstop', function(e: InAppBrowserEvent) {
     var loc = e.url;
     if(loc.includes('com_j2store&view=myprofile&mobile=mobile')){
     localStorage.removeItem('cart_id');
     browserRef.close();
     }
     else{
     console.log("inside else");
     }
     });
     }
PreviousPush NotificationsNextBasic Features

Last updated 2 years ago

Upload your logo and splash screen to the following

Download the zip folder from and paste that folder in the resources/ folder

URL
URL
Single menu
Submenu
Dash board Screen