Customizing a language selector

You can style the language button by changing the colors, applying new fonts, adjusting selector's position, and do some extra tools for the button to perfectly match your store design.

On this page:

• Selector status
• Selector settings
• Advanced tab
• Style tab

Steps:

1. From your LangShop admin, go to Settings > Languages.
2. Open Selectors.
   This is the main page in the app where you can customize recommendations, language, and currency selectors.
3. At left sidebar panel, find Language Selectors.
   
   
4. 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.

Selector status 🇱🇰

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

Selector settings 🇵🇷

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

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

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

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

Advanced tab vc

Selector type 🇹🇩

LangShop offers five selector types:

1. Dropdown.
2. Inline.
3. Select.
   
4. IoS.
5. Modal.
   
   

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

Selector display and icon type 🇵🇷

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

The Isolated styles option help you display selector styles correctly without touching your theme’s styles. However, you can uncheck the box to keep working with your store styles and customize language selector according to your needs.

You can manage the selector visibility for desktop, tablet, and mobile devices. By checking or unchecking the visibility box, you decide rather display the selector 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.

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

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 selector look good and simple.     

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.