Using this section is the best way to modify the source code of your app/website without missing the changes when launch updates.

Once you're in the search and replace section, you need to add a new one, to do this just fill the next fields with this information:

  • Name: Write a name that describes the change you're doing. In this example, we are going to change the home title to the uppercase using CSS.
  • File: Write the same source that appears in the edit files section of the file you want to modify.
  • Search: Write in this section the original text that wants to modify. In this example, we're going to modify the next line:

<h1 class="title" data-ng-if="MLanguages.HOME_WELCOME_TITLE">{{ MLanguages.HOME_WELCOME_TITLE }}</h1>

  • Replace by: Write in this section the code that wants to replace the original source, here you can add something or delete. In this example, we're adding an attribute to uppercase the home title.

<h1 class="title" data-ng-if="MLanguages.HOME_WELCOME_TITLE" style="text-transform: uppercase;">{{ MLanguages.HOME_WELCOME_TITLE }}</h1>

Once you filled all the fields then you can verify clicking on "Try Search" if there's an error a message must appear. Once the "Try Search" shows you a success message you need to click on the "Add" button. Once is added the search and replace must appear in the table below. Then you need to click on update to save this change.

Now the last step is to rebuild your website. You can see all the customizations made in the search and replace section at the top of the page, and if everything is ok a green tick must appear. Now just click on update website and see the changes.

.
.
.
.
.

Here are other examples of what you can do:

CHANGE HEADER COLOR:

In this example, we're changing the background color to black (#000000) color.
FILE: templates/web1/layouts/main.html
SEARCH:
<nav class="navbar navbar-default">
REPLACE:
<nav class="navbar navbar-default" style="background-color: #000000 !important;">
.
.
.
.
.
.

KEEP THE HEADER ALWAYS AT THE TOP:

For this change we need to modify three files:
FILE1: css/web1/css/custom-theme.css
SEARCH:
#categories-tabs.fixed,
#cart-stiky.fixed {
  position: fixed;
  top: 0;
  z-index: 9;
}
REPLACE:
#categories-tabs.fixed,
#cart-stiky.fixed {
  position: fixed;
  top: 0;
  z-index: 9;
  margin-top: 50px !important;
}

FILE2: templates/web1/layouts/main.html
SEARCH:
<div ui-view='content'>
REPLACE:
<div ui-view='content' style="margin-top: 50px;">

FILE3: templates/web1/layouts/main.html
SEARCH:
 <nav class="navbar navbar-default">
REPLACE:
 <nav class="navbar navbar-default" style="position: fixed; width:100%; z-index: 999999;">

FILE4: css / web1 / css / custom-theme.css
SEARCH:
  .modal.popup {
    border-radius: 0;
    top: 0;
  }
REPLACE:
  .modal.popup {
    border-radius: 0;
    top: 50px;
  }
.
.
.
.
.
.
.
.

CHANGE THE TITLE COLOR FROM HOME PAGE:

We're changing the color of this title (https://www.screencast.com/t/6OpJh9hAtD).
FILE: templates/web1/home-screen-2.html
SEARCH:
<h1 class="title" data-ng-if="MLanguages.HOME_WELCOME_TITLE">
REPLACE:
<h1 class="title" data-ng-if="MLanguages.HOME_WELCOME_TITLE" style="color: #0000FF !important;">
.
.
.
.
.
.
.

CHANGE FOOTER COLORS:

We're changing the colors of the footer turning the background white(#FFFFFF), and the text black(#000000)
FILE: templates/web1/layouts/main.html
SEARCH:
<div class="container footer" style="color: #fff">
REPLACE:
<div class="container footer" style="color: #000000; background-color: #FFFFFF !important;">

.
.
.
.
.
.
.

HIDE REVIEW EMAIL:

We're hiding the email of the user who reviewed a business.
FILE (Web): templates/web1/business-more-info-popup.html
FILE(App): templates/app1/order-rest-menu.html
SEARCH:
{{ review.email }}<br>
REPLACE:
<!-- {{ review.email }}<br> -->

.
.
.
.
.
.
.

HIDE THE SPECIAL INSTRUCTIONS FIELD:

We're hiding the email of the user who reviewed a business.
FILE (Web): templates/web1/order-product-option-popup.html
FILE(App): templates/app1/order-product-option-popup.html
SEARCH(Web):
        <ion-item class="item-divider" data-ng-class="{'arabic_rtl': arabic_rtl}">
            <span class="divider-padding no-padding-h">{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS }}</span>
        </ion-item>
        <ion-item>
            <textarea class="special-inbox" placeholder="{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS_ADD }}" data-ng-model="curOrderDish.comments" data-ng-class="{cssArabic: $root.arabic_rtl}"></textarea>
        </ion-item>
        <ion-item class="bottom-cont">
REPLACE(Web):
        <!--ion-item class="item-divider" data-ng-class="{'arabic_rtl': arabic_rtl}">
            <span class="divider-padding no-padding-h">{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS }}</span>
        </ion-item>
        <ion-item>
            <textarea class="special-inbox" placeholder="{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS_ADD }}" data-ng-model="curOrderDish.comments" data-ng-class="{cssArabic: $root.arabic_rtl}"></textarea>
        </ion-item>
        <ion-item class="bottom-cont"-->
SEARCH(App):
        <ion-item class="item-divider" ng-class="{'arabic_rtl': arabic_rtl}">
            <span class="divider-padding no-padding-h">{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS }}</span>
        </ion-item>
        <ion-item>
            <textarea class="special-inbox" placeholder="{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS_ADD }}" ng-model="curOrderDish.comments" ng-class="{cssArabic: $root.arabic_rtl}"></textarea>
        </ion-item>
REPLACE(App):
        <!--ion-item class="item-divider" ng-class="{'arabic_rtl': arabic_rtl}">
            <span class="divider-padding no-padding-h">{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS }}</span>
        </ion-item>
        <ion-item>
            <textarea class="special-inbox" placeholder="{{ MLanguages.MOBILE_FRONT_SPECIAL_INSTRUCTIONS_ADD }}" ng-model="curOrderDish.comments" ng-class="{cssArabic: $root.arabic_rtl}"></textarea>
        </ion-item-->
.
.
.
.
.
.
.

REMOVE SHADOW FROM BUSINESS LOGO:

In this example, we remove the shadow from the business logo, ideal for logos with transparency. 

FILE: css/web1/css/custom-theme.css

SEARCH:
.cover img.logo {
  position: absolute;
  width: 8vw;
  height: 8vw;
  min-width: 60px;
  min-height: 60px;
  /*background: url(../../../img/dummy_logo.png);*/
  background-size: 100%;
  background-repeat: no-repeat;
  bottom: 5%;
  left: 5%;
  border-radius: 3px;
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}

REPLACE:
.cover img.logo {
  position: absolute;
  width: 8vw;
  height: 8vw;
  min-width: 60px;
  min-height: 60px;
  /*background: url(../../../img/dummy_logo.png);*/
  background-size: 100%;
  background-repeat: no-repeat;
  bottom: 5%;
  left: 5%;
  border-radius: 3px;
  box-shadow: none;
}
.
.
.
.
.
.

Glad we can help
Have a nice ordering

Regards, Pol Zepeda
Support Expert

Did this answer your question?