Shopify थीम लैंग्वेज स्विचर्स: कस्टमाइज़ेशन और समस्या-समाधान

Shopify का भाषा स्विचर एक बेहतरीन विज़ुअल ट्रिगर है जो आपके उपयोगकर्ताओं को ज़्यादा नियंत्रण देता है। अगर यह गायब है, गलत जगह पर है, या थीम बदलने या अपडेट करने के बाद से दिखाई नहीं दे रहा है, तो आपको खुशी होगी कि आपको यह लेख मिला!

सबसे पहले, घबराएँ नहीं। भाषा स्विचर में कोई अनुवाद डेटा नहीं होता, इसलिए बस डिवाइस को अपनी साइट पर वापस दिखाना है। आगे पढ़ें और 10 मिनट से भी कम समय में, आप विशेषज्ञता से यह पता लगा पाएँगे कि तीन आम समस्याओं - थीम अपडेट, अप्रकाशित भाषाएँ, या धीमी लोडिंग की समस्या - में से कौन सी समस्या ज़िम्मेदार है, और ज़रूरी समाधान लागू कर पाएँगे।

मुख्य बातें

• Shopify भाषा स्विचर केवल दृश्य ट्रिगर हैं जो आपकी साइट के अनुवाद डेटा या SEO को प्रभावित नहीं करते हैं।
• अधिकांश 'गायब हो जाने वाले स्विचर' संबंधी समस्याएं थीम अपडेट, अप्रकाशित भाषाओं या धीमे-धीमे लोड होने वाले हेडरों के कारण होती हैं।
• डेस्कटॉप पर जो चीज अच्छी लगती है, वह अक्सर मोबाइल पर छिप जाती है, इसलिए हमेशा सामान्य ब्रेकपॉइंट पर परीक्षण करें।
• यदि दृश्य युक्तियां पर्याप्त नहीं हैं, तो Weglot का दृष्टिकोण आपको अनुवाद की गुणवत्ता से समझौता किए बिना प्लेसमेंट और शैली के लिए वास्तविक लचीलापन प्रदान करता है।

भाषाएँ और अनुवाद विधियाँ स्थापित करना

सबसे पहले, भाषा स्विचर के आने से पहले ही, आपके Shopify स्टोर को एक से ज़्यादा भाषाएँ उपलब्ध करानी होंगी। अगर आपने पहले ही अपने अनुवाद सेट अप कर लिए हैं, तो बेझिझक अगले भाग पर जाएँ। अन्यथा, शुरुआत करने का तरीका यहाँ बताया गया है...

सेटिंग्स > भाषाएँ > भाषा जोड़ें पर जाएँ। 20 से ज़्यादा समर्थित विकल्पों में से चुनें, जिनमें स्पेनिश से लेकर जापानी तक सब कुछ उपलब्ध है। याद रखें, ग्राहकों के लिए अनुवाद लाइव करने के लिए प्रत्येक भाषा के आगे प्रकाशित करें पर क्लिक करना ज़रूरी है। अगर आप यह चरण छोड़ देते हैं, तो आपके नए स्विचर के पास स्विच करने के लिए कुछ भी नहीं होगा।

Shopify का बिल्ट-इन ट्रांसलेट और एडाप्ट ऐप बहुभाषी स्टोर के लिए एक विकल्प है। यह आपकी मुख्य सामग्री का दो भाषाओं में मुफ़्त में अनुवाद करता है, और वह भी सेटिंग > ऐप्स सेक्शन में, जब आप अपनी भाषाएँ जोड़ते हैं।

बल्क नियंत्रण के लिए, अपनी साइट के भाषा डेटा को सेटिंग्स > भाषाएँ > निर्यात से CSV के रूप में निर्यात करें। अनुवादों को बल्क में संपादित करें, फिर पुनः आयात करें - मुख्य बात यह है कि उन घुमावदार {{ }} या {% %} कोष्ठकों के अंदर लिक्विड कोड को कभी न छुएँ। यह Shopify का थीम इंजन है, सादा टेक्स्ट नहीं।

यदि आप पूर्ण मैन्युअल नियंत्रण पसंद करते हैं, तो Shopify स्टोर को 20 भाषाओं तक प्रबंधित करने की सुविधा देता है। अपने Shopify डैशबोर्ड से सीधे पेशेवर अनुवाद सेवाएँ ऑर्डर करने के लिए सेटिंग्स > भाषाएँ > क्रियाएँ > अनुवाद ऑर्डर करें में जाएँ।

एक बार जब आपकी भाषाएं प्रकाशित हो जाती हैं और अनुवाद लागू हो जाते हैं, तो आप स्विचर से निपटने के लिए तैयार हैं।

अपनी थीम के अंतर्निहित स्विचर को ढूँढना और कॉन्फ़िगर करना

Shopify का थीम भाषा स्विचर स्पष्ट रूप से दिखाई देता है - लेकिन केवल तभी जब आप जानते हों कि कहां देखना है!

डॉन , क्राफ्ट और रिफ्रेश थीम के लिए, स्विचर ऑनलाइन स्टोर > थीम्स > कस्टमाइज़ > फ़ुटर में छिपा हुआ है।

भाषा चयनकर्ता सक्षम करें टॉगल को पलटें, और यह आपकी साइट के निचले भाग में पॉप अप हो जाएगा। ये थीम स्विचर को फ़ुटर में लॉक कर देती हैं, इसलिए इसे हेडर में डालने के लिए अतिरिक्त कोड की आवश्यकता होती है - पृष्ठ के शीर्ष पर रखने के लिए कोई अंतर्निहित टॉगल नहीं है। ( संकेत: हम आपको नीचे " मैं अपने Shopify हेडर में भाषा चयनकर्ता कैसे जोड़ूँ? " अनुभाग में यह करने का तरीका बताएँगे।)

सेंस और स्टूडियो भी चीज़ों को उतना ही सरल रखते हैं। उनका थीम कस्टमाइज़र केवल फ़ुटर सेटिंग्स में स्विचर प्रदान करता है। 'भाषा चयनकर्ता' या 'स्थानीयकरण' देखें - यहीं टॉगलिंग होती है। फिर से, हेडर प्लेसमेंट तब तक संभव नहीं है जब तक आप कस्टम कोड स्निपेट जोड़ने में आश्वस्त न हों।

प्रेस्टीज , इम्पल्स और मोशन जैसी प्रीमियम थीम में अक्सर थीम सेटिंग्स > हेडर , या 'भाषा और मुद्रा' सेक्शन में हेडर प्लेसमेंट शामिल होता है। संपादन क्षमताओं के लिए हेडर और फ़ुटर दोनों पैनल को स्कैन करना फायदेमंद होता है - कुछ थीम दूसरों की तुलना में ज़्यादा रचनात्मक विकल्प प्रदान करती हैं।

अगर आप अभी भी पुरानी थीम का इस्तेमाल कर रहे हैं, तो ये Shopify के ऑनलाइन स्टोर 2.0 अपग्रेड से पहले के हैं। स्विचर को जोड़ने या स्थानांतरित करने का मतलब है कोड में पॉप-अप करना, आमतौर पर footer.liquid के अंदर। भाषा स्विचर अक्सर हार्डकोडेड होता है, इसलिए कस्टम प्लेसमेंट का मतलब है HTML और लिक्विड मार्कअप को सीधे संपादित करना।

विज़ुअल बदलाव आपकी थीम पर निर्भर करते हैं। ज़्यादातर स्विचर या तो फ़्लैग, भाषा के नाम, या दोनों दिखाते हैं। फ़ॉन्ट और रंग आपकी साइट की शैली के अनुसार ही होते हैं, जब तक कि उन्हें मैन्युअल रूप से ओवरराइड न किया जाए।

मोबाइल खरीदारों को थोड़ा अलग अनुभव मिलता है। ज़्यादातर थीम कार्ट और नेविगेशन को स्पष्ट रखने के लिए भाषा स्विचर को 768px से नीचे छिपा देती हैं, कभी-कभी इसे फ़ुटर या विस्तार योग्य मेनू के माध्यम से दिखाई देती हैं।

कब Weglot आपका सबसे अच्छा विकल्प बन जाता है

जब Shopify के अंतर्निहित विकल्प तंग लगने लगते हैं, तो Weglot आपको आवश्यक सभी स्वतंत्रता प्रदान करता है!

" यदि आप दो से अधिक अतिरिक्त भाषाओं का लक्ष्य बना रहे हैं, अपने ब्रांड से मेल खाने के लिए अपने स्विचर को स्टाइल करना चाहते हैं, स्वचालित जियोलोकेशन स्विचिंग चाहते हैं, या हेडर और फुटर दोनों में भाषा ट्रिगर्स की आवश्यकता है, Weglot आपको यह करने की स्वतंत्रता देता है, और बहुत कुछ। "

– यूजीन एर्नोल्ट, सीएमओ Weglot

सेटअप बहुत तेज़ है। ऐप इंस्टॉल करें, अपनी भाषाएँ चुनें, और Weglot का स्विचर तुरंत दिखाई देता है। अगर आप इसे बेहद सुलभ बनाना चाहते हैं, तो बस Weglot मेनू हैंडल ट्रिक का इस्तेमाल करें। किसी भी नेविगेशन लिंक में Weglot डालकर, आप जहाँ चाहें, एक क्लिक करने योग्य भाषा स्विचर बना सकते हैं, और वह भी " और हो गया" कहने से भी कम समय में।

एक बार जब आप इसे प्राप्त कर लेते हैं तो दृश्य अनुकूलन आसान हो जाता है Weglot आपकी टीम पर। हमारा डैशबोर्ड आपको अपने स्विचर में बदलावों का रीयल-टाइम पूर्वावलोकन करने की सुविधा देता है, बिना किसी जटिलता के। प्लेसमेंट, स्टाइल या आइकन में बदलाव करें, और जो आप देखते हैं वही ग्राहकों को मिलता है।

इससे ज्यादा और क्या, Weglot 100KB से कम आकार की एसिंक्रोनस स्क्रिप्ट के साथ लोड होता है, इसलिए आपके कोर वेब वाइटल पर कोई असर नहीं पड़ेगा। खुद देखने के लिए अपनी साइट को पेजस्पीड इनसाइट्स पर ज़रूर चलाएँ।

{{ai-banner}}

मैं अपने Shopify हेडर में भाषा चयनकर्ता कैसे जोड़ूं?

थीम कस्टमाइज़र > हेडर > ब्लॉक जोड़ें > कस्टम लिक्विड पर जाएं।

अगर आप अपने हेडर में Shopify का नेटिव स्विचर चाहते हैं, तो अपनी थीम की footer.liquid फ़ाइल से लोकलाइज़ेशन फ़ॉर्म कोड कॉपी करें। यह फ़ॉर्म आमतौर पर एक लोकलाइज़ेशन टैग से शुरू होता है और जब ग्राहक कोई नई भाषा चुनते हैं, तो आपके URL में locale पैरामीटर बदल देता है।

इस कोड को स्टाइलिंग के लिए विशिष्ट क्लास नामों वाले कंटेनर में लपेटें। यह सुनिश्चित करने के लिए कि आपका स्विचर स्टिकी मेनू या पॉप-अप के ऊपर दिखाई दे, z-index: 10000 जैसा CSS जोड़ें। यह छोटा सा कदम इसे दृश्यमान और समस्या मुक्त बनाए रखता है।

Weglot उपयोगकर्ताओं के लिए, सेटअप और भी आसान है। यह कोड डालें:

<div id="weglot_here"></div>

अपने कस्टम लिक्विड ब्लॉक में. Weglot तुरन्त इस कंटेनर का पता लगाता है और आपके स्विचर में बड़े करीने से गिरता है।

सेटअप के बाद, हमेशा अपने चेकआउट फ्लो का परीक्षण करें। थीम कभी-कभी चेकआउट के दौरान अलग हेडर फ़ाइलों या लेआउट का उपयोग करती हैं, इसलिए हो सकता है कि आपका स्विचर तब तक दिखाई न दे जब तक कि उन फ़ाइलों को एक ही अपडेट न मिल जाए।

सामान्य समस्याएँ और त्वरित समाधान

थीम अपडेट, ऐप इंस्टॉल या लेआउट में बदलाव के बाद कभी-कभी भाषा स्विचर गायब हो जाते हैं। चिंता न करें - ये आमतौर पर किसी बड़ी गड़बड़ी के बजाय सिर्फ़ दृश्य संबंधी गड़बड़ियाँ होती हैं। आइए चार सबसे आम रुकावटों का निवारण करें।

1. मेरे पास दो भाषा स्विचर क्यों हैं?

दो स्विचर देखने का मतलब आमतौर पर Shopify का मूल स्विचर और आपके ऐप का संस्करण (जैसे Weglot ) एक ही समय पर सक्रिय हैं। चीज़ों को व्यवस्थित करने के लिए, थीम कस्टमाइज़र के फ़ुटर सेक्शन में जाएँ और मूल भाषा चयनकर्ता को अक्षम करें।

यदि आपकी थीम आलसी-लोडेड हेडर का उपयोग करती है, Weglot ' का स्विचर एलिमेंट लोड होने पर दिखाई या गायब हो सकता है। उन थीम्स के लिए जहाँ हेडर जैसे एलिमेंट डायनामिक रूप से लोड होते हैं, Weglot हेडर मौजूद होने पर स्विचर को मैन्युअल रूप से इनिशियलाइज़ करने की सलाह दी जाती है। यह आपकी Weglot स्क्रिप्ट जोड़कर और फिर कॉल करके किया जा सकता है:

javascript
Weglot.initialize({
	api_key: 'YOUR_API_KEY',  
    // other options
});

यह तब किया जाता है जब हेडर पूरी तरह से लोड हो जाता है (उदाहरण के लिए, DOM रेडी इवेंट के ज़रिए या थोड़े विलंब के बाद)। इससे यह सुनिश्चित होता है कि स्विचर हर बार सही जगह पर पॉप अप हो।

कस्टम स्विचर प्लेसमेंट और आरंभीकरण पर आगे के मार्गदर्शन के लिए, आधिकारिक Weglot शॉपिफ़ाई भाषा स्विचर दस्तावेज़ देखें।

{{quote-image-banner}}

2. थीम अपडेट के बाद मेरा भाषा स्विचर क्यों गायब हो जाता है?

थीम अपडेट के दौरान कभी-कभी स्विचर गायब हो जाते हैं, लेकिन अनुवाद में शायद ही कभी कोई गलती होती है।

सबसे पहले, दोबारा जांच लें कि आपकी अतिरिक्त भाषाएँ अभी भी सेटिंग्स > भाषाएँ में प्रकाशित हैं या नहीं। अगर उन्हें प्रकाशित के रूप में चिह्नित नहीं किया गया है, तो वे कहीं भी दिखाई नहीं देंगी।

इसके बाद, ऑनलाइन स्टोर > थीम्स > कस्टमाइज़ > फ़ुटर खोलें और सुनिश्चित करें कि भाषा चयनकर्ता सक्षम करें टॉगल चालू है। कुछ थीम, जैसे डॉन, अपडेट के बाद इस सेटिंग को बंद कर देती हैं।

तीसरा, अपने स्टोर URL में /fr/ या /es/ जोड़ें। अनुवादित पृष्ठों का मतलब है कि आपका भाषा डेटा सुरक्षित है, और आप केवल प्रदर्शन संबंधी समस्या का निवारण कर रहे हैं।

अंत में, अपनी साइट को हमेशा एकाधिक डिवाइसों पर देखें - मोबाइल पर स्विचर का गायब होना आमतौर पर CSS डिस्प्ले संघर्ष होता है, अनुवाद संबंधी गड़बड़ी नहीं।

3. मोबाइल पर भाषा स्विचर क्यों नहीं दिखता?

अगर मोबाइल पर आपका भाषा स्विचर गायब है, तो शायद यह डिज़ाइन की वजह से है। ज़्यादातर Shopify थीम्स कार्ट और मेनू आइकन के लिए जगह बनाने के लिए 768px से कम के अतिरिक्त विजेट्स को छिपाने के लिए CSS का इस्तेमाल करती हैं। Apple के ह्यूमन इंटरफ़ेस दिशानिर्देशों के अनुसार, छोटी स्क्रीन पर चीज़ों को टैप करने योग्य बनाए रखने के लिए 44x44 पिक्सेल के टच टारगेट की ज़रूरत होती है।

इसे ठीक करने के लिए, अपने CSS में एक मीडिया क्वेरी जोड़ें जो मोबाइल डिवाइस के लिए स्विचर को निचले-दाएँ कोने में पिन करे, और इसे ऊपर रखने के लिए एक उच्च z-इंडेक्स मान रखें। अगर आपके पास हेडर स्पेस कम है, तो स्विचर को अपने मोबाइल हैमबर्गर मेनू के अंदर रखें।

4. स्विचर रिफ्रेश के बाद काम करता है लेकिन पहले पेज लोड पर नहीं?

Weglot जब थीम्स में लेज़ी-लोडेड हेडर का इस्तेमाल होता है, तो कभी-कभी मैन्युअल रीफ़्रेश के बाद ही स्विचर दिखाई देता है। डॉन 15+ और इसी तरह की थीम्स में, मुख्य पृष्ठ लोड होने के बाद हेडर जावास्क्रिप्ट द्वारा तैयार किया जाता है। Weglot अपने स्विचर को यथाशीघ्र इंजेक्ट करता है, इसलिए यदि हेडर तैयार नहीं है, तो स्विचर अपने फ़ॉलबैक स्थान पर आ जाता है - अक्सर नीचे-दाहिनी ओर - या एक सेकंड के बाद गायब हो जाता है।

अपने से पहले WGNOTINITIALIZED ध्वज सेट करके इसे हल करें Weglot स्क्रिप्ट लोड होती है (theme.liquid में)। फिर कॉल करें Weglot .initialize() को मैन्युअल रूप से, हेडर रेंडर होने के बाद (setTimeout या DOM रेडी इवेंट का उपयोग करके) करें।

वैकल्पिक रूप से, आप इसमें एक फ़ॉलबैक स्थिति सेट कर सकते हैं Weglot डैशबोर्ड पर, जैसे पहले हेडर, फिर फ़ुटर। इस तरह, आपका स्विचर हमेशा कहीं न कहीं दिखाई देगा, भले ही हेडर आने में देर हो!

आपका संपूर्ण कार्यान्वयन Checklist

सबसे पहले, कोई भी बदलाव करने से पहले, ऑनलाइन स्टोर > थीम्स > एक्शन > डुप्लिकेट का इस्तेमाल करके अपनी थीम की प्रतिलिपि बनाएँ। इससे आपको परीक्षण और सुधार के लिए एक सुरक्षित सैंडबॉक्स मिल जाएगा।

इसके बाद, दोबारा जाँच लें कि सभी लक्षित भाषाएँ सेटिंग्स > भाषाएँ में प्रकाशित के रूप में दिखाई दें। सुनिश्चित करें कि आपका भाषा स्विचर दिखाई दे रहा है - कुछ थीम हेडर टॉगल चाहते हैं, कुछ इसे फ़ुटर में पॉप अप करते हैं, इसलिए दोनों जगहों की जाँच करें।

अपने स्टोर पते में /es/ या /fr/ जोड़कर सीधे URL एक्सेस का प्रयास करें। अगर ये पृष्ठ लोड हो जाते हैं, तो आपके अनुवाद तैयार हैं, और केवल स्विचर प्लेसमेंट पर ध्यान देने की आवश्यकता है। किसी भी प्रतिक्रियात्मक विचित्रता को पकड़ने के लिए वास्तविक उपकरणों का उपयोग करके अपने स्टोर का पूर्वावलोकन ब्रेकथ्रू आकारों – 375px, 768px, और 1920px – पर करें।

स्क्रिप्ट लोडिंग समय मापने के लिए Chrome DevTools खोलें। धीमा स्विचर खरीदारों के लिए परेशानी का सबब बन सकता है। हमेशा हर भाषा में एक परीक्षण खरीदारी करें, क्योंकि चेकआउट टेम्प्लेट आपको आश्चर्यचकित करना पसंद करते हैं। अंत में, थीम अपडेट से पहले अपनी सभी सेटिंग्स का दस्तावेज़ बना लें। इस तरह, आप किसी भी अचानक रीसेट से जल्दी उबर जाएँगे।

यदि आप तत्काल, निराशा-मुक्त स्विचर के लिए तैयार हैं, तो Weglot भाषा परिवर्तन बस एक क्लिक दूर हैं। हमारा 14-दिन का निःशुल्क परीक्षण आज़माएँ और देखें कि बहुभाषी बिक्री कितनी आसान हो सकती है।