Checkout Blocks में ब्रैंडिंग एडिटर का उपयोग करना

आप Checkout Branding API द्वारा संचालित Checkout Blocks में ब्रैंडिंग एडिटर का उपयोग करके, बिना कोई कोड बदले अपने चेकआउट और खाता पेज के एस्थेटिक्स को कस्टमाइज़ कर सकते हैं।

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

अपने Shopify एडमिन से ब्रैंडिंग एडिटर शुरू करने के लिए, ऐप > Checkout Blocks पर क्लिक करें और फिर ब्रैंडिंग एडिटर पर क्लिक करें.

चेकआउट के रंग कस्टमाइज़ करें

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

चरण:

ग्लोबल रंग कस्टमाइज़ करें
  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. रंग सेक्शन में, ग्लोबल रंग पर क्लिक करें।

  4. किसी भी मौजूदा चेकआउट रंग को ओवरराइड करने के लिए, ग्लोबल रंग सेक्शन में, आइकन पर क्लिक करें और फिर नीचे दी गई कार्रवाइयों में से कोई एक करके वह रंग चुनें जो आप चाहते हैं:

    • रंग चुनने के लिए कलर पिकर का इस्तेमाल करें।
    • उपलब्ध फ़ील्ड में HEX कलर कोड टाइप करें।
  5. सेव करें पर क्लिक करें।

कलर स्कीम कस्टमाइज़ करें
  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. रंग सेक्शन में, किसी खास कलर स्कीम को कस्टमाइज़ करने के लिए स्कीम 1, स्कीम 2, स्कीम 3 या स्कीम 4 पर क्लिक करें।

  4. नीचे दिए गए कॉम्पोनेंट में से कोई भी चुनें जिसे आप कस्टमाइज़ करना चाहते हैं:

    • मुख्य रंग
    • फ़ॉर्म कंट्रोल
    • मुख्य बटन
    • सेकंडरी बटन
  5. बेस सेक्शन में, उस रंग के प्रकार के बगल में दिए गए आइकन पर क्लिक करें जिसे आप कस्टमाइज़ करना चाहते हैं और फिर नीचे दी गई कार्रवाइयों में से कोई एक करके वह रंग चुनें जो आप चाहते हैं:

    • रंग चुनने के लिए कलर पिकर का इस्तेमाल करें।
    • उपलब्ध फ़ील्ड में HEX कलर कोड टाइप करें।
  6. वैकल्पिक: अगर आप फ़ॉर्म कंट्रोल, मुख्य बटन या सेकंडरी बटन के लिए स्कीम को संपादित कर रहे हैं, तो आप चुनने पर या होवर करने पर इंटरैक्शन व्यवहार के लिए भी रंगों को कस्टमाइज़ कर सकते हैं। उस रंग के प्रकार के बगल में दिए गए आइकन पर क्लिक करें जिसे आप कस्टमाइज़ करना चाहते हैं और फिर नीचे दी गई कार्रवाइयों में से कोई एक करके वह रंग चुनें जो आप चाहते हैं:

    • रंग चुनने के लिए कलर पिकर का इस्तेमाल करें।
    • उपलब्ध फ़ील्ड में HEX कलर कोड टाइप करें।
  7. सेव करें पर क्लिक करें।

चेकआउट एलिमेंट कस्टमाइज़ करें

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

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

चरण:

  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. कस्टमाइज़ेशन सेक्शन में, उस एलिमेंट पर क्लिक करें जिसे आप कस्टमाइज़ करना चाहते हैं, जैसे कि हैडर और लोगो

  4. उपलब्ध कस्टमाइज़ेशन विकल्पों का उपयोग करके, अपनी पसंद के अनुसार चेकआउट एलिमेंट को एडजस्ट करें।

  5. सेव करें पर क्लिक करें।

चेकआउट कॉन्फ़िगरेशन स्विच करें

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

अपने ऐक्टिव और ड्राफ़्ट चेकआउट कॉन्फ़िगरेशन को मैनेज करने के बारे में ज़्यादा जानें।

चरण:

  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. ऐक्टिव कॉन्फ़िगरेशन और साथ ही किसी भी ड्राफ़्ट कॉन्फ़िगरेशन की सूची वाला ड्रॉप-डाउन मेनू खोलने के लिए वर्तमान चेकआउट कॉन्फ़िगरेशन के नाम पर क्लिक करें, और फिर उस चेकआउट कॉन्फ़िगरेशन को चुनें जिसे आप कस्टमाइज़ करना चाहते हैं:

    • मौजूदा कॉन्फ़िगरेशन चुनें जिसे आप संपादित करना चाहते हैं।
    • अपने Shopify एडमिन की चेकआउट सेटिंग पर रीडायरेक्ट होने के लिए ⊕ नया कॉन्फ़िगरेशन बनाएं पर क्लिक करें।

अपने चेकआउट का प्रीव्यू करें

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

चरण:

  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. अपने चेकआउट कॉन्फ़िगरेशन के रंगों या चेकआउट एलिमेंट में कोई भी कस्टमाइज़ेशन करें जिसे आप एडजस्ट करना चाहते हैं।

  4. प्रीव्यू करें पर क्लिक करें।

चेकआउट कॉन्फ़िगरेशन एक्सपोर्ट और इंपोर्ट करना

आप JSON फ़ाइलों का उपयोग करके चेकआउट कॉन्फ़िगरेशन एक्सपोर्ट और इंपोर्ट कर सकते हैं।

चेकआउट कॉन्फ़िगरेशन एक्सपोर्ट करें:

  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. ब्रैंडिंग एडिटर का उपयोग करके कस्टमाइज़ेशन लागू किए गए चेकआउट कॉन्फ़िगरेशन को चुनें।

  4. ज़्यादा कार्रवाइयां > कॉन्फ़िगरेशन एक्सपोर्ट करें पर क्लिक करें।

चेकआउट कॉन्फ़िगरेशन आपके स्थानीय डिवाइस पर एक .json के रूप में डाउनलोड हो जाता है।

चेकआउट कॉन्फ़िगरेशन इंपोर्ट करें:

  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. वह चेकआउट कॉन्फ़िगरेशन चुनें जिस पर आप इंपोर्ट की गई ब्रैंडिंग प्रोफ़ाइल लागू करना चाहते हैं।

  4. ज़्यादा कार्रवाइयां > कॉन्फ़िगरेशन इंपोर्ट करें पर क्लिक करें।

  5. चेकआउट ब्रैंडिंग इंपोर्ट करें डायलॉग में, अपनी ब्रैंडिंग JSON फ़ाइल अपलोड करें:

    1. फ़ाइल जोड़ें पर क्लिक करें।
    2. अपने डिवाइस से उपयुक्त JSON फ़ाइल चुनें।
    3. इंपोर्ट करें और जारी रखें पर क्लिक करें।
  6. पहले से लोड किए गए कस्टमाइज़ेशन कॉन्फ़िगरेशन की समीक्षा करें। ज़रूरत के मुताबिक इसमें बदलाव करें।

  7. सेव करें पर क्लिक करें।

अपनी चेकआउट स्टाइल को डिफ़ॉल्ट पर रीसेट करें

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

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

चरण:

  1. अपने Shopify एडमिन से, ऐप > Checkout Blocks पर जाएं।

  2. ब्रैंडिंग एडिटर पर क्लिक करें।

  3. उस चेकआउट कॉन्फ़िगरेशन को चुनें जिसे आप रीसेट करना चाहते हैं.

  4. डिफ़ॉल्ट पर रीसेट करें पर क्लिक करें.

  5. डिफ़ॉल्ट स्टाइल पर रीसेट करें? डायलॉग में, जारी रखें पर क्लिक करें.