Language selector snippets

You can adjust the language button to a custom position (header, footer, navigation menu) in your online store using selector snippets. 

Steps:

1. From your LangShop admin, go to Settings > Languages.
2. Open Selectors.
3. At the left sidebar panel, find Language Selectors.
4. Open the selector from the list.
   If you don't have none of the selectors, you can create a new one by clicking the Add button.
5. Select the Advanced tab -> select the Relative position.
6. Click Save.
   Note: if you don’t choose Relative, the language selector will not appear at the storefront.

Scroll down to the bottom until you find the selector snippets box. You can add the selector snippet to a non-default place in your store, for example, navigation or sidebar menu, most commonly used for mobile devices. Each selector you add to store has its unique identification number, which generates automatically.

How to use a language selector snippet?

Copy the selector snippet to the clipboard that is at the right side, it will help you to save the snippet before you can find and paste it to the right template and line in the theme code.

From your LangShop Admin -> open Online Store -> Themes -> LangShop theme. 

Click Actions -> Edit code. 

The Edit code button brings you to the template engine settings of your theme on Shopify. Here, you can manage templates, add custom fields, scripts, including LangShop snippets.

First, decide where to place the language button. In this example, the language selector will display near the cart icon at the storefront. Secondly, inspect the cart element by right-clicking on it to see where it locates. The cart element locates in the header section of the page.

Open theme liquid (edit code) settings -> search for the header.liquid template. Find the key words for cart, an ‘a’ tag, href attribute with the cart link, or class attribute values in this particular template.

When the element detected, paste the language selector snippet before or after the closing tag.

Save changes in the header.liquid template -> update the online store.

You can do the same actions with the language selector snippet at any spot in your store. Decide with the switcher location, inspect the element in the Dev Console, open theme code, find the right template, paste the copied snippet to the right line, save changes, and find your button placed in the custom position.

How to use a language selector short code?

Another snippet to test is the snippet short code. For both snippets, always choose relative position in the Advanced tab -> Selector position, otherwise, the button wont display correctly in the store.

Copy the selector short code to the clipboard. You can use and paste short codes to any place of your content.

First, consider the position of the short code in the store. Short codes commonly used in navigation menus as an extra section in Shopify Admin -> Online Store -> Navigation. In this example, we'll put the selector short code to the footer menu.

From your Shopify Admin -> open Online Store -> Navigation -> Footer Menu.

Add menu item for the snippet short code -> paste the short code in the Name field, and leave the hashtag (#) in the Link field, so it won’t redirect customers to another page. 

Save Footer Menu -> Update the store.

You can use the short code at any place of your content, copy the short code, paste it to the product page, header, or footer menu, save changes, and check your storefront details.