How to customize switcher?
Switchers are a powerful tool for navigating between different applications, windows, or layouts. But why settle for a basic switcher when you can tailor it to your exact needs and aesthetic? This guide will walk you through customizing every aspect of your switcher, from its position and appearance to the details of its selectors.
How to customize Switcher
How to customize Selectors
How to customize Location selectors
Please access on Switcher => Advanced => Customization => Switcher => Select the relevant elements including Position, Display, Style and Color
We're providing 3 given positions below along with its additional setting
- Floating on page corner
- Embedded in the page. In case your theme is not supported to embed, please refer to this article for further guidance
- Over the top of page
Note
To have a better illustration how it's look like before publishing it, please manipulate by clicking on those settings with simulation mode
- Layout with both arrow and label or only label and vice versa
- Label Segment: it allows you to show both language and currency on switcher, or only language and or only currency
- You can adjust its frame such width or border and even its font size
- There're 3 main sections below along with its corresponding such as background, border, text and arrow
+ Normal state
+ Hover state: hover the switcher to see how it's showing
+ Active state: directly click on the switcher to see its display
Please access on switcher => Advanced => Customization => Selectors => Select the relevant elements including Display, Style and Color
- It allows you to show both language and currency on selectors, or only language and or only currency. Also you can display its language and currency format including its name flag and symbol, etc
- You can adjust its frame such as width or border and texts with font size
- Or "Apply" button with its custom border and font
- There're 3 main sections below along with its corresponding such as background, border, text and arrow
+ Normal state
+ "Apply" button: change the color of border and text
+ Hover state: try to change its setting and then hover on the selector to see how it's showing with simulation mode for better illustration
Please access on Switcher => Advanced => Customization => Location selectors => Select the relevant elements including Display, Style and Color
NOTE
This "Location selectors" is a pop-up of language and currency recommendation. Please refer to this article of Geolocation as "Recommend" function to know how to enable the "Location selectors"
- You can choose the proper format of country, language as well as currency including name, flag or symbol to display
- You can adjust its frame such as width or border and texts with font size
- "Shop now" button: change its border and font
- There're 3 main sections below along with its corresponding such as background, border, text, etc
+ Normal state
+ "Shop now" button: change the color of background and text
+ Hover state: try to change its setting and then hover on the Location selectors to see how it's showing for better illustration
If you need some more helps, and/or have any new ideas about customization, please feel free to contact us via live chat or email us at support@transcy.io
CONTENT
How to customize Switcher
How to customize Selectors
How to customize Location selectors
I. HOW TO CUSTOMIZE SWITCHER
Please access on Switcher => Advanced => Customization => Switcher => Select the relevant elements including Position, Display, Style and Color
1. Position
We're providing 3 given positions below along with its additional setting
- Floating on page corner
- Embedded in the page. In case your theme is not supported to embed, please refer to this article for further guidance
- Over the top of page
Note
To have a better illustration how it's look like before publishing it, please manipulate by clicking on those settings with simulation mode
2. Display
- Layout with both arrow and label or only label and vice versa
- Label Segment: it allows you to show both language and currency on switcher, or only language and or only currency
3. Style
- You can adjust its frame such width or border and even its font size
4. Color
- There're 3 main sections below along with its corresponding such as background, border, text and arrow
+ Normal state
+ Hover state: hover the switcher to see how it's showing
+ Active state: directly click on the switcher to see its display
II. HOW TO CUSTOMIZE SELECTORS
Please access on switcher => Advanced => Customization => Selectors => Select the relevant elements including Display, Style and Color
1. Display
- It allows you to show both language and currency on selectors, or only language and or only currency. Also you can display its language and currency format including its name flag and symbol, etc
2. Style
- You can adjust its frame such as width or border and texts with font size
- Or "Apply" button with its custom border and font
3. Color
- There're 3 main sections below along with its corresponding such as background, border, text and arrow
+ Normal state
+ "Apply" button: change the color of border and text
+ Hover state: try to change its setting and then hover on the selector to see how it's showing with simulation mode for better illustration
III. HOW TO CUSTOMIZE LOCATION SELECTORS
Please access on Switcher => Advanced => Customization => Location selectors => Select the relevant elements including Display, Style and Color
NOTE
This "Location selectors" is a pop-up of language and currency recommendation. Please refer to this article of Geolocation as "Recommend" function to know how to enable the "Location selectors"
1. Display
- You can choose the proper format of country, language as well as currency including name, flag or symbol to display
2. Style
- You can adjust its frame such as width or border and texts with font size
- "Shop now" button: change its border and font
3. Color
- There're 3 main sections below along with its corresponding such as background, border, text, etc
+ Normal state
+ "Shop now" button: change the color of background and text
+ Hover state: try to change its setting and then hover on the Location selectors to see how it's showing for better illustration
If you need some more helps, and/or have any new ideas about customization, please feel free to contact us via live chat or email us at support@transcy.io
Updated on: 14/06/2024
Thank you!