How to add quick language switcher to merchant/affiliate panel or mini-site

Quick navigation

• How to import new languages (separate article)
• Language switcher for merchant/affiliate panel (Icons approach)
  • Results
  • Adding more languages
• Language switcher for mini-site (Drop-down menu approach)
  • Result
  • Adding more languages

As changing languages by logging out and in or through a URL parameter is not very convenient, we've prepared for you simple quick language switchers for merchant/affiliate panels and for the signup mini-page.

Language switcher for merchant/affiliate panel (Icons approach)

Navigate to Configuration > Design > Merchant panel theme or Affiliate panel theme > Edit your currently Selected theme. In the editor open the "main.tpl" file, and insert the code below between lines {widget id="Menu"} and </div>.

<!-- language switcher -->
<div id="langselect" style="text-align:center;">
  <a href="?l=sk">   
    <img src="https://flagicons.lipis.dev/flags/4x3/sk.svg" alt="SK" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=en-US">   
    <img src="https://flagicons.lipis.dev/flags/4x3/us.svg" alt="US" style="width:21px;height:21px;border:0;"> 
  </a>
</div>
<!-- end of language switcher -->

Results

Adding more languages

To include more languages in the switcher,  add another HTML link tag <a>...</a> to the code, and do not forget to replace the language code in the href parameter and image source to match the country flag. You can find the correct language code in Configuration > Language and Regional settings > Import language, e.g. language code for English is "en-US". You can copy the flag image for example from https://flagicons.lipis.dev/ .

<a href="?l=LANGUAGE_CODE">
  <img src="COUNTRY_FLAG_DESTINATION_URL" alt="LANGUAGE_CODE" style="width:21px;height:21px;border:0;"> 
</a>

Codes for most used languages

  <a href="?l=cs">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/cz.svg" alt="CZ" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=de">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/de.svg" alt="DE" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=es">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/es.svg" alt="ES" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=fr">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/fr.svg" alt="FR" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=hu">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/hu.svg" alt="HU" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=it">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/it.svg" alt="IT" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=ru">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/ru.svg" alt="RU" style="width:21px;height:21px;border:0;"> 
  </a>

  <a href="?l=zh-CN">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/cn.svg" alt="zh-CN" style="width:21px;height:21px;border:0;"> 
  </a>

Language switcher for mini-site (Drop-down menu approach)

Navigate to Configuration > Design > Signup page theme > Edit your currently Selected theme. Open the "account_topmenu.stpl" file in the editor and replace its code with the code below.

<!-- account_topmenu  -->
<div class="col-md-8">
    <nav class="mainmenu">
        <ul>
            {if $isNetwork eq true}
                <li><a href="{$baseUrl}/">##Home##</a></li>
                <li><a href="{$baseUrl}/affiliates/">##Affiliates##</a></li>
                <li><a href="{$baseUrl}/merchants/home.php">##Merchants##</a></li>
                <li>
                    {if ($panelType == "M")}
                        <a href="{$baseUrl}/merchants/login.php">##Login##</a>
                    {else}
                        <a href="{$baseUrl}/affiliates/login.php">##Login##</a>
                    {/if}
                </li>
                <li>
                    <select onchange="location = this.value;">
                      <option value="">Language...</option>
                      <option value="?l=sk">SK</option>
                      <option value="?l=en-US">en-US</option>
                    </select>
                </li>
            {else}
                <li><a href="{$baseUrl}/affiliates/">##Home##</a></li>
                <li><a href="{$baseUrl}/affiliates/signup.php#SignupForm">##Sign up##</a></li>
                <li><a href="{$baseUrl}/affiliates/login.php">##Login##</a></li>
                <li>
                    <select onchange="location = this.value;">
                      <option value="">Language...</option>
                      <option value="?l=sk">SK</option>
                      <option value="?l=en-US">en-US</option>
                    </select>
                </li>
            {/if}
        </ul>
    </nav>
</div>

Result

Adding more languages

To include more languages in the switcher,  add another HTML option tag <option>...</option> to the code, and do not forget to replace the language code in the value parameter. You can find the correct language code in Configuration > Language and Regional settings > Import language, e.g. language code for English is "en-US".

<option value="?l=LANGUAGE_CODE">Language Name</option>

Codes for most used languages

  <option value="?l=cs">CZ</option>

  <option value="?l=de">DE</option>

  <option value="?l=es">ES</option>

  <option value="?l=fr">FR</option>

  <option value="?l=hu">HU</option>

  <option value="?l=it">IT</option>

  <option value="?l=ru">RU</option>

  <option value="?l=zh-CN">CN</option>