HTML में खरीदें बटन कोड जोड़ना

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

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

WordPress में एम्बेड कोड जोड़ना

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

किसी WordPress पोस्ट या पेज में एम्बेड कोड जोड़ें

1. Shopify में, एक खरीदें बटन बनाएं और एम्बेड कोड डायलॉग से उसका एम्बेड कोड कॉपी करें (या क्लिपबोर्ड पर एम्बेड कोड कॉपी करें पर क्लिक करें)।
2. अपने WordPress डैशबोर्ड से, अपनी पोस्ट या पेज पर जाएं।
3. या तो एक नई पोस्ट या पेज बनाएं या किसी मौजूदा पोस्ट या पेज को एडिट करें।
4. ब्लॉक एडिटर के अंदर, + बटन पर क्लिक करें, कस्टम HTML खोजें और फिर कस्टम HTML ब्लॉक डालने के लिए क्लिक करें।
5. कस्टम HTML ब्लॉक द्वारा दिए गए टेक्स्ट फ़ील्ड में एम्बेड कोड पेस्ट करें।
6. वैकल्पिक: कस्टम HTML ब्लॉक को मूव करें या यह देखने के लिए पूर्वावलोकन करें कि आपका खरीदें बटन कैसे दिखाई देगा:
   • कस्टम HTML ब्लॉक को मूव करने के लिए, ब्लॉक के टूलबार में तीर वाले बटन पर क्लिक करें या ब्लॉक को किसी नई जगह पर ड्रैग करें।
   • खरीदें बटन का पूर्वावलोकन करने के लिए, ब्लॉक टूलबार पर पूर्वावलोकन करें पर क्लिक करें।
7. जब आप पूरा कर लें, तो अपनी पोस्ट या पेज के लिए ड्राफ़्ट सेव करें, पूर्वावलोकन करें या प्रकाशित करें बटन पर क्लिक करें।

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

WordPress टेम्पलेट में एम्बेड कोड जोड़ें

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

चरण:

1. Shopify में, एक खरीदें बटन बनाएं और एम्बेड कोड डायलॉग से उसका एम्बेड कोड कॉपी करें (या क्लिपबोर्ड पर एम्बेड कोड कॉपी करें पर क्लिक करें)।
2. अपने WordPress डैशबोर्ड में, एडिटर पर जाएं।
3. उस टेम्पलेट पर नेविगेट करें जिसे आप एडिट करना चाहते हैं।
4. ब्लॉक एडिटर के अंदर, + बटन पर क्लिक करें, कस्टम HTML खोजें और फिर कस्टम HTML ब्लॉक डालने के लिए क्लिक करें।
5. कस्टम HTML ब्लॉक द्वारा दिए गए टेक्स्ट फ़ील्ड में एम्बेड कोड पेस्ट करें।
6. वैकल्पिक: कस्टम HTML ब्लॉक को मूव करें या यह देखने के लिए पूर्वावलोकन करें कि आपका खरीदें बटन कैसे दिखाई देगा:
   • कस्टम HTML ब्लॉक को मूव करने के लिए, ब्लॉक के टूलबार में तीर वाले बटन पर क्लिक करें या ब्लॉक को किसी नई जगह पर ड्रैग करें।
   • खरीदें बटन का पूर्वावलोकन करने के लिए, ब्लॉक टूलबार पर पूर्वावलोकन करें पर क्लिक करें।
7. जब आप पूरा कर लें, तो टेम्पलेट के लिए पूर्वावलोकन करें या सेव करें बटन पर क्लिक करें।

अपने Shopify ब्लॉग में एम्बेड कोड जोड़ना

चरण:

Squarespace में एम्बेड कोड जोड़ना

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

चरण:

1. अपने Squarespace डैशबोर्ड से, वह वेबपेज खोलें जहां आप एम्बेड कोड जोड़ना चाहते हैं।
2. पेज पर उस एलिमेंट को ढूंढें जहां आप खरीदें बटन या एम्बेडेड कार्ट को दिखाना चाहते हैं, अपने कर्सर को पेज सामग्री क्षेत्र पर ले जाएं और फिर एडिट करें पर क्लिक करें।
3. उस इंसर्ट पॉइंट पर क्लिक करें जहां आप एम्बेड कोड जोड़ना चाहते हैं।
4. सामग्री ब्लॉक डायलॉग के और सेक्शन में, कोड पर क्लिक करें।
5. अपने Shopify एडमिन से, एम्बेड कोड डायलॉग से एम्बेड कोड कॉपी करें।
6. अपने Squarespace डैशबोर्ड से, एम्बेड कोड को कोड डायलॉग में पेस्ट करें। सुनिश्चित करें कि टेक्स्ट फ़ील्ड HTML प्राप्त करने के लिए सेट है।
7. EDIT CODE डायलॉग पर APPLY पर क्लिक करें.
8. पेज एडिटर पर फिर से SAVE पर क्लिक करें। क्योंकि Squarespace अपने डैशबोर्ड में JavaScript को डीऐक्टिवेट कर देता है, इसलिए आपको यह कन्फ़र्म करने के लिए अपने पेज का अलग से प्रीव्यू करना होगा कि खरीदें बटन या एम्बेडेड कार्ट काम कर रहा है।

अगर आप चरण पूरे कर लेते हैं और आपका खरीदें बटन लोड नहीं हो रहा है, तो आपको Ajax लोडिंग को बंद करने की ज़रूरत पड़ सकती है। ज़्यादा जानकारी के लिए, Ajax को चालू या बंद करें देखें।

Wix में एम्बेड कोड जोड़ना.

अपने Shopify एडमिन में खरीदें बटन या संग्रहण बनाने के बाद, आप इसे Wix वेबसाइट एडिटर का उपयोग करके अपनी Wix वेबसाइट में जोड़ सकते हैं।

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

चरण:

1. अपने Shopify एडमिन से, किसी प्रोडक्ट या संग्रहण के लिए खरीदें बटन बनाएं और फिर उसका एम्बेड कोड कॉपी करें।

2. अपने Wix खाते से, My Sites सेक्शन में उस साइट को खोजें जिसे आप एडिट करना चाहते हैं और फिर Edit Site पर क्लिक करें।
3. Wix वेबसाइट एडिटर में, + बटन पर क्लिक करें और फिर More पर क्लिक करें।
4. पेज पर HTML कोड विजेट जोड़ने के लिए HTML Code पर क्लिक करें।
5. Enter Code पर क्लिक करें.
6. HTML Settings डायलॉग पर, Add your code here फ़ील्ड में अपने खरीदें बटन या संग्रहण के लिए एम्बेड कोड पेस्ट करें और फिर Update पर क्लिक करें।
7. HTML कोड विजेट को उसकी सामग्री के हिसाब से रीसाइज़ करें। अगर आप कार्ट के साथ एम्बेड बना रहे हैं, तो पक्का करें कि कार्ट टैब सही जगह पर दिखाई दे।
8. जब आपका काम पूरा हो जाए, तो Save पर क्लिक करें।

एक से ज़्यादा प्रोडक्ट या संग्रहण एम्बेड करें.

चरण:

1. अपने Shopify एडमिन से, किसी प्रोडक्ट या संग्रहण के लिए खरीदें बटन बनाएं और फिर उसका एम्बेड कोड कॉपी करें।
2. कोड को किसी कोड एडिटर या Wix वेबसाइट बिल्डर में पेस्ट करें। पहले दो चरणों को तब तक दोहराएं, जब तक आप ज़रूरत के मुताबिक खरीदें बटन नहीं बना लेते।
3. एम्बेड कोड को यह पक्का करने के लिए एडिट करें कि वे सही अलाइनमेंट में दिखें।
4. अपने Wix खाते से, My Sites सेक्शन में उस साइट को खोजें जिसे आप एडिट करना चाहते हैं और फिर Edit Site पर क्लिक करें।
5. Wix वेबसाइट एडिटर में, + बटन पर क्लिक करें और फिर More पर क्लिक करें।
6. पेज पर HTML कोड विजेट जोड़ने के लिए HTML Code पर क्लिक करें।
7. Enter Code पर क्लिक करें.
8. HTML Settings डायलॉग पर, Add your code here फ़ील्ड में अपने खरीदें बटन के लिए एडिट किया गया कोड पेस्ट करें और फिर Update पर क्लिक करें।
9. HTML कोड विजेट को उसकी सामग्री के हिसाब से रीसाइज़ करें। अगर आप कार्ट के साथ एम्बेड बना रहे हैं, तो पक्का करें कि कार्ट टैब सही जगह पर दिखाई दे।
10. जब आपका काम पूरा हो जाए, तो Save पर क्लिक करें।

स्क्रिप्ट टैग अलग से जोड़ें.

कुछ प्लेटफ़ॉर्म (जैसे Unbounce) के लिए यह ज़रूरी है कि आप एम्बेड कोड के <script> टैग को पेज हेडर में पेस्ट करें और बाकी एम्बेड कोड को उस पेज पर पेस्ट करें जहां आप खरीदें बटन दिखाना चाहते हैं।

चरण:

1. खरीदें बटन बनाते समय जनरेट होने वाले एम्बेड कोड से, <div> एलिमेंट और <script> एलिमेंट दोनों को कॉपी करें। उदाहरण के लिए:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

2. उस वेबसाइट के लिए पेज हेडर खोलें, जहां आप खरीदें बटन एम्बेड करना चाहते हैं।
3. पूरे <script> एलिमेंट को पेज हेडर में पेस्ट करें।
4. अपने बदलाव सेव करें।
5. अपने Shopify एडमिन में मूल एम्बेड कोड से, केवल <div> एलिमेंट कॉपी करें। उदाहरण के लिए:

<div id='product-component-2dd3c8704e6'></div>

6. अपनी वेबसाइट पर वह पेज खोलें, जहां आप खरीदें बटन एम्बेड करना चाहते हैं।
7. <div> कोड स्निपेट को पेज में पेस्ट करें।
8. अपने बदलाव सेव करें।