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

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

Contact us if you need help.

    • 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 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 Contact Button in a page content. Then you need to add this shortcode to the page content or liquid file: <button ...
    • Add slideshow to other pages

      To add slideshows to other pages outside collection pages, you need to create slideshows in the "Other pages" section.  In your Collection Slideshow app, go to “Other Pages” and create new slideshow For all slideshows in this section, there is only ...
    • How to Embed Form to a page

      In Display > Open form in > select Embed Form if you want to display Contact Form in a page content, don't want to trigger form with a button. Then you need to add this shortcode to the page content or liquid file: <div ...
    • I can't change the language after translating

      After translating your store to desire language, you need to select the languages visitors can view on your domain. First, you need to go to your Domain settings on Shopify and manage your primary domain Click on Change domain default to set the ...