Language Switcher Options

Overview

The language switcher is how visitors change languages on your site. ShahiTranslate Pro offers multiple switcher styles and extensive customization options.

Accessing Switcher Settings

Navigate to: ShahiTranslate Pro → Settings → Switcher

Switcher Types

1. Dropdown Menu

Best for: Professional sites, corporate websites, blogs

Features:

1. Compact and space-efficient
2. Clean, professional appearance
3. Shows currently selected language
4. Expands on click to show all options
5. Customizable colors and fonts

Configuration:

6. Style: Classic or Modern
7. Width: Auto, Fixed, or Full-width
8. Max Height: Set maximum dropdown height with scroll
9. Arrow Style: Choose dropdown indicator icon

2. Flags Dropdown


Best for: Visual appeal, international sites, tourism sites

Features:

10. Country/language flags for visual recognition
11. Optional language names beside flags
12. Hover effects on flags
13. Multiple flag sizes available
14. SVG or PNG flags

Configuration:

15. Flag Size: 16px, 24px, 32px, 48px, or custom
16. Flag Style: Rectangle, circle, or square
17. Show Names: Display language names with flags
18. Flag Position: Left or right of text

3. Floating Button


Best for: Mobile-first sites, sites with fixed headers

Features:

19. Stays visible while scrolling
20. Doesn’t consume permanent space
21. Touch-friendly on mobile
22. Customizable position
23. Animation on hover

Configuration:

24. Position: Top-left, top-right, bottom-left, bottom-right
25. Offset: Distance from edge (X and Y)
26. Size: Small, medium, large, or custom
27. Icon: Globe, flag, text, or custom icon
28. Hide on Scroll: Optional auto-hide behavior

4. Popup/Modal


Best for: Sites with many languages, visual presentation

Features:

29. Full-screen or centered modal
30. Search functionality for many languages
31. Beautiful grid layout with flags
32. Language descriptions
33. Smooth animations

Configuration:

34. Trigger: Button, link, or automatic on first visit
35. Layout: Grid, list, or columns
36. Search Bar: Enable/disable language search
37. Background: Overlay opacity and color
38. Close Button: Position and style

5. Inline List


Best for: Footer placement, sidebar, simple layouts

Features:

39. Horizontal or vertical list
40. Separator characters (|, /, •)
41. Inline with other content
42. No dropdown needed
43. Minimal design

Configuration:

44. Orientation: Horizontal or vertical
45. Separator: Choose character or custom
46. Spacing: Adjust gaps between items
47. Current Language: Highlight style

6. Globe Icon


Best for: Minimalist designs, header integration

Features:

48. Single icon that opens language menu
49. Space-efficient
50. Modern appearance
51. Tooltip showing “Change Language”
52. Animated on hover

Configuration:

53. Icon Style: Solid, outline, or custom
54. Menu Style: Dropdown, slide-out, or popup
55. Icon Size: 16-48px
56. Color: Match theme colors

7. Menu Integration


Best for: Sites with existing navigation structure

Features:

57. Adds to WordPress navigation menu
58. Appears with other menu items
59. Inherits menu styling
60. Dropdown within menu
61. Mobile menu compatible

Configuration:

62. Menu Location: Choose which menu to add to
63. Position: First, last, or specific position
64. Label: Custom text or language name
65. Icon: Optional flag or globe icon

Display Options


Flag Settings


Flag Library:

66. ShahiFlags collection (200+ countries/regions)
67. Custom flag upload
68. SVG (scalable, sharp) or PNG (standard)

Flag Sizes:

69. 16x16px: Compact, for tight spaces
70. 24x24px: Standard size, most common
71. 32x32px: Larger, more visible
72. 48x48px: Extra large, for accessibility
73. Custom: Specify exact dimensions

Flag Styles:

74. Rectangle: Standard flag proportions
75. Circle: Circular crop of flag
76. Square: Square crop
77. Rounded: Rectangle with rounded corners
78. Shadow: Add drop shadow

Language Name Settings


Display Format:

79. Native Names: Español, Français, Deutsch (recommended)
80. English Names: Spanish, French, German
81. Language Codes: ES, FR, DE
82. Custom Labels: Define your own text

Typography:

83. Font Family: Inherit from theme or custom
84. Font Size: 12-24px
85. Font Weight: Light, normal, bold
86. Text Transform: Uppercase, lowercase, capitalize

Name Position:

87. Before flag
88. After flag (most common)
89. Below flag
90. Name only (no flag)

Combined Display


Show both flags and language names:

91. Flag + Name: 🇪🇸 Español
92. Name + Flag: Español 🇪🇸
93. Flag + Code: 🇪🇸 ES
94. Stacked: Flag on top, name below

Positioning


Fixed Positions


Header Positions:

95. Top-left corner
96. Top-center (centered in header)
97. Top-right corner (most popular)
98. Below header (in content area)

Footer Positions:

99. Bottom-left corner
100. Bottom-center
101. Bottom-right corner
102. Above footer (in content area)

Floating Positions:

103. Top-right (sticky)
104. Top-left (sticky)
105. Bottom-right (sticky)
106. Bottom-left (sticky)
107. Custom coordinates

Custom Positioning


Shortcode Method:
`
[shahitranslate_switcher]
`
Place in any post, page, or widget area.

With Attributes:
`
[shahitranslate_switcher type=”flags” size=”24″]
`

PHP Template Function:
`php
exists(‘shahitranslateswitcher’)) {
shahitranslate_switcher(array(
‘type’ => ‘dropdown’,
‘show_flags’ => true
));
} ?>
`

Widget Method:

108. Go to Appearance → Widgets
109. Find “ShahiTranslate Switcher” widget
110. Drag to desired widget area
111. Configure widget settings

Responsive Positioning


Set different positions for different devices:

112. Desktop: Top-right header
113. Tablet: Floating bottom-right
114. Mobile: In hamburger menu

Configuration:

115. Desktop Position: Choose from options
116. Tablet Override: Optional different position
117. Mobile Override: Optional different position
118. Breakpoints: Define at what screen widths to switch

Appearance Customization


Color Scheme


Text Colors:

119. Default State: Normal text color
120. Hover State: On mouse hover
121. Active State: Currently selected language
122. Disabled State: Unavailable options (if any)

Background Colors:

123. Switcher Background: Main container
124. Dropdown Background: Expanded menu
125. Hover Background: Highlight on hover
126. Active Background: Selected language

Border Colors:

127. Border: Main border color
128. Border Hover: On hover
129. Border Radius: Rounded corners (0-50px)
130. Border Width: 0-5px

Size and Spacing


Container Size:

131. Width: Auto, 100px-500px, or 100%
132. Height: Auto or fixed
133. Max Width: Limit maximum width
134. Min Width: Prevent too narrow

Internal Spacing:

135. Padding: Space inside switcher (5-30px)
136. Item Spacing: Gap between language options
137. Line Height: Vertical spacing of text
138. Icon Spacing: Gap between icon and text

Effects and Animations


Hover Effects:

139. Color Change: Smooth color transition
140. Background Change: Highlight on hover
141. Scale: Slightly enlarge on hover
142. Shadow: Add/enhance shadow
143. Underline: Underline text

Transition Effects:

144. Duration: 0.1s – 1s
145. Easing: Linear, ease-in-out, or custom
146. Properties: What animates (color, transform, etc.)

Dropdown Animation:

147. Fade In: Opacity transition
148. Slide Down: Vertical slide
149. Scale: Grow from center
150. None: Instant appearance

Mobile Optimization


Mobile-Specific Settings:

151. Increase Touch Size: Larger buttons for easy tapping (44x44px minimum)
152. Simplify Display: Show flags only, hide text labels
153. Full-Width: Expand to full screen width
154. Bottom Sheet: Slide up from bottom instead of dropdown

Mobile Menu Integration:

155. Add to hamburger/mobile menu
156. Show at top or bottom of menu
157. Inherit mobile menu styling
158. Collapse on language selection

Advanced Options


Show/Hide Elements


Selectively display or hide elements:

159. ✅ Current Language Indicator
160. ✅ Dropdown Arrow
161. ✅ Flag Icons
162. ✅ Language Names
163. ⬜ Language Codes
164. ⬜ RTL Indicator
165. ⬜ Translation Status

Behavior Settings


Click Behavior:

166. Open Dropdown: Show language options
167. Direct Link: Go to language immediately (for inline lists)
168. Custom Action: Trigger JavaScript function

Selection Behavior:

169. Reload Page: Standard behavior
170. AJAX Switch: Change language without reload (faster)
171. Scroll to Top: Return to top after switch
172. Remember Scroll: Keep scroll position

Accessibility:

173. Keyboard Navigation: Tab through options, Enter to select
174. Screen Reader Support: ARIA labels and descriptions
175. Focus Indicators: Visible focus outlines
176. Skip Link: “Skip to language switcher” link

Custom CSS


Add your own styles for complete control:

`css
/ Custom switcher styling /
.shahitranslate-switcher {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.shahitranslate-switcher:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.shahitranslate-flag {
border: 2px solid #fff;
border-radius: 50%;
}
`

Location: ShahiTranslate Pro → Settings → Switcher → Custom CSS

Switcher Templates


Pre-Built Templates


Choose from professionally designed templates:

177. Minimal: Clean, simple dropdown
178. Flags Only: Visual flag-based selector
179. Professional: Corporate style with subtle colors
180. Colorful: Vibrant, eye-catching design
181. Floating Globe: Modern floating button
182. Footer Inline: Horizontal list for footer
183. Mobile First: Optimized for touch devices

Applying Templates:

184. Go to Switcher tab
185. Click “Templates” button
186. Select a template
187. Customize as needed
188. Save changes

Creating Custom Templates


Save your configuration as a template:

189. Configure switcher exactly as desired
190. Click “Save as Template”
191. Give it a name and description
192. Template is saved for reuse

Use Cases:

193. A/B testing different designs
194. Site network consistency
195. Quick style switching
196. Client presentations

Testing Your Switcher


Preview Mode


Test without affecting live site:

197. Enable Preview Mode in switcher settings
198. Switcher only visible to logged-in admins
199. Test functionality and appearance
200. Disable Preview Mode to make live

Responsive Testing


Check appearance on different devices:

201. Use browser DevTools responsive mode
202. Test actual mobile devices
203. Check tablet sizes
204. Verify touch functionality

Browser Compatibility


Switcher is tested and compatible with:

205. Chrome, Firefox, Safari, Edge (latest versions)
206. Internet Explorer 11 (basic support)
207. Mobile browsers (iOS Safari, Chrome Android)

Common Switcher Configurations


Configuration Examples


Corporate/Professional:

208. Type: Dropdown
209. Position: Top-right header
210. Display: Language names only
211. Colors: Neutral (grays, blues)

E-commerce:

212. Type: Flags Dropdown
213. Position: Top-right, next to cart
214. Display: Flags + names
215. Size: 24px flags

Blog/Content Site:

216. Type: Floating Button (globe icon)
217. Position: Bottom-right
218. Display: Popup with flags and names
219. Mobile: Integrated in mobile menu

Multi-Language News Site:

220. Type: Popup with search
221. Position: Header button
222. Display: Grid of flags with full language names
223. Feature: Search bar for quick access

Troubleshooting


Switcher Not Appearing


224. Check that plugin is activated
225. Verify position settings
226. Clear cache (site and browser)
227. Check for CSS conflicts
228. Ensure at least 2 languages are enabled

Styling Issues


229. Try disabling theme CSS for switcher
230. Add custom CSS to override theme styles
231. Use browser inspector to identify conflicts
232. Increase CSS specificity if needed

Mobile Issues


233. Verify mobile-specific settings
234. Test touch target size (should be 44x44px minimum)
235. Check for overlapping elements
236. Ensure responsive breakpoints are set correctly

Next Steps


237. Translation Cache System
238. SEO Settings
239. Customizing Switcher Appearance