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.



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