Buy Button کوڈ کو HTML میں شامل کرنا

اپنے Shopify ایڈمن میں Buy Button بنانے کے بعد، آپ اسے اپنی ویب سائٹ یا بلاگ پر شامل کرنے کے لیے تیار ہیں۔

اپنی ویب سائٹ کے سورس HTML میں ایمبیڈ کوڈ شامل کرنے کا عمل اس بات پر منحصر ہے کہ آپ اپنے Buy Button اور کارٹ کو کیسے اور کہاں دکھانا چاہتے ہیں، آپ کے پبلشنگ پلیٹ فارم پر، اور بعض اوقات اس پلیٹ فارم پر آپ کی استعمال کردہ تھیم پر، یہ قدرے مختلف ہوتا ہے۔

WordPress میں ایمبیڈ کوڈ شامل کرنا

آپ اپنی WordPress سائٹ پر پوسٹ، پیج یا ٹیمپلیٹ میں ایمبیڈ کوڈ شامل کر سکتے ہیں۔

WordPress پوسٹ یا پیج میں ایمبیڈ کوڈ شامل کریں

1. Shopify میں، ایک Buy Button بنائیں اور Embed Code ڈائیلاگ سے اس کا ایمبیڈ کوڈ کاپی کریں (یا ایمبیڈ کوڈ کلپ بورڈ پر کاپی کریں پر کلک کریں)۔
2. اپنے WordPress ڈیش بورڈ سے، اپنی پوسٹ یا پیج پر جائیں۔
3. یا تو کوئی نئی پوسٹ یا پیج بنائیں، یا موجودہ میں ترمیم کریں۔
4. بلاک ایڈیٹر کے اندر، + بٹن پر کلک کریں، Custom HTML تلاش کریں، اور پھر کسٹم HTML بلاک داخل کرنے کے لیے کلک کریں۔
5. Custom HTML بلاک کے فراہم کردہ ٹیکسٹ فیلڈ میں ایمبیڈ کوڈ پیسٹ کریں۔
6. اختیاری: Custom HTML بلاک کو منتقل کریں یا پیش منظر دیکھیں کہ آپ کا Buy Button کس طرح ظاہر ہوگا:
   • Custom HTML بلاک کو منتقل کرنے کے لیے، بلاک کے ٹول بار میں موجود تیر کے بٹن پر کلک کریں، یا بلاک کو گھسیٹ کر نئی جگہ پر لے جائیں۔
   • Buy Button کا پیش منظر دیکھنے کے لیے، بلاک ٹول بار پر Preview پر کلک کریں۔
7. جب آپ مکمل کر لیں، تو اپنی پوسٹ یا پیج کے لیے Save Draft، Preview، یا Publish بٹن پر کلک کریں۔

اگر آپ WordPress کا Classic Editor Plugin استعمال کرتے ہیں، تو Custom HTML بلاک استعمال کرنے کے بجائے، ٹیکسٹ ایڈیٹر کو Visual سے Text موڈ میں تبدیل کریں اور ایڈیٹر میں ایمبیڈ کوڈ پیسٹ کریں۔

WordPress ٹیمپلیٹ میں ایمبیڈ کوڈ شامل کریں

اگر آپ کی WordPress تھیم سائٹ ایڈیٹر کو سپورٹ کرتی ہے، تو آپ اپنی سائٹ کے کسی بھی ٹیمپلیٹ میں Embedded Buy Button شامل کر سکتے ہیں۔

اقدامات:

1. Shopify میں، ایک Buy Button بنائیں اور Embed Code ڈائیلاگ سے اس کا ایمبیڈ کوڈ کاپی کریں (یا ایمبیڈ کوڈ کلپ بورڈ پر کاپی کریں پر کلک کریں)۔
2. اپنے WordPress ڈیش بورڈ میں، Editor پر جائیں۔
3. اس ٹیمپلیٹ پر جائیں جس میں آپ ترمیم کرنا چاہتے ہیں۔
4. بلاک ایڈیٹر کے اندر، + بٹن پر کلک کریں، Custom HTML تلاش کریں، اور پھر کسٹم HTML بلاک داخل کرنے کے لیے کلک کریں۔
5. Custom HTML بلاک کے فراہم کردہ ٹیکسٹ فیلڈ میں ایمبیڈ کوڈ پیسٹ کریں۔
6. اختیاری: Custom HTML بلاک کو منتقل کریں یا پیش منظر دیکھیں کہ آپ کا Buy Button کس طرح ظاہر ہوگا:
   • Custom HTML بلاک کو منتقل کرنے کے لیے، بلاک کے ٹول بار میں موجود تیر کے بٹن پر کلک کریں، یا بلاک کو گھسیٹ کر نئی جگہ پر لے جائیں۔
   • Buy Button کا پیش منظر دیکھنے کے لیے، بلاک ٹول بار پر Preview پر کلک کریں۔
7. جب آپ مکمل کر لیں، تو ٹیمپلیٹ کے لیے Preview، یا Save بٹن پر کلک کریں۔

اپنے Shopify بلاگ میں ایمبیڈ کوڈ شامل کرنا

اقدامات:

Squarespace میں ایمبیڈ کوڈ شامل کرنا

آپ Squarespace میں انفرادی پوسٹس اور اپنے ہوم پیج کے مینوز میں ایمبیڈ کوڈ شامل کر سکتے ہیں۔ کچھ معاملات میں، آپ دونوں کرنا چاہ سکتے ہیں۔ مثال کے طور پر، آپ ان Buy Buttons سے خریداریاں موصول کرنے کے لیے اپنے ہوم پیج پر کارٹ ایمبیڈ کر سکتے ہیں جنہیں آپ انفرادی پوسٹس پر ایمبیڈ کرتے ہیں۔

اقدامات:

1. اپنے Squarespace ڈیش بورڈ سے، وہ ویب پیج کھولیں جہاں آپ ایمبیڈ کوڈ شامل کرنا چاہتے ہیں۔
2. صفحہ پر وہ عنصر تلاش کریں جہاں آپ Buy Button یا ایمبیڈڈ کارٹ دکھانا چاہتے ہیں، اپنے کرسر کو Page Content کے حصے پر لے جائیں، اور پھر EDIT پر کلک کریں۔
3. اس انسرٹ پوائنٹ پر کلک کریں جہاں آپ ایمبیڈ کوڈ شامل کرنا چاہتے ہیں۔
4. Content Blocks ڈائیلاگ کے More سیکشن میں، Code پر کلک کریں۔
5. اپنے Shopify ایڈمن سے، Embed Code ڈائیلاگ سے ایمبیڈ کوڈ کاپی کریں۔
6. اپنے Squarespace ڈیش بورڈ سے، CODE ڈائیلاگ میں ایمبیڈ کوڈ پیسٹ کریں۔ یقینی بنائیں کہ ٹیکسٹ فیلڈ HTML وصول کرنے کے لیے سیٹ ہے۔
7. EDIT CODE ڈائیلاگ پر APPLY پر کلک کریں۔
8. پیج ایڈیٹر پر دوبارہ SAVE پر کلک کریں۔ چونکہ Squarespace اپنے ڈیش بورڈ میں JavaScript کو غیر فعال کر دیتا ہے، اس لیے آپ کو یہ تصدیق کرنے کے لیے اپنے صفحہ کا الگ سے پیش منظر دیکھنا ہوگا کہ آیا Buy Button یا ایمبیڈڈ کارٹ کام کر رہا ہے۔

اگر آپ اقدامات مکمل کر لیتے ہیں اور آپ کا Buy Button لوڈ نہیں ہو رہا ہے، تو آپ کو Ajax لوڈنگ کو آف کرنے کی ضرورت پڑ سکتی ہے۔ مزید تفصیلات کے لیے، Ajax کو فعال یا غیر فعال کریں سے رجوع کریں۔

Wix میں ایمبیڈ کوڈ شامل کرنا

اپنے Shopify ایڈمن میں ایک Buy Button یا کلیکشن بنانے کے بعد، آپ Wix Website Editor کا استعمال کرتے ہوئے اسے اپنی Wix ویب سائٹ میں شامل کر سکتے ہیں۔

اگر آپ ایمبیڈ کوڈ میں ترمیم کیے بغیر اپنی Wix ویب سائٹ پر ایک سے زیادہ پروڈکٹ دکھانا چاہتے ہیں، تو آپ ایک کلیکشن ایمبیڈ کر سکتے ہیں۔ آپ ان پروڈکٹس کے لیے اپنے Shopify ایڈمن میں ایک نیا کلیکشن بنا سکتے ہیں جنہیں آپ Wix پر دکھانا چاہتے ہیں۔

اقدامات:

1. اپنے Shopify ایڈمن سے، کسی پروڈکٹ یا کلیکشن کے لیے ایک Buy Button بنائیں، اور پھر اس کا ایمبیڈ کوڈ کاپی کریں۔

2. اپنے Wix اکاؤنٹ سے، My Sites سیکشن میں وہ سائٹ تلاش کریں جس میں آپ ترمیم کرنا چاہتے ہیں، اور پھر Edit Site پر کلک کریں۔
3. Wix Website Editor میں، + بٹن پر کلک کریں، اور پھر More پر کلک کریں۔
4. صفحہ پر HTML کوڈ ویجیٹ شامل کرنے کے لیے HTML Code پر کلک کریں۔
5. Enter Code پر کلک کریں۔
6. HTML Settings ڈائیلاگ پر، اپنے Buy Button یا کلیکشن کے لیے ایمبیڈ کوڈ Add your code here فیلڈ میں پیسٹ کریں اور پھر Update پر کلک کریں۔
7. HTML کوڈ ویجیٹ کو اس کے مواد کے مطابق فٹ کرنے کے لیے اس کا سائز تبدیل کریں۔ اگر آپ کارٹ کے ساتھ کوئی ایمبیڈ بنا رہے ہیں، تو یقینی بنائیں کہ کارٹ ٹیب صحیح جگہ پر ظاہر ہو۔
8. جب آپ کا کام مکمل ہو جائے، تو محفوظ کریں پر کلک کریں۔

متعدد پروڈکٹ یا کلیکشن ایمبیڈ کریں

اقدامات:

1. اپنے Shopify ایڈمن سے، کسی پروڈکٹ یا کلیکشن کے لیے ایک Buy Button بنائیں، اور پھر اس کا ایمبیڈ کوڈ کاپی کریں۔
2. کوڈ کو کسی کوڈ ایڈیٹر یا Wix ویب سائٹ بلڈر میں پیسٹ کریں۔ جب تک آپ اپنے درکار Buy Buttons نہ بنا لیں، پہلے دو اقدامات دہرائیں۔
3. ایمبیڈ کوڈ میں ترمیم کریں تاکہ یہ یقینی بنایا جا سکے کہ وہ درست الائنمنٹ میں ڈسپلے ہوں۔
4. اپنے Wix اکاؤنٹ سے، My Sites سیکشن میں وہ سائٹ تلاش کریں جس میں آپ ترمیم کرنا چاہتے ہیں، اور پھر Edit Site پر کلک کریں۔
5. Wix Website Editor میں، + بٹن پر کلک کریں، اور پھر More پر کلک کریں۔
6. صفحہ پر HTML کوڈ ویجیٹ شامل کرنے کے لیے HTML Code پر کلک کریں۔
7. Enter Code پر کلک کریں۔
8. HTML Settings ڈائیلاگ پر، Add your code here فیلڈ میں اپنے Buy Buttons کا ترمیم شدہ کوڈ پیسٹ کریں اور پھر اپ ڈیٹ کریں پر کلک کریں۔
9. HTML کوڈ ویجیٹ کو اس کے مواد کے مطابق فٹ کرنے کے لیے اس کا سائز تبدیل کریں۔ اگر آپ کارٹ کے ساتھ کوئی ایمبیڈ بنا رہے ہیں، تو یقینی بنائیں کہ کارٹ ٹیب صحیح جگہ پر ظاہر ہو۔
10. جب آپ کا کام مکمل ہو جائے، تو محفوظ کریں پر کلک کریں۔

سکرپٹ ٹیگ کو الگ سے شامل کریں

کچھ پلیٹ فارم (جیسے Unbounce) کے لیے درکار ہوتا ہے کہ آپ ایمبیڈ کوڈ کا <script> ٹیگ پیج ہیڈر میں، اور باقی ایمبیڈ کوڈ اس پیج پر پیسٹ کریں جہاں آپ Buy Button کو ڈسپلے کرنا چاہتے ہیں۔

اقدامات:

1. جب آپ Buy Button بناتے ہیں تو جنریٹ ہونے والے ایمبیڈ کوڈ سے، <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. اس ویب سائٹ کا پیج ہیڈر کھولیں جہاں آپ Buy Button ایمبیڈ کرنا چاہتے ہیں۔
3. پیج ہیڈر میں مکمل <script> ایلیمنٹ پیسٹ کریں۔
4. اپنی تبدیلیاں محفوظ کریں۔
5. اپنے Shopify admin میں اصل ایمبیڈ کوڈ سے، صرف <div> ایلیمنٹ کاپی کریں۔ مثال کے طور پر:

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

6. اپنی ویب سائٹ پر وہ پیج کھولیں جہاں آپ Buy Button ایمبیڈ کرنا چاہتے ہیں۔
7. پیج میں <div> کوڈ کا سنيپٹ پیسٹ کریں۔
8. اپنی تبدیلیاں محفوظ کریں۔