The langify switcher has three different placement options. In this advanced guide you can find an example 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 an a step-by-step guide for a Custom switcher placement:

1) First, please select the "Custom" position inside the langify Switcher Configurator. A prompt will appear where you can copy a short line of HTML code.

Later, when you have added this code to your theme, it serves as a marker for langify to add the language switcher.

2) 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:

In order to find the right place in the theme code, we copy the HTML 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:

3) 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 on the three-dot icon close "Edit Theme", and then choose "Edit Code":

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

4) 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:

5) 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.

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

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:

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