थीम कोड एडिट करना

आप कोड एडिटर की मदद से अपने ऑनलाइन स्टोर में विस्तृत बदलाव करने के लिए अपनी थीम का कोड एडिट कर सकते हैं। किसी थीम को बनाने वाली ज़्यादातर फ़ाइलों में Liquid होता है, जो Shopify की टेम्पलेटिंग भाषा है। थीम फ़ाइलों में HTML, CSS, JSON और JavaScript भी होते हैं। किसी थीम का कोड सिर्फ़ तभी एडिट करें, जब आप HTML और CSS जानते हों और आपको Liquid की बुनियादी समझ हो।

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

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

थीम कोड एडिटर लेआउट

अपना थीम कोड एडिट करें

आप अपनी थीम की फ़ाइलों को बदलने के लिए कोड एडिटर का इस्तेमाल कर सकते हैं।

चरण:

डेस्कटॉप
  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

मोबाइल
  1. Shopify ऐप से, Menu आइकन पर टैप करें।

  2. बिक्री चैनल सेक्शन में, ऑनलाइन स्टोर पर टैप करें।

  3. थीम मैनेज करें पर टैप करें।

  4. होरिजोंटल मेनू > कोड एडिट करें पर टैप करें।

बदलाव सेव करना

जब आप किसी फ़ाइल को एडिट करते हैं, तो टैब के नाम के आगे एक डॉट दिखता है, जो बिना सेव किए गए बदलावों को दिखाता है। अपने बदलावों को सेव करने के लिए, सेव करें बटन पर क्लिक करें। आप अपने बदलावों को सेव करने के लिए Mac पर + S या Windows पर Ctrl + S भी दबा सकते हैं।

सेव करें बटन के बगल में बिना सेव की गई फ़ाइल दिखाने वाला एक आंशिक कोड एडिटर

थीम कोड को फ़ॉर्मेट करना

कोड इंडेंटेशन को ठीक करने के लिए, Mac पर + Shift + P या Windows पर Ctrl + Shift + P से कमांड पैलेट खोलें, format डालें और फिर फ़ॉर्मेट दस्तावेज़ चुनें।

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. वह फ़ाइल खोलें जिसे आप फ़ॉर्मेट करना चाहते हैं।

  4. Mac पर + P या Windows पर Ctrl + P दबाएं।

  5. कमांड पैलेट में, format डालें, फिर अपने कीबोर्ड पर Enter दबाएं।

  6. फ़ाइल सेव करें।

चुने गए कोड फ़ॉर्मेटिंग विकल्प के साथ कमांड पैलेट

फ़ाइल बदलावों को ट्रैक करना

संशोधित थीम फ़ाइल को पिछले वर्शन में रीस्टोर करने के लिए, उस फ़ाइल के टाइमलाइन व्यू का उपयोग करें।

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

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

थीम एडिटर में वर्शन कंट्रोल

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. वह मौजूदा फ़ाइल खोलें जिसकी आप समीक्षा करना या जिसे रीस्टोर करना चाहते हैं।

  4. वैकल्पिक: यदि आप कोई मौजूदा बदलाव रखना चाहते हैं, तो रीस्टोर करने से पहले मौजूदा फ़ाइल की सामग्री किसी सुरक्षित जगह पर कॉपी कर लें।

  5. अंतर की तुलना करने के लिए, टाइमलाइन व्यू में टाइमलाइन की किसी एंट्री पर क्लिक करें।

  6. फ़ाइल की पूरी सामग्री को चुने गए पिछले वर्शन से रिप्लेस करने के लिए, टाइमलाइन एंट्री पर राइट-क्लिक करें और फिर सामग्री रीस्टोर करें चुनें।

  7. रीस्टोर करें पर क्लिक करें।

थीम चेक

कोड एडिटर में Theme Check, एक ऐसा फ़ीचर शामिल है, जो आपकी लाइव थीम में गलतियों का पता लगाने के बजाय कोड लिखते समय ही तुरंत फ़ीडबैक देकर गलतियों को रोकने में मदद करता है।

कोड एडिटर में, Theme Check एडिट किए गए कोड में नीचे दी गई गलतियों की पहचान कर सकता है:

  • पार्सर ब्लॉक करने वाली स्क्रिप्ट, जो स्टोरफ़्रंट को धीमा कर सकती हैं
  • ट्रांसलेशन फ़ाइल के बीच असंगतता, जैसे कि मिसिंग ट्रांसलेशन की या ऐसे ट्रांसलेशन जो किसी लोकेल फ़ाइल में मेल नहीं खाते
  • मिसिंग टेम्पलेट

गलतियों को कोड के नीचे एक लाल लाइन से दर्शाया जाता है। गलती देखने के लिए, हाइलाइट की गई लाइन पर अपना माउस घुमाएं।

कोड एडिटर में खोजना और बदलना.

आप नीचे दिए गए तरीकों में से किसी भी एक का इस्तेमाल करके कोड एडिटर में खोज सकते हैं:

  • किसी खास फ़ाइल का कोड खोजें।
  • थीम की सभी फ़ाइल का कोड खोजें।

आप किसी खास फ़ाइल में या सभी थीम फ़ाइल में कोड के कई इंस्टेंस को भी बदल सकते हैं। आप फ़ाइल खोलने के लिए नाम से भी फ़ाइल खोज सकते हैं।

किसी फ़ाइल में खोजना.

आप किसी खास फ़ाइल में कोड खोज सकते हैं और उसे बदल सकते हैं। कोड के हर इंस्टेंस की समीक्षा करने के लिए, एरो की का इस्तेमाल करें।

कोड एडिटर में किसी फ़ाइल के अंदर खोज UI

कोड खोजने के बाद, आप किसी फ़ाइल में कोड को बदल सकते हैं।

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. वह फ़ाइल खोलें जिसमें आप खोजना चाहते हैं।

  4. Mac पर + F या Windows पर Ctrl + F दबाएं।

  5. सर्च फ़ील्ड में, अपना खोज शब्द डालें।

  6. वैकल्पिक: कोड बदलने के लिए, नीचे दी गई कार्रवाइयां पूरी करें:

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

सभी फ़ाइल में खोजना.

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

कोड एडिटर में खोज साइड पैनल

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. खोज पैनल खोलने के लिए खोजें आइकन पर क्लिक करें।

  4. सर्च फ़ील्ड में, अपना खोज शब्द डालें।

  5. वैकल्पिक: कोड बदलने के लिए, नीचे दी गई कार्रवाइयां पूरी करें:

  • खोज मॉडल में, दायां एरो आइकन पर क्लिक करें।
  • बदलें फ़ील्ड में, बदलने वाला कोड डालें।
  • एक बार में एक इंस्टेंस बदलें या एक बार में सभी इंस्टेंस बदलें।

बेहतर खोज विकल्प.

अपने खोज नतीजों को सीमित करने के लिए, नीचे दिए गए खोज विकल्पों में से एक या ज़्यादा का इस्तेमाल करें:

  • केस मैच करें, केस से मेल खाने वाले खोज शब्दों को दिखाता है। उदाहरण के लिए, अगर आप product डालते हैं, तो खोज "product" या "Product" के किसी भी इंस्टेंस को हाइलाइट करती है। अगर आप केस मैच करें चुनते हैं, तो खोज केवल product के इंस्टेंस को हाइलाइट करती है।
  • पूरा शब्द मैच करें, सटीक शब्द से मेल खाने वाले खोज शब्दों को दिखाता है और आंशिक मिलान को शामिल नहीं करता है। उदाहरण के लिए, अगर आप कार्ट डालते हैं, तो खोज "कार्ट" के इंस्टेंस को हाइलाइट करती है, लेकिन "कार्टून" को नहीं।
  • रेगुलर एक्सप्रेशन का इस्तेमाल करें, रेगुलर एक्सप्रेशन (regex) से मेल खाने वाले खोज नतीजे दिखाता है। एक regex, कैरेक्टर की एक स्ट्रिंग होती है जो टेक्स्ट में मैच पैटर्न तय करती है।

सर्च पैनल में, आप खोज नतीजों में शामिल करने या बाहर रखने के लिए फ़ाइल और फ़ोल्डर भी चुन सकते हैं।

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

आप फ़ाइल डायरेक्टरी व्यू से किसी खास फ़ोल्डर में भी खोज सकते हैं। फ़ोल्डर पर राइट-क्लिक करें और फिर ड्रॉपडाउन मेनू से फ़ोल्डर में ढूंढें... चुनें।

थीम फ़ाइल मैनेज करना.

आप अपने थीम कोड में फ़ाइल मैनेज कर सकते हैं। आप फ़ाइल हटा सकते हैं, नई फ़ाइल जोड़ सकते हैं, फ़ाइल का नाम बदल सकते हैं और कोई पिछला वर्शन उपलब्ध होने पर, संशोधित मौजूदा कोड फ़ाइल को उसके टाइमलाइन व्यू से रीस्टोर कर सकते हैं। assets फ़ोल्डर में मौजूद एसेट फ़ाइल, जैसे कि इमेज, CSS, JavaScript और फ़ॉन्ट का टाइमलाइन इतिहास नहीं होता है।

थीम फ़ाइल खोलना.

थीम फ़ाइल खोलने के लिए, किसी फ़ोल्डर पर क्लिक करें और फिर एक्सप्लोरर से फ़ाइल के नाम पर क्लिक करें। आप नाम या एक्सटेंशन से भी फ़ाइल खोज सकते हैं और फिर फ़ाइल खोल सकते हैं।

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. Mac पर + P या Windows पर Ctrl + P दबाएं।

  4. खोज बार में फ़ाइल का नाम डालें और फ़ाइल चुनें या हाल ही में खोली गई सूची से कोई फ़ाइल चुनें।

नई थीम फ़ाइल जोड़ना.

फ़ाइल जोड़ने के लिए, एक फ़ोल्डर चुनें, नई फ़ाइल आइकन पर क्लिक करें और फिर फ़ाइल का नाम और फ़ाइल एक्सटेंशन डालें।

फ़ाइल नामों में A-Z, 0-9 कैरेक्टर शामिल हो सकते हैं और कैरेक्टर स्पेस शामिल नहीं हो सकते हैं। शब्दों को डैश या अंडरस्कोर से अलग करें। फ़ाइल एक्सटेंशन को पीरियड . और एक्सटेंशन प्रकार से परिभाषित किया जाता है। उदाहरण के लिए, .liquid या .css

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. उस फ़ोल्डर पर क्लिक करें जिसमें आप नई फ़ाइल जोड़ना चाहते हैं।

  4. फ़ोल्डर के नाम पर राइट-क्लिक करें और ड्रॉप-डाउन मेनू से नई फ़ाइल... चुनें।

  5. फ़ाइल के लिए एक नया नाम डालें।

  6. अपने कीबोर्ड पर Enter दबाएं।

नई एसेट अपलोड करना.

आप कोड एडिटर के एसेट फ़ोल्डर में कोई नई एसेट, जैसे कोई आइकन या इमेज फ़ाइल अपलोड कर सकते हैं।

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. एसेट फ़ोल्डर पर राइट-क्लिक करें।

  4. अपलोड करें... पर क्लिक करें।

  5. वह फ़ाइल चुनें जिसे आप अपलोड करना चाहते हैं।

  6. खोलें पर क्लिक करें।

थीम फ़ाइल का नाम बदलना.

आप किसी फ़ाइल का नाम बदलने के लिए उस पर राइट-क्लिक कर सकते हैं। ध्यान रखें कि आप फ़ाइल एक्सटेंशन में बदलाव न करें या उसे न हटाएं। फ़ाइल एक्सटेंशन को एक पीरियड . और एक्सटेंशन के प्रकार से तय किया जाता है। उदाहरण के लिए, .liquid या .css। फ़ाइल के नाम में A-Z, 0-9 कैरेक्टर शामिल हो सकते हैं और इसमें कैरेक्टर स्पेस शामिल नहीं हो सकते हैं। शब्दों को अलग करने के लिए डैश या अंडरस्कोर का उपयोग करें। अगर फ़ाइल का नाम मान्य नहीं है, तो नया फ़ाइल नाम सेव नहीं होगा।

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. किसी फ़ाइल पर राइट-क्लिक करें और ड्रॉप-डाउन मेनू से नाम बदलें... चुनें।

  4. फ़ाइल के लिए एक नया नाम डालें।

  5. अपने कीबोर्ड पर Enter दबाएं।

थीम फ़ाइल को डिलीट करना

आप अपनी थीम की किसी भी फ़ाइल को डिलीट कर सकते हैं। डिलीट की गई थीम फ़ाइल को रिकवर नहीं किया जा सकता।

चरण:

  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. होरिजोंटल मेनू > कोड एडिट करें पर क्लिक करें।

  3. किसी फ़ाइल पर राइट-क्लिक करें और ड्रॉप-डाउन मेनू से हमेशा के लिए डिलीट करें चुनें।

  4. डिलीट करें पर क्लिक करें।