Apps: Langify Translator Installation

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

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Modify header.liquid

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://shopify.com/admin/themes/current?key=sections/header.liquid

Option1 - Automatic installation (easiest)

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.

Option 2 - Manual installation

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:

Code to use:

<!-- Code added for Langify -->
      <div class="langify-wrapper">{% include 'ly-languages-switcher' %}</div>
<!-- End of added code -->

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

2

Add styles

Style code examples. You may need to tweak these for your version and design:

/*============ 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;
  }
}

Where do I add the style code?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.