स्टेजिंग साइट: Shopify पर स्टेजिंग साइट कैसे बनाएँ

वेब डेवलपमेंट में स्टेजिंग वेबसाइट आपकी असली वेबसाइट की एक निजी कॉपी होती है। यहाँ आप डिज़ाइन में बदलाव और नए फ़ीचर्स टेस्ट कर सकते हैं। किसी लाइव वेबसाइट पर सीधे अपडेट डालने के बजाय, डेवलपर्स टेस्टिंग और सुधार के लिए स्टेजिंग साइट का इस्तेमाल करते हैं, बशर्ते वे बदलावों को लाइव करने के लिए तैयार न हों। इसे एक सैंडबॉक्स, एक लैब, या एक निजी रिहर्सल की तरह समझें।

Shopify (शॉपिफाई) स्टोर में स्टेजिंग एनवायरनमेंट पहले से मौजूद नहीं होता, लेकिन इसे बनाने के कुछ दूसरे तरीके हैं। इनमें शामिल है एक डुप्लिकेट थीम बनाना, एक डेवलपमेंट स्टोर बनाना, या किसी थर्ड-पार्टी स्टेजिंग ऐप का इस्तेमाल करना। Shopify (शॉपिफाई) ने Rollouts (रोलआउट्स) के साथ अपने बिल्ट-इन टेस्टिंग टूल्स का भी विस्तार किया है। स्टोर ओनर्स की थीम में बदलाव शेड्यूल करने और थीम्स पर A/B टेस्ट चलाने में यह मदद करता है।

अपने ईकॉमर्स स्टोर के लिए स्टेजिंग साइट के इस्तेमाल के फ़ायदों के बारे में और जानें। साथ ही, जानें कि Shopify (शॉपिफाई) में स्टेजिंग साइट कैसे बनाएँ और रोलआउट फ़ीचर को अपने स्टेजिंग वर्कफ़्लो में कैसे शामिल करें।

Shopify (शॉपिफाई) स्टेजिंग साइट क्या है?

Shopify (शॉपिफाई) स्टेजिंग साइट एक निजी वेबसाइट टेस्टिंग एनवायरनमेंट है, जहाँ आप अपने लाइव स्टोर को प्रभावित किए बिना अपडेट या रीडिज़ाइन की समीक्षा कर सकते हैं। किसी नए प्रोडक्ट इमेज सेक्शन को जोड़ने जैसी एहम अपडेट के बाद अगर साइट सही से काम न करे, तो वेबसाइट का कन्वर्शन घट सकता है।

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

चूँकि Shopify (शॉपिफाई) बिल्ट-इन स्टेजिंग एनवायरनमेंट नहीं देता, इसलिए आप बदलावों को टेस्ट करने के लिए बिल्ट-इन और ऐप-आधारित तरीकों के मेल का इस्तेमाल कर सकते हैं।

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

Shopify (शॉपिफाई) ने अपने नेटिव टेस्टिंग टूल्स का भी विस्तार किया है। SimGym (सिमजिम) Shopify (शॉपिफाई) की बनाई हुई एक फ़र्स्ट-पार्टी ऐप है, जो आपकी साइट पर असली खरीदार के व्यवहार की नकल करने के लिए AI शॉपर्स का इस्तेमाल करती है।

Shopify (शॉपिफाई) की प्रोडक्ट मार्केटिंग लीड स्मृति चोपड़ा कहती हैं, “आप किसी मौजूदा थीम पर इसका इस्तेमाल कर सकते हैं। यह आपको सुझाव देगा कि क्या सही काम कर रहा है और कहाँ कोई खराबी है। स्टोर ओनर इसका इस्तेमाल नई थीम्स को टेस्ट करने और अपनी मौजूदा थीम्स की खामियाँ ढूँढ़ने के लिए कर रहे हैं।”

अपनी मौजूदा साइट पर SimGym (सिमजिम) का इस्तेमाल करके आप यह समझ सकते हैं कि क्या बदलाव करने हैं। या फिर डुप्लिकेट वर्शन में बदलाव लागू करने के बाद क्वालिटी एश्योरेंस (QA) के लिए भी आप इसका इस्तेमाल कर सकते हैं। SimGym (सिमजिम) सिर्फ़ लाइव साइट्स पर काम करता है, डेवलपमेंट ड्राफ़्ट साइट्स पर नहीं।

Rollouts (रोलआउट्स) ऑनलाइन स्टोर में बदलावों को शेड्यूल करने और A/B टेस्ट करने के लिए Shopify (शॉपिफाई) का नेटिव टूल है। किसी थीम या थीम में बदलाव को किसी खास तारीख और समय पर पब्लिश करने के लिए शेड्यूल करें। स्टोर को अपने आप पुरानी स्थिति में लाने के लिए एक अंतिम तारीख तय करें। या अपनी मौजूदा थीम और उसके दूसरे वर्शन के बीच ट्रैफ़िक बाँटकर कन्वर्शन रेट मापें। Rollouts (रोलआउट्स) सभी Shopify (शॉपिफाई) प्लान्स पर उपलब्ध है। Shopify Plus (शॉपिफाई प्लस) स्टोर चेकआउट और कस्टमर अकाउंट कॉन्फ़िगरेशन भी शेड्यूल कर सकते हैं।

डेवलपमेंट बनाम स्टेजिंग बनाम लाइव साइट्स

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

डेवलपमेंट साइट

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

स्मृति कहती हैं, “डेवलपमेंट स्टोर आमतौर पर टेस्टिंग के लिए इस्तेमाल होते हैं, और आप चीज़ों को लाइव नहीं करते। आपके खरीदार डेवलपमेंट स्टोर पर हो रही किसी भी चीज़ को नहीं देख पाएँगे, और आपको वे बदलाव अपने लाइव स्टोर में अलग से करने होंगे।”

स्टेजिंग साइट

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

स्टेजिंग वेबसाइट्स ऑनलाइन रहती हैं, आमतौर पर किसी स्टेजिंग डोमेन पर, जिसका URL staging.yourwebsitename.com जैसा होता है। Shopify (शॉपिफाई) पर, यह आपकी डुप्लिकेट या डेवलपमेंट साइट होगी।

स्मृति कहती हैं, “स्टेजिंग सिर्फ़ टीम के अंदर इस्तेमाल के लिए होती है। आपके खरीदार उस अनुभव को नहीं देख पाते।”

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

स्टेजिंग साइट लाइव होने के बाद, प्रोजेक्ट से जुड़े लोग इसकी समीक्षा करके अपना फ़ीडबैक देते हैं। इसके बाद कोड वापस डेवलपमेंट साइट पर चला जाता है। यहाँ डेवलपर्स बताई गई समस्याओं को ठीक करके बदलावों को दोबारा स्टेजिंग साइट पर भेज देते हैं। यह प्रक्रिया तब तक चलती है, जब तक सभी संबंधित लोग इसे मंज़ूरी न दे दें।

लाइव साइट्स

लाइव साइट अंतिम, सार्वजनिक रूप से दिखने वाला वर्शन होता है, जिसे प्रोडक्शन एनवायरनमेंट, प्रोडक्शन साइट, या शॉर्ट में प्रोड भी कहते हैं।

स्मृति कहती हैं, “प्रोडक्शन वह सब कुछ है, जो आपके खरीदारों को दिखता है। यहाँ कोई असली व्यक्ति आपकी साइट पर जाकर खरीदारी कर सकता है।”

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

अपने Shopify (शॉपिफाई) स्टोर के लिए स्टेजिंग साइट का इस्तेमाल क्यों करें?

साइट अपडेट अनजाने में यूज़र एक्सपीरियंस पर पानी फेर सकती हैं, इसीलिए स्टेजिंग साइट पर टेस्टिंग वेबसाइट डेवलपमेंट और रखरखाव प्रक्रिया का एक एहम हिस्सा होती है।

स्मृति कहती हैं, “सबसे बड़ा फ़ायदा अपने स्टोर में किए जा रहे किसी भी बड़े बदलाव को टेस्ट करना होता है। और कभी-कभी आप एंड-टू-एंड टेस्टिंग करना चाहते हैं। आपने एक बदलाव किया। चेकआउट पूरा होने तक आगे के सभी चरणों पर उसका क्या असर पड़ता है?”

एक स्टेजिंग साइट इसमें मदद करती है:

• यूज़र एक्सपीरियंस को प्रभावित किए बिना एलिमेंट्स टेस्ट करें। अपने ग्राहकों के यूज़र एक्सपीरियंस को खराब किए बिना डिज़ाइन और नए फ़ीचर्स के साथ एक्सपेरिमेंट करें।
• सार्वजनिक रोल-आउट से पहले बग पकड़ें। कार्ट की समस्याएँ, काम न करने वाले बटन, या सही से न दिखने वाली प्रोडक्ट इमेज जैसी गलतियाँ ढूँढ़ें।
• साइट को बाधित किए बिना इंटीग्रेशन टेस्ट करें। लाइव साइट को प्रभावित किए बिना थर्ड-पार्टी इंटीग्रेशन जैसे API (एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस) या शिपिंग कैलकुलेटर टेस्ट करें।
• प्रोडक्ट से जुड़े लोगों के साथ मिलकर काम करें। समीक्षा और बदलावों पर मिलकर काम करने के लिए अलग-अलग टीमों, डिज़ाइनरों, और संबंधित लोगों को इन्वाइट करें।
• ग्राहकों की तरह साइट का इस्तेमाल करके देखें। इससे आप खरीदारी के अनुभव में कमियाँ ढूँढ पाएँगे। Figma (फ़िग्मा) जैसे टूल में इंटरैक्टिव डिज़ाइन फ़ाइलों के मुकाबले यह वास्तविक यूज़र एक्सपीरियंस की बेहतर तस्वीर देता है।
• वेबसाइट परफ़ॉर्मेंस टेस्ट करें। क्या आपकी अपडेट्स आपकी साइट को धीमा कर रहे हैं? एक स्टेजिंग साइट आपको तकनीकी परफ़ॉर्मेंस पर पड़ने वाले असर को टेस्ट करने देती है, जिसका ऑर्गैनिक सर्च रैंकिंग पर भी असर पड़ सकता है।

Shopify (शॉपिफाई) पर स्टेजिंग साइट बनाने के 3 तरीके

• अपनी थीम डुप्लिकेट करें
• एक डेवलपमेंट स्टोर बनाएँ
• एक ऐप का इस्तेमाल करें

स्टैंडर्ड Shopify (शॉपिफाई) वेबसाइट्स के साथ स्टेजिंग साइट नहीं आती, इसलिए वह आपको खुद ही बनानी पड़ती है। ऐसा करने के तीन तरीके हैं:

अपनी थीम डुप्लिकेट करें

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

यह एक तेज़ सेट-अप प्रक्रिया है, जिसमें बस कुछ ही क्लिक लगते हैं। आपको थर्ड-पार्टी ऐप्स इंस्टॉल करने की भी ज़रूरत नहीं पड़ती, क्योंकि आपका स्टेजिंग एनवायरनमेंट Shopify (शॉपिफाई) के एडमिन पैनल में ही बन जाता है।

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

स्मृति कहती हैं, “एक डुप्लिकेट थीम सिर्फ़ उसी खास थीम पर काम करती है। यह Shopify (शॉपिफाई) के दूसरे हिस्सों के साथ इंटरैक्ट नहीं करती।”

अपनी थीम डुप्लिकेट करके Shopify (शॉपिफाई) में स्टेजिंग साइट बनाने का तरीका यहाँ दिया गया है:

1. अपने Shopify (शॉपिफाई) एडमिन पैनल में Online Store (ऑनलाइन स्टोर) > Themes (थीम्स) पर जाएँ।

2. Current Theme (करंट थीम) > Actions (एक्शन्स) के तहत, Duplicate (डुप्लीकेट) चुनें।

3. अब आपके पास अपनी लाइव थीम की एक बिल्कुल वैसी ही कॉपी है। इसे लाइव साइट को प्रभावित किए बिना बेझिझक एडिट करें। इसका प्रीव्यू देखने के लिए आप Preview (प्रीव्यू) पर क्लिक कर सकते हैं।

4. टेस्टिंग पूरी होने के बाद आप अपनी लाइव साइट पर ज़रूरी बदलाव कर सकते हैं।

ध्यान रखें कि आपको अपनी मौजूदा साइट पर जोड़े गए एलिमेंट्स को अपनी लाइव साइट में अलग से जोड़ना होगा।

एक डेवलपमेंट स्टोर बनाएँ

इस बारे में और जानने के लिए आप इस वीडियो को देख सकते हैं। ज़रूरत पड़ने पर सबटाइटल्स ऑन कर लें (ऑटो जेनरेट)।

Shopify (शॉपिफाई) पार्टनर अकाउंट का इस्तेमाल करके डेवलपमेंट स्टोर बनाना फ़ीचर्स में बदलाव टेस्ट करने का सबसे अच्छा विकल्प है, जिसमें कस्टम कोड या थर्ड-पार्टी इंटीग्रेशन शामिल हैं। पार्टनर अकाउंट आपको टेस्टिंग के लिए एक पूरा स्टोर बनाने देता है।

पार्टनर अकाउंट उन डेवलपर्स, डिज़ाइनरों, और एजेंसियों के लिए बनाए गए हैं, जो ग्राहकों के लिए स्टोर बनाकर उन्हें मैनेज करते हैं। ये फ़्री होते हैं और आपको डेवलपमेंट स्टोर का एक्सेस देते हैं। इससे आप एक निजी एनवायरनमेंट में अपनी मुख्य साइट के डिज़ाइन और फ़ीचर्स समेत हर चीज़ की कॉपी बना सकते हैं। स्मृति कहती हैं, “इसे लाइव स्टोर की तुलना में एक ड्राफ्ट की तरह समझें।”

स्मृति कहती हैं, “ज़्यादातर बड़े स्टोर ओनर्स डेवलपमेंट स्टोर का इस्तेमाल करते हैं, क्योंकि आप देखना चाहते हैं कि एक बदलाव करने पर आपके स्टोर के अलग-अलग हिस्से कैसे काम करते हैं।” उदाहरण के लिए, कीमत में एक छोटा-सा बदलाव कार्ट लॉजिक, शिपिंग कीमतों, और इंटीग्रेटेड ऐप्स को प्रभावित कर सकता है। डेवलपमेंट स्टोर में आप इन प्रभावों की पहचान किसी ग्राहक से पहले कर सकते हैं।

डेवलपमेंट स्टोर का इस्तेमाल करके स्टेजिंग साइट बनाने का तरीका यहाँ दिया गया है:

1. Shopify (शॉपिफाई) पार्टनर अकाउंट के लिए साइन-अप करें।

2. Stores (स्टोर्स) > Create Store (क्रिएट स्टोर) पर जाएँ।

3. स्टोर टाइप के तौर पर Development (डेवलपमेंट) चुनें।

4. इसे “staging-yourwebsite” जैसा कोई नाम दें, ताकि इसे अपने लाइव स्टोर से आसानी से अलग पहचाना जा सके।

5. प्रोडक्ट जोड़ें, अपनी थीम इंस्टॉल करें, और सेटिंग्स को अपने लाइव स्टोर की तरह कॉन्फ़िगर करें। प्रोडक्ट, ग्राहकों, और ऑर्डर को एक साथ ट्रांसफ़र करने के लिए CSV फ़ाइलों का इस्तेमाल करके अपने स्टोर का बैकअप लें। अपनी थीम का बैकअप लेने के लिए उसे अपने Shopify (शॉपिफाई) एडमिन से डाउनलोड करें।

अब आप अपनी असली साइट को जोखिम में डाले बिना ग्राहक की तरह पूरी साइट का इस्तेमाल करके देख सकते हैं।

हालांकि Shopify (शॉपिफाई) डेवलपमेंट स्टोर टेस्टिंग के लिए फ़्री हैं, लेकिन इनकी कुछ सीमाएँ हैं। मिसाल के तौर पर, आप सिर्फ़ फ़्री और पार्टनर-फ़्रेंडली ऐप्स इंस्टॉल कर सकते हैं और सिर्फ़ टेस्ट शिपिंग लेबल बना सकते हैं।

अगर आप अतिरिक्त ऐप्स टेस्ट करना चाहते हैं या असली शिपमेंट के लिए शिपिंग लेबल बनाना चाहते हैं, तो आप Basic (बेसिक) प्लान पर एक नया पेड स्टोर सेट कर सकते हैं। बिल्कुल थीम डुप्लिकेट करने की तरह, आपको अपने वेबसाइट एलिमेंट्स को अपनी स्टेजिंग साइट पर अलग से कॉपी करना होगा।

एक ऐप का इस्तेमाल करें

कभी-कभी, अपनी वेबसाइट को मैन्युअली डुप्लिकेट करने पर कुछ हिस्से छूट सकते हैं। स्टेजिंग ऐप की मदद से पूरी साइट की हूबहू कॉपी बनाई जा सकती है, खासकर अगर आपकी थीम जटिल हो।

Duplify (डुप्लीफाई) (जो एक सीमित फ़्री प्लान देता है) जैसे कुछ स्टेजिंग टूल्स आपको एक ऐसा स्टेजिंग एनवायरनमेंट बनाने देते हैं, जो आपकी पूरी साइट की नकल करता है। इसके बाद बदलावों को लाइव करने से पहले आप मौजूदा पेज और प्रोडक्ट टेस्ट कर सकते हैं।

Rewind Staging (रिवाइंड स्टेजिंग) एक ऐसी ही ऐप है, जिसमें फ़्री ट्रायल और थीम बैकअप की सुविधा मिलती है। इससे कुछ गड़बड़ होने पर आप पिछले वर्शन पर लौट सकते हैं। शुरू करने के लिए बस Shopify App Store (शॉपिफाई ऐप स्टोर) पर जाकर स्टेजिंग ऐप्स खोजें।

Rewind Staging (रिवाइंड स्टेजिंग) का इस्तेमाल करके स्टेजिंग साइट बनाने का तरीका यहाँ दिया गया है:

1. Shopify App Store (शॉपिफाई ऐप स्टोर) से अपनी लाइव साइट पर Rewind Staging (रिवाइंड स्टेजिंग) इंस्टॉल करें।

2. अपने लाइव स्टोर को अपने Source Store (सोर्स स्टोर) के तौर पर चुनें।

3. अपने डेवलपमेंट स्टोर पर Rewind Staging (रिवाइंड स्टेजिंग) इंस्टॉल करें।

4. अपने डेवलपमेंट स्टोर को अपने Destination Store (डेस्टिनेशन स्टोर) के तौर पर चुनें।

5. दोनों स्टोर को जोड़ने के लिए अपने Source (सोर्स) स्टोर की की (कुंजी) को अपने Destination (डेस्टिनेशन) स्टोर में कॉपी करें।

6. स्टेजिंग साइट पर कॉपी की जाने वाली जानकारी चुनें, ताकि वह आपकी लाइव साइट की नकल करे।

7. दोनों स्टोर के बीच सिंक्रोनाइज़ेशन बनाए रखने के लिए Continuously for copy changes (कंटीन्यूअसली फ़ॉर कॉपी चेंजेस) का विकल्प चुनें।

8. कॉपी शुरू करने के लिए Begin task (बिगिन टास्क) पर क्लिक करें।