On this page:

Steps:

  1. From your LangShop admin, go to Switchers > Switchers.
    This is the main page in the app where you can customize language and currency sugestion, language, and currency switchers.

  2. At left sidebar panel, find Currency Switchers.

    switcher

  3. Open the selector that you want to customize.
    You can work with the sidebar panel and at the same time track all the changes you applying at your storefront.

Switcher status ๐Ÿด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ

status.jpg

The switcher status indicates the current status of your currency button. There are three main statutes you can manage too. You can disable the selector, make it visible for admin only, and publish the currency button to customers.

Switcher Settings

In the Switcher settings, you can edit the selector title for better navigation. For example, you can have two or more language switchers in your online store for mobile and desktop, and with a title you can better navigate yourself what selector you are currently customizing.

Besides, here you can choose prefered template, in this way customizing switcher's icons and text.

settings

Here you can also change the switcher position to bottom-right, bottom-left, top-right, top-left, and relative. Relative position gives you the ability to place the language switcher to a custom position, like header, or footer in your store.

customize switcher

Advanced customization is also available. Tap Customize to initiate it.

Advanced tab ๐Ÿ‡ฌ๐Ÿ‡ง

Switcher type ๐Ÿ‡ฏ๐Ÿ‡ต

LangShop offers five switcher types:

  • Dropdown

  • Inline

  • Select

  • IoS

  • Modal

Select the type from the list for your online store and save changes.

Switcher display and icon type ๐Ÿ‡ต๐Ÿ‡ท

You can also choose to display currency titles or icons or display them all. If you prefer to keep both elements, you can adjust the switcher icon type to a rounded, circled, squared, or rectangular form. Plus, you can check the box below if you want to display currency abbreviation code instead of the full currency title.

The Isolated styles option help you display switcher styles correctly without touching your themeโ€™s styles. However, you can uncheck the box to keep working with your store styles and customize currency switcher according to your needs.

You can manage the switcher visibility for desktop, tablet, and mobile devices. By checking or unchecking the visibility box, you decide rather display the switcher for the particular device or not. You can adjust the maximum width for smartphones, get new width parameters for laptops or iPads, and measure it in pixels, rems, and percentages.

advanced_customization.png

Style tab ๐Ÿ‡ธ๐Ÿ‡ช

In the Style tab you can change colors, add new fonts, adjust the size of a container, item, dropdown container, dropdown item, and the arrow element. By default, the app use pre-designed css styles for the currency selector. If you uncheck the box, the selector will lose langshop built-in css styles, and you canโ€™t use the rest of the features in the style tab. However, you can apply your css styles in the code to the currency switcher.

Each element has its settings with the color palettes, fonts, you can highlight the borders of the container and dropdown container. You can borders solid, dotted, dashed, or make it to none and remove the borderline. You can adjust the border radius, style the selector containers with the hover sub-tab when you mouse over the button. Change the animation for the dropdown item and make a smooth appearance. You can change the size and fonts for the items you have inside the container, edit the offset coordinates, and make the switcher look good and simple.

style

You can reset styles to its default settings if you click on the button reset styles to default. By confirming the action, you will remove all of your previous configurations and styles you have customized.

Did this answer your question?