Apps: Langify Translator Installation

In this tutorial we will show you how to install your required Langify snippet for Pipeline.

This tutorial uses the Langify app

You will have to have the Langify app installed with a published translation to use this tutorial
Install Langify app

Protip: Make a theme backup before installing Langify

Step 1

Modify your header.liquid file to include the Langify code. You'll find this in the Sections folder:

If you have a published Pipeline theme, you can click on this link:
https://myshopify.com/admin/themes/current?key=sections/header.liquid

Replace all the header.liquid file with this code (see below for manual option):

https://gist.githubusercontent.com/whistlerbrad/b7d6b4c44924734f1feb13bd9f94d42f/raw/92e269429ca5ceba4261044e7a3b137debe27ee0/header.liquid

Save the file.

Note: If you had header modifications, you may want to make a backup of your code first then apply again.

Step 2

Style the dropdowns in assets/style.scss.liquid

For published Pipeline themes use this link:
assets/style.scss.liquid

At the very bottom, you'll want to add the following code:

/*============ Langify Styles =============*/
.header__wrapper .langify-wrapper {
  position: absolute;
  top: -3px;
  right: ($gutter / 2);
  @include at-query ($min, $small) {
    right: $gutter;
  }
}
.header__wrapper .langify-wrapper select {
  width: auto;
  color: $colorInfoText;
  padding: 5px 24px 5px 8px;
}
.langify-wrapper select {
  @include uppercase();
}

/*============ Header Search Scoot =============*/
.header-search__wrapper{
  right: 100px + ($gutter / 2) !important;
  @include at-query ($min, $small) {
    right: 100px + $gutter !important;
  }
}

Example with both Coin and Langify styles:

/*============ Currency Styles =============*/

.header__wrapper #coin-container {
  position: absolute;
  top: -3px;
  right: ($gutter / 2)+100px;
  @include at-query ($min, $small) {
    right: $gutter + 100px;
  }
}
.header__wrapper #coin-container select {
  width: auto;
  color: $colorInfoText;
  padding: 5px 24px 5px 8px;
}
#coin-container select {
  @include uppercase();
}

/*============ Langify Styles =============*/
.header__wrapper .langify-wrapper {
  position: absolute;
  top: -3px;
  right: ($gutter / 2);
  @include at-query ($min, $small) {
    right: $gutter;
  }
}
.header__wrapper .langify-wrapper select {
  width: auto;
  color: $colorInfoText;
  padding: 5px 24px 5px 8px;
}
.langify-wrapper select {
  @include uppercase();
}

/*============ Header Search Scoot =============*/
.header-search__wrapper{
  right: 170px + ($gutter / 2) !important;
  @include at-query ($min, $small) {
    right: 170px + $gutter !important;
  }
}

If you have a very long language name (like Luxembourgish or Montenegrin) you may need to scoot the search a little further than 70px:

/*============ Header Search Scoot =============*/
.header-search__wrapper{
  right: 140px + ($gutter / 2) !important;
  @include at-query ($min, $small) {
    right: 140px + $gutter !important;
  }
}

Save your file.


Manual installation for Step 1

If you're manually installing the Langify code to your header.liquid file (already customized with other code), then here's the location to add their code:

Still need help? Contact Us Contact Us