How to embed language switcher to different position on your pages?
1. Insert shortcode
* This method might require coding experience
You may want to put the language switcher on a selected position (e.g next to your store's logo, on top of cart icon, etc.) To integrate the switcher into your theme, choose Insert shortcode method.
- In Switcher Settings > Choose Inject to theme > Insert shortcode.
- Copy this shortcode.
Example (using Debut theme)
In this example, we'll try to put the language switcher next to the search icon on the header. The selector class of this element is
<div class="site-header__icons-wrapper"> (check "Use CSS selector" method below to learn how to find the correct selector).
- Find the template liquid: header.liquid
- Find the location of <div class="site-header__icons-wrapper">. Then paste the shortcode of the language switcher next to it.
- Save and Done
2. Use CSS selector
* This method might require coding experience
With CSS selector method, you will need to find the CSS selector of the element where you want to insert the language switcher. The switcher will appear on that element.
Go to your live store (abc.myshopify.com)
- Find a suitable position to add your switcher. For example, we will add the switcher on the left of the store's menu.
- Find the CSS selector of the block where the switcher will be integrated. In our example, it will be the space between the site logo and the menu.
Right-click on the space > Inspect.
- The developer tool will appear and auto-detect the HTML tags of your selected element (In this example: <ul class="site-nav list--inline" id="SiteNav>...</ul>).
- Righ-click on the HTML tags > Copy > Copy selector
- Go back to Tranzi app. In Language switcher > Switcher settings > Inject to theme > Choose Use CSS selector (Advanced).
- Paste the selector you copied into Dekstop Selector field.
- Save and Done.
Result:
Related Articles
Language Switcher
Languages Settings: 1. Language Order Each new language you added from your Shopify admin will automatically display in the list below. You can drag to reorder your languages list or show/hide the language. You also can change the flag and label for ...
How to Embed Form to a page
In Display > Open form in > select Embed Form if you want to display Contact Form in the page content, don't want to trigger form with a button. If you use the form as Embed Form, you do NOT need to configure the Trigger Button settings The Embed ...
How to Embed Trigger Button to your page
In Trigger button > Select where to show trigger button > select Embed to your page content if you want to display the button in a page content. NOTE: If you embed the button to your page, then you need to use the form as "Popup" or "Bubble" in ...
[Version 2] How to manually embed the "Product Bundle" offer to the product pages from pagebuilder apps (Gempages, Pagefly, etc.)?
This article is for "Product Bundle" offer only Step 1: Add the embed file to the theme Firstly, you need to add the file to embed the offer to your theme. 1. Open your theme > Edit code 2. Add a new file under Snippets 3. Name the file as: ...
[Version 2] How to manually embed the "Cross-sell, Upsell" offer to the product pages from pagebuilder apps (Gempages, Pagefly, etc.)?
This article is for "Cross-sell, Upsell" offer only Step 1: Add the embed file to the theme Firstly, you need to add the file to embed the offer to your theme. 1. Open your theme > Edit code 2. Add a new file under Snippets 3. Name the file as: ...