The langify switcher has three different placement options. In this advanced guide you can find an example of how to add your language switcher with a Custom placement.

In case you're looking for more information about the Fixed and Absolute placement, please have a look at our Placement guide.

The Custom placement gives you the option to add the switcher in customizable positions virtually anywhere in your store.

It does, however, require some basic experience with HTML and Liquid as it is necessary to add a line of HTML code within your theme code.


If you're not comfortable editing your theme, please don't hesitate to reach out to us at support@langify-app.com and we'll be happy to help.



Below you will find a step-by-step guide for a Custom switcher placement:


Step 1 - Set the Switcher Position to Custom


In the langify Switcher Configurator, choose Custom as the Position. A prompt appears with a short HTML snippet you can copy. You’ll later paste this into your theme as the marker.


The "Custom" position will appear from the "Placement" suboption of the Switcher Configurator



Step 2 - Find a Reference Point in Your Storefront


Now you need to find the specific code snippet where you want to add the language switcher marker.

Note that every theme is different and some can be very complex, which makes it tricky to find the right place in the code.

In this example we are going to place the language switcher next to the search icon in the header of the "Dawn" theme:


The Custom position can be put in various spots of the store, in this case close to the magnifying glass


In order to find the right place in the theme code, we copy the CSS class of the search icon. To do this, you can use your browser's Inspector tool. Right-click on the search icon and then select "Inspect" in the menu.

In the screenshot below you can see the class "header__search" inside the Inspector tool:


Using the "Inspect" button, you can copy and paste vital pieces of codes to help you locate easily the right spot where to place your Include



Step 3 - Open the Theme Code Editor


In the next step, please open the theme code editor of your theme in Shopify. To do this, go to Shopify -> Online Store, and once you are on that page, please click the three-dot menu (More actions) next to Customize, then Edit code.


The Shopify codes can be found from the Theme Page -> "..." Option -> Edit Code



In most themes the header file can be found by simply typing "header" into the search bar:


You can find the liquid you need by typing its name from Shopify's middle search engine in the Edit Code option



Step 4 - Find the Right Place in the Code


Now that the correct code snippet has been found, we look for the class of the search icon "header__search".

For a text search within one specific snippet, please press Ctrl+F and enter your search term:


Once inside the liquid, CTRL + F can be used to paste the HTML code and find that area quickly



Step 5 - Add the langify Code Marker


 If you haven't already, you can now copy the HTML code from the langify Switcher Configurator, and paste it above the "header__search" line.


The Include can be pasted above or beneath the piece of code you have pasted, generally



Finally, your language switcher should appear to the left of the search icon inside the theme's header:


The Switcher should come out close or very close to the magnifying glass


Custom CSS


Even when putting the switcher as close as possible to the right area, it may need some further adjustments to align it exactly with the other elements. Most customizations, such as color and spacing, can be found as native options inside the Switcher Configurator.


However, in case you would like to add specific CSS to your switcher, then the langify Switcher Configurator offers a customization area where you can add your own CSS:

The Custom CSS section can be found on the right side of the Switcher Configurator section in langify


Alternatively, you can of course also add your custom CSS directly within your theme's own CSS files.