How can I set up Switchers on store?
After you set up language and currency in Localization, please move to set up Switcher by the following steps so your customers can select their target language, currency on switcher then shop at your store easier and quicker.
In Switcher menu, you will find it includes 3 parts General setting, Template, and Advanced options that you must complete.
How to set up General Setting
How to customize Templates
Advanced options
To set up the switcher on your store to switch between languages and currencies, firstly please go to Transcy app --> Switcher, 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.
Advanced: 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 --> Follow the instruction to enable Transcy App Embed block in Theme Editor shopify in order to activate the switcher
If you have not activated the Switcher yet, there will be a popup to remind you like below when you are back to app later.
In case you have done setting up everything and want to publish Switcher on store so all customers can see it, please choose Everyone on Display 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.
Please note that the app will apply the same mode (Only admin/Everyone) to both devices (Desktop and Mobile) to ensure the synchronization.
Old users having the difference in View mode setting between 2 devices will need to choose and apply only one mode to both devices.
Including the function Auto switch language and currency based on customer's location or customer's browser language. More details, please visit here.
Please note that Auto switch currency function requires at least Basic plan and Auto switch language is available from Growth plan and higher.
Now, you can find all templates in Advanced tab easily.
We provide 2 switcher styles (Classic and Modern) with a default template and the list of available templates on each Style so that 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 customize 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 templates besides current Classic templates. You can choose available templates in Modern style (new style) to combine and design a Switcher fit with your store-front just a second.
Please be advised that Modern style is only available from Growth plan and higher.
With Free plan, you can create 1 custom template from default template in Classic style. And with Basic plan, you can create and save a maximum of 3 templates of Classic style on each device (Desktop, Mobile) in your own list. However, in case you're in Free plan, you are unable to pick any other available templates in Classic list except the default template assigned, please kindly consider upgrading to a higher plan to get more choice in templates.. Click here to learn more.
With Growth and Premium plan, you can create a maximum of 6 templates with any style (Classic/Modern) to make your own list. Example: You can create 2 templates Classic and 4 templates Modern to make sure the maximum total is 6 templates.
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, 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:
Advanced tab --> Switcher sub-tab --> Position
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) with Offset setting
Embedded in the page: 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.
Side floating: anchored at an edge of page
In case you want to get back Default Setting of Transcy, you can click on Reset to default button to get Default Floating - Middle right/left
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
Advanced tab --> Selectors sub-tab --> Display
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
Similar to Currency switcher
There are many different options to show supported currencies on Switcher
+ 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)
You can drag and drop to adjust the display position of elements
Beside that, you can customize style of all elements inside Switcher disclosure such as select flag style, font size, button size, button border.
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)
Easy to customize color for all elements on Switcher separately on Desktop and Mobile and make it suitable with your theme.
In case you tick on Show location sections on switcher and Show location pop-up on the first visit in Recommend option in Geolocation function, you can display and customize font size, color of text elements such as "Country", "Change country" button on Location popup. Besides that you can edit default texts and manage the translation of these elements in-app, click here for more details.
Open Switcher menu --> Advanced tab --> Location selectors sub-tab --> you can adjust to display elements and customize font size, color in these options
After you have done customizing Switcher, you can save customized version as your own templates.
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.
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@transcy.io
In Switcher menu, you will find it includes 3 parts General setting, Template, and Advanced options that you must complete.
CONTENT:
How to set up General Setting
How to customize Templates
Advanced options
To set up the switcher on your store to switch between languages and currencies, firstly please go to Transcy app --> Switcher, 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.
Advanced: 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
Activate Switcher
Switcher Setting --> General --> Follow the instruction to enable Transcy App Embed block in Theme Editor shopify in order to activate the switcher
If you have not activated the Switcher yet, there will be a popup to remind you like below when you are back to app later.
In case you have done setting up everything and want to publish Switcher on store so all customers can see it, please choose Everyone on Display 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.
Please note that the app will apply the same mode (Only admin/Everyone) to both devices (Desktop and Mobile) to ensure the synchronization.
Old users having the difference in View mode setting between 2 devices will need to choose and apply only one mode to both devices.
Geolocation
Including the function Auto switch language and currency based on customer's location or customer's browser language. More details, please visit here.
Please note that Auto switch currency function requires at least Basic plan and Auto switch language is available from Growth plan and higher.
II. Templates
Now, you can find all templates in Advanced tab easily.
We provide 2 switcher styles (Classic and Modern) with a default template and the list of available templates on each Style so that 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 customize 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 templates besides current Classic templates. You can choose available templates in Modern style (new style) to combine and design a Switcher fit with your store-front just a second.
Please be advised that Modern style is only available from Growth plan and higher.
With Free plan, you can create 1 custom template from default template in Classic style. And with Basic plan, you can create and save a maximum of 3 templates of Classic style on each device (Desktop, Mobile) in your own list. However, in case you're in Free plan, you are unable to pick any other available templates in Classic list except the default template assigned, please kindly consider upgrading to a higher plan to get more choice in templates.. Click here to learn more.
With Growth and Premium plan, you can create a maximum of 6 templates with any style (Classic/Modern) to make your own list. Example: You can create 2 templates Classic and 4 templates Modern to make sure the maximum total is 6 templates.
III. Advanced
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, 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:
Advanced tab --> Switcher sub-tab --> Position
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) with Offset setting
Embedded in the page: 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.
Side floating: anchored at an edge of page
In case you want to get back Default Setting of Transcy, you can click on Reset to default button to get Default Floating - Middle right/left
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.
Display
You can set up the outside look of Switcher on Desktop and Mobile separately and customize the appearance of Switcher for all elements easily
Advanced tab --> Selectors sub-tab --> Display
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
Similar to Currency switcher
Show Currency label on Switcher
There are many different options to show supported currencies on Switcher
+ 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)
You can drag and drop to adjust the display position of elements
Style
Beside that, you can customize style of all elements inside Switcher disclosure such as select flag style, font size, button size, button border.
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)
Color
Easy to customize color for all elements on Switcher separately on Desktop and Mobile and make it suitable with your theme.
In case you tick on Show location sections on switcher and Show location pop-up on the first visit in Recommend option in Geolocation function, you can display and customize font size, color of text elements such as "Country", "Change country" button on Location popup. Besides that you can edit default texts and manage the translation of these elements in-app, click here for more details.
Open Switcher menu --> Advanced tab --> Location selectors sub-tab --> you can adjust to display elements and customize font size, color in these options
After you have done customizing Switcher, you can save customized version as your own templates.
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.
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@transcy.io
Updated on: 12/04/2024
Thank you!