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:
Steps:
- From your LangShop admin, go to
Settings>Languages. - Open Selectors.
This is the main page in the app where you can customize recommendations, language, and currency selectors. - At left sidebar panel, find Language Selectors.
- 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 type 🇹🇩
LangShop offers five selector types:
- Dropdown.
- Inline.
- Select.
- IoS.
- Modal.
Select the type from the list for your online store and save changes.
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.
The next box has three tabs with content, style, and advanced sections.
Content tab 🇱🇰
In the Content tab, 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.
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.
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.
Advanced tab 🇵🇰 
In the Advanced tab, you can 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.
With the Offset function you can set new coordinates to the language button. The first box is responsible for height. The second one allows to move the selector width. You can measure the selector in pixels, rems, or percentages.
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.
Comments
0 comments
Please sign in to leave a comment.