Switcher tag (DEV MODE)
You can adjust the switcher to a custom position (header, footer, navigation menu) in your online store using switcher tag.
A switcher tag allows you to display the switcher on a non-default place in your store, for example, navigation or sidebar menu, most commonly used for mobile devices. Each switcher you add to the store has its unique identification number, which generates automatically.
Steps:
From your LangShop admin, go to Settings > Switchers.
At the left sidebar panel, find Language & currency switcher.
Click Edit switcher button.
Open Advanced Settings and scroll down to the bottom until you find the DEV MODE.
Advanced settings are available for Standard and Advanced plan users only.
Copy the switcher tag to the clipboard that is at the right side, it will help you to save the tag before you can find and paste it to the right template and line in the theme code.
Note
If you want to display the switcher on the non-default position only on mobile devices, copy the switcher tag from the Mobile tab, same goes to Desktop.
Then from your LangShop Admin open Translations -> Themes.
Click Actions -> Customize > ... -> Edit code.
Here, you can manage templates, add custom fields, scripts, including LangShop snippets (switcher tag).
First, decide where to place the switcher. In this example, it will be displayed near the cart icon at the storefront. Secondly, inspect the cart element by right-clicking on it to see where it is located. The cart element is located 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 is detected, paste the switcher tag before or after the closing tag.
10. Save changes in the header.liquid template -> update the online store.
You can do the same actions with the switcher snippets 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 tag to the right line, save changes, and find your button placed in the custom position.
A switcher tag allows you to display the switcher on a non-default place in your store, for example, navigation or sidebar menu, most commonly used for mobile devices. Each switcher you add to the store has its unique identification number, which generates automatically.
Steps:
From your LangShop admin, go to Settings > Switchers.
At the left sidebar panel, find Language & currency switcher.
Click Edit switcher button.
Open Advanced Settings and scroll down to the bottom until you find the DEV MODE.
Advanced settings are available for Standard and Advanced plan users only.
Copy the switcher tag to the clipboard that is at the right side, it will help you to save the tag before you can find and paste it to the right template and line in the theme code.
Note
If you want to display the switcher on the non-default position only on mobile devices, copy the switcher tag from the Mobile tab, same goes to Desktop.
Then from your LangShop Admin open Translations -> Themes.
Click Actions -> Customize > ... -> Edit code.
Here, you can manage templates, add custom fields, scripts, including LangShop snippets (switcher tag).
First, decide where to place the switcher. In this example, it will be displayed near the cart icon at the storefront. Secondly, inspect the cart element by right-clicking on it to see where it is located. The cart element is located 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 is detected, paste the switcher tag before or after the closing tag.
10. Save changes in the header.liquid template -> update the online store.
You can do the same actions with the switcher snippets 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 tag to the right line, save changes, and find your button placed in the custom position.
Updated on: 09/11/2023
Thank you!