How to embed language switcher to different position on your pages?

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.
  1. In Switcher Settings > Choose Inject to theme > Insert shortcode. 
  2. Copy this shortcode.
<div id="qikify-tranzi"></div>
  1. Add it to your theme by going to Online store > Themes > Actions > Edit code
  2. Find the template liquid that you need to implement your switcher into, for example: header.liquid, theme.liquid, footer.liquid. 
  3. Paste the shortcode to the position you want in page. For example, if you need to implement the language switcher on top of your page, put the shortcode in theme.liquid > head section. 
Result: 
  1. Save and Done.

Example (using Debut theme)

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

  1. Find the template liquid: header.liquid 

  1. Find the location of <div class="site-header__icons-wrapper">. Then paste the shortcode of the language switcher next to it.  
  1. Save and Done
Result: 



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.
  1. Go to your live store (abc.myshopify.com)
  2. Find a suitable position to add your switcher. For example, we will add the switcher on the left of the store's menu. 

  1.  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

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

  1. Righ-click on the HTML tags > Copy > Copy selector 

  1. Go back to Tranzi app. In Language switcher > Switcher settings > Inject to theme > Choose Use CSS selector (Advanced).
  2. Paste the selector you copied into Dekstop Selector field. 

  1. Save and Done.
Result:

Contact us if you need help.