# 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");
}
});
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://mobiledocs.themeparrot.com/j2store-mobile-app/outfit/ui-customization.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
