> For the complete documentation index, see [llms.txt](https://mobiledocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobiledocs.themeparrot.com/j2store-mobile-app/outfit/ui-customization.md).
# 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.html`**file in the project.
```
```
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
);
```
{% hint style="success" %}
The Primary is the main color of the app and Btnclr is the button color of the app
{% endhint %}
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
* 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
```
Women
```
Here you can change the Category image URL, Category name, & Category Id
#### 6. Change the App Icon
* Upload your logo and splash screen to the following [`URL`](https://apetools.webprofusion.com/#/)
* Icon size should be 1024 \*1024
* Splash screen size should be 4096 \* 4096
* Download the zip folder from [`URL`](https://apetools.webprofusion.com/) and paste that folder in the `resources/` folder
#### 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
```
```
To
```
```
#### 8. Change the Client\_id & client\_secret:
1. Open the `src/pages/dashboard/dashboard.ts` ,`src/pages/login/login.ts`
& `src/pages/myaccount/myaccount.ts`file 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.ts`file, 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¤cy=' + 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¤cy=' + 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");
}
});
}
```
