Translation Lab - Language Switcher Instructions

Translation Lab - Language Switcher Instructions

In this article, you will find detailed instructions on how to add the language switcher to the following default Shopify themes:

Simple Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Next, you need to add the following snippet in the header.liquid file, right after the closing </a> tag for the cart.

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container"></div>

Check the screenshot below for more details:

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag, after our existing CSS rules.

  .translation-lab-language-switcher-container {
    vertical-align: middle;
  }

  .translation-lab-language-switcher-container:empty {
    display: none;
  }

  select.translation-lab-language-switcher {
    width: 42px;
    margin: 0 10px 0 0;
    padding: 0 12px 0 0;
    background-position: right center;
  }

Check the screenshot below for more details:

Simple Theme Language Switcher CCS

Now the switcher should be displayed on your website and should feel native to the theme.

Boundless Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Boundless Theme Language Switcher

Next, you need to add the following snippet in the header.liquid file, right after the closing </button> tag, as shown in the screenshot below:

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container"></div>

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag, after our existing CSS rules.

.grid__item {
    white-space: nowrap;
  }

  .grid__item > * {
    white-space: normal;
  }

  .translation-lab-language-switcher-container {
    position: relative;
    top: -4px;
  }

  .translation-lab-language-switcher-container:empty {
    display: none;
  }

  .translation-lab-language-switcher-container:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 5px 4px 0;
    border-color: #1a1a1a transparent transparent;
  }

  select.translation-lab-language-switcher {
    width: 39px;
    background: none;
    padding: 0 10px 0 0;
    font-weight: bold;
    color: #1a1a1a;
  }

  .template-index .translation-lab-language-switcher-container:after {
    border-top-color: #fff;
  }

  .template-index select.translation-lab-language-switcher {
    color: #fff;
  }

Check the screenshot below for more details:

Boundless Theme Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Venture Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Venture Theme Language Switcher

Next, you need to add the following snippet in the header.liquid file after the closing </a> tag for the cart.

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container mobile"></div>

Check the screenshot for more details:

Venture Theme Language Switcher Header

Venture has a separate header for the mobile devices, so you have to insert the same snippet after the closing </ul> tag:

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container mobile"></div>

Check the screenshot for more details:

Venture Language Switcher Mobile

This will render the language switcher on the mobile device menu.

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag, after our existing CSS rules.

.translation-lab-language-switcher-container:empty {
    display: none;
  }

  @include media-query($small) {

    .translation-lab-language-switcher-container.desktop {
      display: none;
    }
  }

  @include media-query($medium-up) {

    .translation-lab-language-switcher-container.mobile {
      display: none;
    }
  }

  .translation-lab-language-switcher-container.mobile {
    display: block;
    background: #f7f7f7;
  }
  .translation-lab-language-switcher-container.mobile select {
    width: 97%;
    padding: 13.33333px 20px;
    font-family: "Unica One",sans-serif;
    font-size: 1.625em;
    color: #262626;
  }

  .translation-lab-language-switcher-container.desktop {
    position: relative;
    top: -1px;
    border-left: 2px solid;
    margin-left: 10px;
    padding-left: 6px;
  }

  .translation-lab-language-switcher-container.desktop:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 6px 4px 0;
    border-color: #fff transparent transparent;
  }

  .translation-lab-language-switcher-container.desktop select {
    width: 52px;
    height: 48px;
    padding: 0 12px 0 10px;
    background: none;
    color: #fff;
  }

Check the screenshot below for more details:

Venture Theme Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Debut Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Debut Language Switcher Instructions

Next, you need to add the following snippet in the header.liquid file, right before the closing </div> tag for <div class=”site-header__icons-wrapper”>. Left-clicking on each HTML open tag, will highlight its closing tag.

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container"></div>

Check the screenshot below for more details:

Debut Language Switcher Header

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag.

.translation-lab-language-switcher-container {
  position: relative;
  top: 3px;
}

.translation-lab-language-switcher-container:empty {
  display: none;
}

select.translation-lab-language-switcher {
    width: 52px;
    padding: 0 12px 0 10px;
    background-position: right center;
    color: #3d4246;
}

Check the screenshot below for more details:

Debut Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Supply Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Supply Language Switcher Theme

Next, you need to add the following snippet in the header.liquid file, right after the {% include ‘search-bar’ %} line.

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container"></div>

Check the screenshot below for more details:

Supply Language Switcher Header

You also need to add the arrow-down-white.svg file as a new asset in your store:

Supply Language Switcher Asset

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag.

.translation-lab-language-switcher-container:empty {
  display: none;
}

select.translation-lab-language-switcher {
  width: 67px;
  margin: 0;
  outline: none !important;
  border: none !important;
  background-image: url('arrow-down-white.svg');
  color: #fff;  
}

@media all and (max-width:480px) {

 .translation-lab-language-switcher-container {
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    z-index: 9099999999;
    width: 65px;
    margin: auto;
  }  
}

@media all and (min-width:481px) and (max-width:768px) {

 .translation-lab-language-switcher-container {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    z-index: 9099999999;
    width: 65px;
    margin: auto;
    padding-top: 23px;
  }
}

@media all and (min-width:769px) {

  .grid--full .grid-item {
    white-space: nowrap;
  }
  .grid--full .grid-item > * {
    white-space: normal;
  }
  .translation-lab-language-switcher-container {
    margin: 0 -5px 0 10px;
  }
  .translation-lab-language-switcher {
    background-color: #0f243d !important;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 14px;
  }
}

@media all and (min-width:769px) and (max-width:1024px) {

 .grid-item.large--one-half:first-child {
    width: 35%;
  }
  .grid-item.large--one-half:last-child {
    width: 65%;
  }
}

Check the screenshot below the CSS snippet for more details:

Supply Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Narrative Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Narrative Language Switcher Theme

Next, you need to add the following snippet in the header.liquid file, after the div block for the cart as shown in the screenshot below:



Narrative Language Switcher Header

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag.

  .translation-lab-language-switcher-container {
    position: relative;
    top: 5px;
  }

  .translation-lab-language-switcher-container:empty {
    display: none;
  }

  .translation-lab-language-switcher-container:after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 1px;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 8px 7px 0;
    border-color: #e1c9b4 transparent transparent;
  }

  select.translation-lab-language-switcher {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    margin: 0;
    background: none;
    padding: 0 15px 0 5px;
    color: #e1c9b4;
  }

  html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .translation-lab-language-switcher-container:after {
    border-top-color: #fff;
  }

  html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) select.translation-lab-language-switcher {
    color: #fff;
  }

Check the screenshot below for more details:

Narrative Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Brooklyn Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Brooklyn Language Switcher Theme

Next, you need to add the translation lab HTML snippet in the header.liquid file right before this line: {% if section.settings.search == 'page' or section.settings.search == 'modal' %}

  <li class="site-nav__item site-nav__item--compressed">
                  <div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container desktop"></div>
                </li>

Check the screenshot below for more details on where to add the snippet:

Brooklyn Language Switcher Header

Brooklyn has a separate header for the mobile devices, so you have to insert the following snippet in the drawer-menu.liquid file in order to add the switcher in your mobile menu.

      <li class="mobile-nav__spacer"></li>
      <li class="mobile-nav__item mobile-nav__item--secondary">
        <div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container mobile"></div>
      </li>

Check the screenshot below for more details on where to place the code:

Brooklyn Language Switcher Mobile

This will render the language switcher on the mobile device menu.

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag.

.translation-lab-language-switcher-container:empty {
    display: none;
  }

  .translation-lab-language-switcher-container.mobile {
    display: block;
    position: relative;
    background: #222;
  }

  .translation-lab-language-switcher-container.mobile:after {
    content: "";
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 5px 4px 0;
    border-color: #bfbfbf transparent transparent;
  }

  .mobile select.translation-lab-language-switcher {
    width: 100%;
    outline: none;
    background: none;
    padding: 10px 15px;
    font-size: 16px;
    color: #bfbfbf;
    line-height: 1.2;
    font-style: normal;
  }

  .translation-lab-language-switcher-container.desktop {
    position: relative;
    margin: 0 10px;
  }

  .translation-lab-language-switcher-container.desktop:after {
    content: "";
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 5px 4px 0;
    border-color: #222323 transparent transparent;
  }

  .desktop select.translation-lab-language-switcher {
    width: 58px;
    background: none;
    /*background-position: right 5px center;*/
    padding: 8px 12px 8px 8px;
    outline: 1px solid #ddd;
    outline-offset: 0 !important;
    font-family: Montserrat,sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: 0.875em;
    color: #222323;
  }

  .header-wrapper--transparent .desktop .translation-lab-language-switcher {
    color: #fff;
  }

  .header-wrapper--transparent .translation-lab-language-switcher-container.desktop:after {
    border-top-color: #fff;
  }

Check the screenshot below the snippet for more details:

Brooklyn Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Minimal Theme Instructions

First, you need to add the following snippet in your theme.liquid file, on the line right before the closing </head> tag.

{% include 'translation-lab-language-switcher' %}

Check the screenshot below for more details:

Minimal Language Switcher Theme

Next, you need to add the following snippet in the header.liquid file between the account and cart code blocks.

<div id="translation-lab-language-switcher" class="header-bar__module translation-lab-language-switcher-container desktop"></div>

Check the screenshot below for more details:

Minimal Language Switcher Header

Minimal has a separate header for the mobile devices, so you have to insert the following snippet in the header.liquid file as well.

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container mobile"></div>

Check the screenshot below for more details on where to place the snippet:

Minimal Language Switcher Mobile

This will render the language switcher on the mobile device menu.

You also need to upload the arrow-down-white.svg file as a new asset:

Minimal Language Switcher Asset

Finally, you need to add the additional CSS in the translation-lab-language-switcher.liquid file. You can add it before the closing </style> tag.

.translation-lab-language-switcher-container:empty {
  display: none;
}

select.translation-lab-language-switcher {
  width: 60px;
  margin: 0;
  border: none !important;
  background-image: url('arrow-down-white.svg');
  font-weight: bold;
  text-transform: capitalize;
  color: #fff; 
}

.translation-lab-language-switcher-container.mobile {
  position: relative;
  top: -2px;
}

.translation-lab-language-switcher-container.desktop {
  margin-left: 10px;
}

.translation-lab-language-switcher-container.desktop + div .header-bar__sep {
  display: none;
}

Check the screenshot below for more details:

Minimal Language Switcher CSS

Now the switcher should be displayed on your website and should feel native to the theme.

Let us know if you have any questions or need technical assistance!

Share

Leave a comment