How to set up Switchers for your store?
To set up the switcher on your store to switch between languages and currencies, firstly please go to Transcy app --> Switchers, you will see a window showing like this:
You can set up:
General Setting: Turn on/off Switcher, Switcher visibility, and Switcher disclosure
Templates: provide a default template and list of available templates so you can choose a suitable template with your store theme (Light theme, Dark theme) or customize Switcher on the copy of default template. You can set up template for Switcher separately on Desktop and Mobile.
Customization: you can set up Position of Switcher, Switcher style, Switcher disclosure, Color scheme for each element on Switcher separately on Desktop and Mobile.
Switcher Setting --> General --> Switcher visibility --> choose device (Desktop/Mobile) --> turn on Switcher button to publish --> Save
In case you have done setting up everything and want to publish Switcher on store so all customers can see it, please choose Public mode
Or you can choose Only admin mode to show Switcher for only you or visitor who has Admin access permission on your store can see Switcher.
If you have not published Switcher yet, you might see this notification in-app to notice and guide steps to publish Switcher
You can select Dropdown or Popup for Switcher
Example:
Breakpoint (Mobile), to select Switcher size fit with your device that you want to set up
Example:
Auto switch language and currency based on customer's location or customer's browser language. More details, please visit here.
We provide a default template and the list of available templates so you can choose a suitable template with your store theme (Light theme, Dark theme) or click on Customize button on the active template (default template or one of available templates of Transcy), it will auto generate a copy of that template, so you can feel free to customize on it and publish the customized template on your store or save it in Your templates list.
Especially, you can set up template for Switcher separately on Desktop and Mobile.
You can change properties in each Template including: Positions, Switcher style, Switcher disclosure, Color Scheme or click Reset to default button in the bottom left corner to back default template of Transcy.
Also, you can easily copy a template that you wish then apply this template to your store. You can rename template in Your templates list for easy management
Click on X button to delete a copy of template. There will be a popup to confirm this Delete action.
Please make sure that you have clicked on Save successfully before leaving page then you can preview on store.
In case you have some new customized templates for mobile, you can also apply those templates to desktop and vice versa.
In our newest update, lovely that you can pick more favorite template style besides Posh/Sharp template in our Switcher Library (you should find in Template tab) which we've successfully collected so you can choose styles in list to combine and design a Switcher fit with your store-front just a second.
Please notice that Switcher Library is available from Basic and above.
You can set up all properties of Switcher on Desktop and Mobile separately such as Positions, Switcher style, Switcher disclosure (Dropdown, Popup), Color Scheme of each element (Border color, Background color, Text color, Hover color, Arrow color, Button color, etc) according to your wish as well as to make Switcher fit with your website design better.
There are 3 main options to place the switchers on your page:
Over the top of page: select a corner "Right or Left" to show.
Floating on page corner: you can choose area to place the switcher button (on top/bottom left, top/bottom right) and adjust spacing (distance to screen edge)
Embed: The switcher will be embedded on the header of the page on device (Desktop, Mobile), depending on the theme you are using. Currently, we are supporting 50 most popular themes to embed switcher on page header on desktop and mobile. Check out here to learn more.
Example: Embed Switcher in page on Desktop.
In case you want to get back Default Setting of Transcy, you can click on Reset to default button to get Default Floating - Top right
NOTE
In case you change your theme which is out of the supported list above for Embedded in page header, then Switcher will auto be changed back to Floating Switcher format.
If you have changed your theme to a new one and cannot choose Embedded in page header, that means your new theme has not been supported code to embed yet. Please get contact our CS team then we will check and embed it for you.
You can set up the outside look of Switcher on Desktop and Mobile separately and customize the appearance of Switcher for all elements easily
Please note that Hover and active effect (Style & Color settings) is not available on Mobile.
Choose layout: select available layouts (Arrow and label, Only label, Only arrow), select styles of Arrow segment or set to Default (Arrow or Dropdown Icon)
Customize label segments on switchers
In Label segments, you could easily enable/disable Language label, Currency label, select any option that you want to display Language/Currency label on switcher such as the language name format/ currency code format, choose Divider format, and turn on/off the Flag.
For now, there are many different options to show language name so you can easily choose an option that you want
+ Default (English names), like English, French, Japanese.
+ Short names, like En, Fr, Ja.
+ Native names, like English, Français, 日本語
+ Show name (select any kinds of name) with flag (you can tick on flag box)
+ Only flag
Example:
Flag
+ You can On/Off flag
+ Put flag before or after Language name
Language name
+ You can On/Off Language name
+ Set English name, Short name, Native name
Similar to Currency switcher
There are many different options to show supported currencies on Switcher. More details about supported currencies, please check this article.
+ Name and code, like Australian Dollar (AUD)
+ Name and symbol like Australian Dollar(A$)
+ Name only like Australian Dollar
+ Code and symbol, like AUD(A$)
+ Code only like AUD
+ Show only (Name/Code/Symbol) with flag (you can tick on flag box)
Example:
Flag
+ You can On/Off flag
+ Put flag before or after Currency name
Currency name
+ You can On/Off Currency name or
+ Symbol
+ Name
+ Code
+ Set to Default
+ You can drag and drop to adjust the display position of elements
Example: select Arrow and label layout with Language name & Currency name, symbol and flag shown up on Switcher
Besides that, you can select flag style, font size, divider format.
Flag icon style
There are 4 types of flag including Circle, Square, Rectangle, Rounded rectangle with size options (Small, Medium, Large).
Please remember to tick on Flag box to enable Flag on Switcher.
Divider format
Also, you could choose divider format icon suitably on your store.
Example:
Please be noted that Divider format appears when you enable to show both Language and Currency on Switcher.
Font size
Feel free to keep the font size on Switcher at default based on Theme size or custom size according to your preference.
If you want to get back to default of Transcy, you can click Reset to default button in the bottom left corner to reset for all above elements on device that you want (Desktop/Mobile)
There, you can customize elements for each Switcher style (inside Dropdown, Popup)
Example: inside Dropdown
Example: inside Popup
Easy to customize color for all elements on Switcher separately on Desktop and Mobile and make it suitable with your theme.
Switcher color
Border color
Background color
Text color
Arrow color
Hover color
Example:
Color inside Dropdown style/Popup style
After you have done customizing Switcher, you can save customized version as your own templates.
Besides your current Switcher showing on store page, you can feel free to select one of customized Switcher versions in your own template list then pick a preferred Switcher template that you want to show up on store.
Please note that you can create and save maximum 3 templates on each device (Desktop, Mobile) in your own list. If you reach this limit, please save Switcher version that you already customized as your current Switcher and select one of available templates in your own template list to replace then save it.
NOTE:
For password protected stores, Preview window in the right panel only helps you to have a better visual before applying any change. To see how color effects applied on your store exactly, please kindly view and check it on your real device or please disable Password.
Remember to click on Save button on top after done to apply your changes.
On your live website, customer only need to select a language/currency on Switcher then click on Apply button to apply that language/currency.
E.g. Label contents such as Language, Currency, Search in English at default on Switcher. Once visitors select a target language on the Switcher and apply then all these label contents would be translated according to that target language automatically. You can edit its translation manually in-app easily, click here to learn more.
That's all, and hope you will enjoy it !!!
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@fireapps.io
You can set up:
General Setting: Turn on/off Switcher, Switcher visibility, and Switcher disclosure
Templates: provide a default template and list of available templates so you can choose a suitable template with your store theme (Light theme, Dark theme) or customize Switcher on the copy of default template. You can set up template for Switcher separately on Desktop and Mobile.
Customization: you can set up Position of Switcher, Switcher style, Switcher disclosure, Color scheme for each element on Switcher separately on Desktop and Mobile.
I. General Setting
Switcher visibility
Switcher Setting --> General --> Switcher visibility --> choose device (Desktop/Mobile) --> turn on Switcher button to publish --> Save
In case you have done setting up everything and want to publish Switcher on store so all customers can see it, please choose Public mode
Or you can choose Only admin mode to show Switcher for only you or visitor who has Admin access permission on your store can see Switcher.
If you have not published Switcher yet, you might see this notification in-app to notice and guide steps to publish Switcher
Switcher disclosure
You can select Dropdown or Popup for Switcher
Example:
Device Breakpoint
Breakpoint (Mobile), to select Switcher size fit with your device that you want to set up
Example:
Geolocation
Auto switch language and currency based on customer's location or customer's browser language. More details, please visit here.
II. Templates
We provide a default template and the list of available templates so you can choose a suitable template with your store theme (Light theme, Dark theme) or click on Customize button on the active template (default template or one of available templates of Transcy), it will auto generate a copy of that template, so you can feel free to customize on it and publish the customized template on your store or save it in Your templates list.
Especially, you can set up template for Switcher separately on Desktop and Mobile.
You can change properties in each Template including: Positions, Switcher style, Switcher disclosure, Color Scheme or click Reset to default button in the bottom left corner to back default template of Transcy.
Also, you can easily copy a template that you wish then apply this template to your store. You can rename template in Your templates list for easy management
Click on X button to delete a copy of template. There will be a popup to confirm this Delete action.
Please make sure that you have clicked on Save successfully before leaving page then you can preview on store.
In case you have some new customized templates for mobile, you can also apply those templates to desktop and vice versa.
In our newest update, lovely that you can pick more favorite template style besides Posh/Sharp template in our Switcher Library (you should find in Template tab) which we've successfully collected so you can choose styles in list to combine and design a Switcher fit with your store-front just a second.
Please notice that Switcher Library is available from Basic and above.
III. Customization
You can set up all properties of Switcher on Desktop and Mobile separately such as Positions, Switcher style, Switcher disclosure (Dropdown, Popup), Color Scheme of each element (Border color, Background color, Text color, Hover color, Arrow color, Button color, etc) according to your wish as well as to make Switcher fit with your website design better.
Position
There are 3 main options to place the switchers on your page:
Over the top of page: select a corner "Right or Left" to show.
Floating on page corner: you can choose area to place the switcher button (on top/bottom left, top/bottom right) and adjust spacing (distance to screen edge)
Embed: The switcher will be embedded on the header of the page on device (Desktop, Mobile), depending on the theme you are using. Currently, we are supporting 50 most popular themes to embed switcher on page header on desktop and mobile. Check out here to learn more.
Example: Embed Switcher in page on Desktop.
In case you want to get back Default Setting of Transcy, you can click on Reset to default button to get Default Floating - Top right
NOTE
In case you change your theme which is out of the supported list above for Embedded in page header, then Switcher will auto be changed back to Floating Switcher format.
If you have changed your theme to a new one and cannot choose Embedded in page header, that means your new theme has not been supported code to embed yet. Please get contact our CS team then we will check and embed it for you.
Switcher style
You can set up the outside look of Switcher on Desktop and Mobile separately and customize the appearance of Switcher for all elements easily
Please note that Hover and active effect (Style & Color settings) is not available on Mobile.
Choose layout: select available layouts (Arrow and label, Only label, Only arrow), select styles of Arrow segment or set to Default (Arrow or Dropdown Icon)
Customize label segments on switchers
In Label segments, you could easily enable/disable Language label, Currency label, select any option that you want to display Language/Currency label on switcher such as the language name format/ currency code format, choose Divider format, and turn on/off the Flag.
Show Language label on Switcher
For now, there are many different options to show language name so you can easily choose an option that you want
+ Default (English names), like English, French, Japanese.
+ Short names, like En, Fr, Ja.
+ Native names, like English, Français, 日本語
+ Show name (select any kinds of name) with flag (you can tick on flag box)
+ Only flag
Example:
Flag
+ You can On/Off flag
+ Put flag before or after Language name
Language name
+ You can On/Off Language name
+ Set English name, Short name, Native name
Similar to Currency switcher
Show Currency label on Switcher
There are many different options to show supported currencies on Switcher. More details about supported currencies, please check this article.
+ Name and code, like Australian Dollar (AUD)
+ Name and symbol like Australian Dollar(A$)
+ Name only like Australian Dollar
+ Code and symbol, like AUD(A$)
+ Code only like AUD
+ Show only (Name/Code/Symbol) with flag (you can tick on flag box)
Example:
Flag
+ You can On/Off flag
+ Put flag before or after Currency name
Currency name
+ You can On/Off Currency name or
+ Symbol
+ Name
+ Code
+ Set to Default
+ You can drag and drop to adjust the display position of elements
Example: select Arrow and label layout with Language name & Currency name, symbol and flag shown up on Switcher
Besides that, you can select flag style, font size, divider format.
Flag icon style
There are 4 types of flag including Circle, Square, Rectangle, Rounded rectangle with size options (Small, Medium, Large).
Please remember to tick on Flag box to enable Flag on Switcher.
Divider format
Also, you could choose divider format icon suitably on your store.
Example:
Please be noted that Divider format appears when you enable to show both Language and Currency on Switcher.
Font size
Feel free to keep the font size on Switcher at default based on Theme size or custom size according to your preference.
If you want to get back to default of Transcy, you can click Reset to default button in the bottom left corner to reset for all above elements on device that you want (Desktop/Mobile)
Switcher disclosure
There, you can customize elements for each Switcher style (inside Dropdown, Popup)
Example: inside Dropdown
Example: inside Popup
Color scheme
Easy to customize color for all elements on Switcher separately on Desktop and Mobile and make it suitable with your theme.
Switcher color
Border color
Background color
Text color
Arrow color
Hover color
Example:
Color inside Dropdown style/Popup style
After you have done customizing Switcher, you can save customized version as your own templates.
Besides your current Switcher showing on store page, you can feel free to select one of customized Switcher versions in your own template list then pick a preferred Switcher template that you want to show up on store.
Please note that you can create and save maximum 3 templates on each device (Desktop, Mobile) in your own list. If you reach this limit, please save Switcher version that you already customized as your current Switcher and select one of available templates in your own template list to replace then save it.
NOTE:
For password protected stores, Preview window in the right panel only helps you to have a better visual before applying any change. To see how color effects applied on your store exactly, please kindly view and check it on your real device or please disable Password.
Remember to click on Save button on top after done to apply your changes.
On your live website, customer only need to select a language/currency on Switcher then click on Apply button to apply that language/currency.
E.g. Label contents such as Language, Currency, Search in English at default on Switcher. Once visitors select a target language on the Switcher and apply then all these label contents would be translated according to that target language automatically. You can edit its translation manually in-app easily, click here to learn more.
That's all, and hope you will enjoy it !!!
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@fireapps.io
Updated on: 04/04/2023
Thank you!