Advice and answers from the LangShop help center

In this article:

  1. Switcher type
  2. Block of settings
    - Content 
    - Style 
    - Advanced
  3. Disable switcher
  4. Switcher snippets


To customize switchers, follow this instruction:

  1. Go to the Settings section of the app and open the Languages section.
  2. Click the Switchers and click the necessary switcher.
  3. Make the appropriate settings and save changes. You are able to disable/enable it, change the switcher's type, icon type, position, etc. 


Switcher type

There are 5 types of switcher:

  • Dropdown
  • Inline
  • Select
  • iOS
  • Modal

You can customize each of these types. Read the instruction below.


Block of settings

Under the Switcher type, you can see a window with the following tabs: Content, Style, Advanced

Content

In this tab, you can set the switcher's title, display, icon type, and enable/disable language codes as titles.

Switcher display

  • Titles - the switcher displays only titles of languages. 
  • Icons - the switcher displays only icons (flags) of languages.
  • All - the switcher displays both titles and icons of languages. 

While customizing the switcher, all changes you will see in the preview window.

Switcher icon type

Types of flag icons can be also changed. At your disposal there are the following types:

  • Rounded
  • Circle
  • Square
  • Rectangle 

Show languages codes as titles

By default, the switcher displays the full titles of languages. If you want to display a short title of the language, select the Show languages codes as titles option.

Style

Pre-designed CSS

If you enable this option, you will use our default switcher style. If you disable it, the switcher won't be styled. 

Switcher's settings

The set of settings depends on what type of switcher you choose. On our screen, we show you the set of settings for the dropdown switcher. Let's consider the Container. This settings tab is common for all types of switchers. 

Firstly, pay attention to that you have two tabs with the same number of settings. In the Normal tab, you can customize the switcher display in its normal condition. Consequently, in the Hover tab, you can customize the switcher on hover.

So, here you have such options like

  • Padding
  • Background color
  • Border type
  • Border color
  • Border radius (if you need to round the corners)

In the Item setting tab, there are also two tabs with the same number of settings. In the Normal tab, you can customize the switcher display in its normal condition. Consequently, in the Hover tab, you can customize the switcher on hover.

Here you can customize font (size, family, and color) and icon (offset and position). 

Advanced

Switcher position

Set fixed switcher's position on the screen:

  • Relative
  • Bottom-Right
  • Bottom-Left
  • Top-Right
  • Top-Left

Note: You are able to set a Relative position. It will give you an opportunity to manage the switcher's position by editing the HTML code.

Switcher offset

You can set offsets for switchers. Fill presented field and choose measure type (px, %, em). For example, you want to move a switcher away from the screen borders. In the appropriate field, you set values like "10px 15px". And the switcher will be moved.

Visibility

Go to the Advanced => Find the Visibility field.

Click on the icon of the tablet, mobile, or desktop, and the switcher won't be displayed on the chosen device.


Disable switcher

To disable the language switcher, do the following:

  1. Go to the Settings => Languages => Switchers.
  2. Click on the switcher you need to disable => Advanced.
  3. Click Disable


Switcher snippets block

Switcher snippet

 LangShop allows displaying switchers on the positions described above. If you want to display them into a non-default place, use the snippet. To learn more about the switcher snippet, please, refer to our article - Add switcher to a custom position.

Switcher shortcode

Shortcode allows adding language switcher to positions not covered by the standard application settings. For further information, please, refer to the article - Add switcher to the navigation menu


Did this answer your question? Ask any help from community or contact application support if needed.

Contact Us
Chat