In this article, you will find a guide on how to change switcher type, position, display, offset or even add a shortcode in order to create the most appropriate style for the currency switcher.
In this article:
- Switcher type
- Block of settings
- Switcher snippets
- Disable switcher
To customize currency switchers, follow this instruction:
- Go to the Settings section of the app and open the Currencies section.
- Click on the Switchers and click on the necessary switcher.
- Make appropriate settings and save changes. You are able to disable/enable it, change the switcher's type, icon type, position, etc. Don't forget to save.
While customizing the switcher, all changes you will see in the preview window.
There are 5 types of switcher:
Block of settings
Under the Switcher type, you can see a window with the following tabs: Content, Style, Advanced.
In this tab, you can set the switcher's title, display, icon type, and enable/disable currency codes as titles.
- Titles - the switcher displays only titles of currencies.
- Icons - the switcher displays only icons (flags) of currencies.
- All - the switcher displays both titles and icons of currencies.
Switcher icon type
Types of flag icons can be also changed. At your disposal there are the following types:
Show currencies codes as titles
By default, the switcher displays the full title of currencies. If you want to display a short title of the switcher, select the 'Show currencies codes as titles' option.
If you enable this option, you will use our default switcher style. If you disable it, the switcher won't be styled.
The set of settings depends on what type of currency 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
- 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).
Set fixed switcher's position on the screen:
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.
You can set offsets for currency 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.
Click on the icon of the tablet, mobile, or desktop, and the currency switcher won't be displayed on the chosen device.
To disable the currency switcher, do the following:
- Go to the Settings => Currencies => Switchers.
- Click on the switcher you need to disable => Go to Advanced.
- Click Disable.
Switcher snippets block
LangShop allows displaying currency switchers on the positions described above. If you want to display them into a non-default place, use the snippet. To learn more about how to add a currency switcher to the non-default place, please, read our article - Add currency switcher to a custom position.
Shortcode allows adding currency switcher to positions not covered by the standard application settings. For further information, please, refer to the article - Add currency switcher to the navigation menu.