Shopify में कार्ट ड्रॉवर कैसे बनाएं.

सामग्री की तालिका

1. परिचय
2. कार्ट ड्रॉवर को समझना
3. शॉपिफाई में कार्ट ड्रॉवर बनाना
4. कार्ट ड्रॉवर के लिए सर्वोत्तम प्रथाएँ
5. निष्कर्ष
6. अक्सर पूछे जाने वाले प्रश्न

परिचय

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

एक कार्ट ड्रॉवर ग्राहकों को उनकी चयनित वस्तुओं और कुल लागतों को वर्तमान पृष्ठ को छोड़े बिना देखने की अनुमति देता है, अनवरत खरीदारी यात्रा को बढ़ावा देता है। आज की प्रतिस्पर्धी ई-कॉमर्स परिदृश्य में, अपने स्टोर के इस पहलू को अनुकूलित करना ग्राहकों को बनाए रखने और बिक्री को अधिकतम करने के लिए महत्वपूर्ण है।

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

आप क्या सीखेंगे

• ई-कॉमर्स में कार्ट ड्रॉवर का महत्व।
• तीसरे पक्ष के ऐप का उपयोग किए बिना अपने शॉपिफाई स्टोर पर एक कस्टम कार्ट ड्रॉवर कैसे लागू करें।
• अपने कार्ट ड्रॉवर के साथ उपयोगकर्ता अनुभव को बढ़ाने के लिए सर्वोत्तम प्रथाएँ।

चलें शुरू करें!

कार्ट ड्रॉवर को समझना

कार्ट ड्रॉवर क्या है?

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

कार्ट ड्रॉवर का महत्व

आपके शॉपिफाई स्टोर में कार्ट ड्रॉवर होने से कई लाभ होते हैं:

1. उपयोगकर्ता अनुभव में सुधार: शॉपर्स अपने ब्राउज़िंग प्रवाह को बाधित किए बिना अपने कार्ट की सामग्री को जल्दी से देख सकते हैं।

2. कार्ट छोड़ने में कमी: ग्राहकों को उनके आइटम और कुल लागतों को देखने में सरलता प्रदान करके, एक कार्ट ड्रॉवर कार्ट छोड़ने की संभावना को कम करने में सहायक हो सकता है।

3. बिक्री में वृद्धि: एक सुगम चेकआउट प्रक्रिया अधिक पूर्ण लेन-देन की संभावना को बढ़ा सकती है, जो आपकी लाभप्रदता पर सकारात्मक प्रभाव डालती है।

4. मोबाइल अनुकूलन: मोबाइल उपकरणों पर अधिक उपभोक्ता खरीदारी करते हुए, एक कार्ट ड्रॉवर छोटे स्क्रीन पर अधिक उपयोगकर्ता-अनुकूल अनुभव प्रदान करता है।

5. कस्टमाइज़ेशन विकल्प: एक अच्छी तरह से डिज़ाइन किया गया कार्ट ड्रॉवर आपके स्टोर के ब्रांडिंग से मेल खाने के लिए अनुकूलित किया जा सकता है, जिससे आपकी कुल आकर्षण बढ़ती है।

शॉपिफाई में कार्ट ड्रॉवर बनाना

पूर्वापेक्षाएँ

निर्माण प्रक्रिया में जाने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित है:

• आपके शॉपिफाई स्टोर के प्रशासन पैनल का एक्सेस।
• HTML, CSS, और JavaScript का बुनियादी ज्ञान।
• एक थीम जो कस्टम कोडिंग की अनुमति देती है (अधिकतर शॉपिफाई थीम करती हैं)।

चरण-दर-चरण मार्गदर्शिका

चरण 1: अपने शॉपिफाई कोड संपादक तक पहुंचें

1. अपने शॉपिफाई प्रशासन पैनल में लॉगिन करें।
2. बाईं साइडबार में, ऑनलाइन स्टोर पर जाएं और थीम्स पर क्लिक करें।
3. अपनी सक्रिय थीम खोजें और एक्शन > कोड संपादित करें पर क्लिक करें।

चरण 2: आवश्यक फ़ाइलें बनाएं

1. ऐसेट्स फ़ोल्डर में, दो नई फ़ाइलें बनाएं: drawer.css और drawer.js.

2. drawer.css खोलें और अपने कार्ट ड्रॉवर की उपस्थिति को प्रबंधित करने के लिए निम्नलिखित स्टाइल जोड़ें:

   .drawer {
       display: none;
   }
   .drawer__header {
       padding: 1.5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid #ddd;
   }
   .drawer__close {
       margin: 0;
       padding: 0;
       border: none;
       background-color: transparent;
       cursor: pointer;
   }
   .drawer__wrapper {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       height: 100%;
       width: 100%;
       max-width: 500px;
       z-index: 9999;
       overflow: auto;
       transition: transform 0.3s;
       background-color: #fff;
       display: flex;
       flex-direction: column;
       box-shadow: 0 2px 6px #777;
   }
   .drawer.is-active {
       display: block;
   }
   .drawer.is-visible .drawer__wrapper {
       transform: translateX(0);
   }
   

3. अगले, drawer.js खोलें और ड्रॉवर की कार्यक्षमता प्रबंधित करने के लिए निम्नलिखित JavaScript डालें:

   var drawer = function () {
       var settings = {
           activeClass: 'is-active',
           visibleClass: 'is-visible',
           selectorTarget: '[data-drawer-target]',
           selectorTrigger: '[data-drawer-trigger]',
           selectorClose: '[data-drawer-close]',
       };
   
       var openDrawer = function (trigger) {
           var target = document.getElementById(trigger.getAttribute('aria-controls'));
           target.classList.add(settings.activeClass);
           document.documentElement.style.overflow = 'hidden';
           setTimeout(function () {
               target.classList.add(settings.visibleClass);
           }, 50);
       };
   
       var closeDrawer = function (event) {
           var closestParent = event.closest(settings.selectorTarget);
           closestParent.classList.remove(settings.visibleClass);
           document.documentElement.style.overflow = '';
           setTimeout(function () {
               closestParent.classList.remove(settings.activeClass);
           }, 350);
       };
   
       var clickHandler = function (event) {
           var toggle = event.target,
               open = toggle.closest(settings.selectorTrigger),
               close = toggle.closest(settings.selectorClose);
   
           if (open) {
               openDrawer(open);
           }
           if (close) {
               closeDrawer(close);
           }
           if (open || close) {
               event.preventDefault();
           }
       };
   
       document.addEventListener('click', clickHandler, false);
   };
   
   drawer();
   

चरण 3: HTML संरचना बनाएं

1. सेक्शंस फ़ोल्डर में, drawer.liquid नामक एक नई फ़ाइल बनाएं।

2. ड्रॉवर के लेआउट को परिभाषित करने के लिए निम्नलिखित HTML संरचना डालें:

   <section class="drawer" id="drawer-name" data-drawer-target>
       <div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
       <div class="drawer__wrapper">
           <div class="drawer__header">
               <div class="drawer__title">खरीदारी जारी रखें</div>
               <button class="drawer__close" data-drawer-close aria-label="ड्रॉवर बंद करें"></button>
           </div>
           <div class="drawer__content" id="cart__drawer">
               <div id="cart__drawer_items"></div>
               <div style="margin-top: 50px">
                   <h4>कुल: <span id="cart__total_price"></span></h4>
                   <a id="cart__checkout_btn" href="/hi/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">चेकआउट के लिए आगे बढ़ें</a>
               </div>
           </div>
       </div>
   </section>
   

3. कार्ट डेटा लाने और अपडेट करने के लिए आवश्यक JavaScript जोड़ें:

   <script>
       fetch('/cart.js')
           .then((resp) => resp.json())
           .then((data) => {
               if (data.items.length > 0) {
                   data.items.forEach(function(product) {
                       document.getElementById('cart__drawer_items').innerHTML += '<img src="' + product.featured_image.url + '" alt="' + product.featured_image.alt + '"><h5>' + product.title + '</h5><p>' + product.quantity + ' x ' + Shopify.formatMoney(product.line_price) + '</p>';
                   });
                   document.getElementById('cart__total_price').innerHTML = Shopify.formatMoney(data.total_price);
               } else {
                   document.getElementById('cart__drawer_items').innerHTML = '<p>कार्ट खाली है</p>';
               }
           });
   </script>
   

चरण 4: अपने थीम में ड्रॉवर को संदर्भित करें

1. theme.liquid खोलें और <head> अनुभाग में बनाई गई CSS और JavaScript फ़ाइलें शामिल करें:

   {{ 'drawer.css' | asset_url | stylesheet_tag }}
   {{ 'drawer.js' | asset_url | script_tag }}
   

2. अपने drawer.liquid अनुभाग को <body> टैग के भीतर संदर्भित करें:

   {% section 'drawer' %}
   

चरण 5: हेडर से ड्रॉवर को सक्रिय करें

1. सेक्शंस फ़ोल्डर में header.liquid फ़ाइल खोलें।

2. अपने कार्ट आइकन से संबंधित एंकर टैग को खोजें और इसे इस प्रकार से ड्रॉवर को सक्रिय करने के लिए संशोधित करें:

   <a href="#" class="site-header__icon site-header__cart" data-drawer-trigger aria-controls="drawer-name" aria-expanded="false">
       {% include 'icon-cart' %}
       <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
       <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}">
           <span data-cart-count>{{ cart.item_count }}</span>
       </div>
   </a>
   

3. सभी परिवर्तनों को सहेजें।

अपने कार्ट ड्रॉवर का परीक्षण करना

चरणों को पूरा करने के बाद, आपके शॉपिफाई स्टोर पर कार्ट ड्रॉवर का परीक्षण करना महत्वपूर्ण है:

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

कार्ट ड्रॉवर के लिए सर्वोत्तम प्रथाएँ

अपने कार्ट ड्रॉवर की प्रभावशीलता को अनुकूलित करने के लिए, निम्नलिखित सर्वोत्तम प्रथाओं पर विचार करें:

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

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

• वास्तविक समय अपडेट: ऐसी कार्यक्षमता लागू करें जो ग्राहकों को ड्रॉवर में बिना पृष्ठ को रिफ्रेश किए मात्राएँ अपडेट करने या आइटम हटाने की अनुमति देती है।

• अतिरिक्त बिक्री को प्रोत्साहित करें: कार्ट ड्रॉवर का उपयोग अपसेल या क्रॉस-सेल सुझाव प्रदर्शित करने के लिए करें, ग्राहकों को उनके कार्ट में और भी आइटम जोड़ने के लिए आमंत्रित करें।

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

निष्कर्ष

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

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

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

क्या आप अपने शॉपिफाई स्टोर को बढ़ाने के लिए तैयार हैं? आज ही अपने कार्ट ड्रॉवर को लागू करना शुरू करें और देखें कि यह क्या फर्क डालता है!

अक्सर पूछे जाने वाले प्रश्न

कार्ट ड्रॉवर क्या है?

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

कार्ट ड्रॉवर उपयोगकर्ता अनुभव को कैसे सुधारता है?

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

क्या मैं अपने कार्ट ड्रॉवर का डिज़ाइन कस्टमाइज़ कर सकता हूँ?

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

मुझे कार्ट ड्रॉवर बनाने के लिए किन तकनीकी कौशल की आवश्यकता है?

कार्ट ड्रॉवर बनाने के लिए HTML, CSS, और JavaScript का बुनियादी ज्ञान उपयोगी होता है। शॉपिफाई विस्तृत दस्तावेज़ और संसाधन प्रदान करता है जो स्टोर मालिकों को कस्टम फीचर लागू करने में सहायता करता है।

मैं अपने कार्ट ड्रॉवर का परीक्षण कैसे कर सकता हूँ?

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

क्या कार्ट ड्रॉवर बनाने के लिए तीसरे पक्ष के ऐप्स का उपयोग करना जरूरी है?

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