การเพิ่มรหัสปุ่มซื้อไปยัง HTML

หน้านี้พิมพ์ขึ้นเมื่อ Oct 02, 2022 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-sales-channels/buy-button/add-embed-code

หลังจากที่คุณสร้างปุ่มซื้อในส่วน Shopify admin ของคุณแล้ว เท่ากับว่าคุณพร้อมที่จะเพิ่มปุ่มดังกล่าวไปยังเว็บไซต์หรือบล็อกของคุณเองแล้วเช่นกัน

กระบวนการเพิ่มโค้ดฝังตัวไปยัง HTML ต้นทางของเว็บไซต์ของคุณจะแตกต่างกันไปเล็กน้อยขึ้นอยู่กับวิธีการและตำแหน่งที่คุณต้องการให้ปุ่มซื้อและตะกร้าสินค้าปรากฏบนแพลตฟอร์มการเผยแพร่ และบางครั้งปรากฏบนธีมที่คุณใช้บนแพลตฟอร์มนั้นด้วย

หมายเหตุ: หากคุณต้องการความช่วยเหลือเกี่ยวกับการเพิ่มโค้ดฝังตัวไปยังแพลตฟอร์มการเผยแพร่นอก Shopify (เช่น Squarespace หรือบล็อก WordPress.org) ให้ติดต่อผู้ให้บริการเว็บไซต์หรือแพลตฟอร์มการเผยแพร่ของคุณโดยตรงเพื่อรับความช่วยเหลือ

การเพิ่มโค้ดฝังตัวไปยัง WordPress

คุณสามารถเพิ่มโค้ดฝังตัวลงในโพสต์ หน้า หรือเทมเพลตต่างๆ ในเว็บไซต์ WordPress ของคุณได้

หมายเหตุ: ปุ่มซื้อแบบฝังตัวจะเข้ากันได้กับเว็บไซต์ WordPress.org แบบโฮสต์ด้วยตนเองและแผนบางแผนที่ WordPress.com มีให้บริการ เอกสารฉบับด้านล่างเขียนขึ้นโดยคำนึงถึง WordPress เวอร์ชันล่าสุดเป็นหลัก ซึ่งอาจจะแตกต่างกันกับเวอร์ชันที่ติดตั้งในเว็บไซต์ของคุณ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับเวอร์ชันของ 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 ของคุณ

หมายเหตุ: ปุ่มซื้อจะสร้างตะกร้าสินค้าแยกต่างหาก หากลูกค้าของคุณเปลี่ยนไปยังหน้าอื่นในร้านค้าออนไลน์ของคุณ สินค้าดังกล่าวจะไม่ปรากฏในตะกร้าสินค้าอีกต่อไป คุณสามารถแก้ไขปุ่มซื้อเพื่อให้นำไปยังหน้าการชำระเงินได้โดยตรง

ขั้นตอน:

  1. จากส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > โพสต์บล็อก
  1. จาก แอป Shopify ให้แตะ ร้านค้า
  2. ในส่วน ช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
  3. แตะโพสต์บล็อก
  1. จาก แอป Shopify ให้แตะ ร้านค้า
  2. ในส่วน ช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
  3. แตะโพสต์บล็อก
  1. ในหน้าบล็อกโพสต์ ให้คลิกชื่อบล็อกโพสต์ที่ต้องการแก้ไข หรือหากต้องการสร้างบล็อกโพสต์ใหม่ ให้คลิกที่ “เพิ่มบล็อกโพสต์”
  2. ในส่วนเขียนบล็อกโพสต์ของคุณ ให้คลิกที่ “แสดง HTML” ในเครื่องมือแก้ไข Rich Text
  3. วางโค้ดฝังตัวของคุณลงในช่องข้อความหลัก
  4. คลิกที่ “บันทึก”

การเพิ่มโค้ดฝังตัวไปยัง Squarespace

คุณสามารถเพิ่มโค้ดฝังตัวลงในแต่ละโพสต์ใน Squarespace และในเมนูบนหน้าแรกของคุณได้ ในบางกรณีคุณอาจต้องการดำเนินการทั้งสองอย่าง ตัวอย่างเช่นคุณสามารถฝังตะกร้าสินค้าลงบนหน้าแรกเพื่อรับการซื้อจากปุ่มซื้อที่คุณฝังบนแต่ละโพสต์ได้

ขั้นตอน:

  1. ในแดชบอร์ด Squarespace ของคุณ ให้เปิดเว็บเพจที่คุณต้องการเพิ่มโค้ดฝังตัว
  2. ค้นหาองค์ประกอบบนหน้าที่คุณต้องการให้ปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัวปรากฏ โดยการเลื่อนเคอร์เซอร์ไปที่บริเวณเนื้อหาของหน้าจากนั้นคลิกแก้ไข
  3. คลิกที่จุดแทรกในตำแหน่งที่คุณต้องการเพิ่มโค้ดฝังตัว
  4. ในส่วนเพิ่มเติมของกล่องโต้ตอบบล็อกเนื้อหา ให้คลิกที่โค้ด
  5. ในส่วน Shopify admin ของคุณ ให้คัดลอกโค้ดฝังตัวจากกล่องโต้ตอบโค้ดฝังตัว
  6. ในแดชบอร์ด Squarespace ของคุณ ให้วางโค้ดฝังตัวลงในกล่องโต้ตอบCODE และตรวจสอบให้แน่ใจว่าช่องข้อความดังกล่าวถูกตั้งค่าให้รับ HTML แล้ว
  7. คลิกที่ APPLY ในกล่องโต้ตอบ EDIT CODE
  8. คลิกที่บันทึกในเครื่องมือแก้ไขหน้าอีกครั้ง เนื่องจาก Squarespace ปิดใช้งาน JavaScript ในแดชบอร์ด ดังนั้นคุณจึงต้องแสดงตัวอย่างเพจของคุณแยกต่างหากเพื่อดูปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัวที่คุณเพิ่มไว้

หากคุณดำเนินการตามขั้นตอนเสร็จสิ้นแล้วและปุ่มซื้อของคุณไม่โหลด คุณอาจต้องปิดการใช้งานการโหลด Ajax ด้วย สามารถดูรายละเอียดเพิ่มเติมได้ที่เปิดหรือปิดใช้งาน Ajax

หมายเหตุ: หากคุณเพิ่มตะกร้าสินค้าแบบฝังตัวลงในเมนูบนหน้าแรกของ Squarespace ของคุณ ตะกร้าสินค้าดังกล่าวจะรับคำสั่งซื้อจากปุ่มซื้อที่คุณฝังบนแต่ละโพสต์

การเพิ่มโค้ดฝังตัวไปยัง Wix

หลังจากที่คุณสร้างปุ่มซื้อหรือคอลเลกชันในส่วน Shopify admin ของคุณแล้ว คุณจะสามารถเพิ่มปุ่มดังกล่าวไปยังเว็บไซต์ Wix ของคุณได้โดยใช้เครื่องมือแก้ไขเว็บไซต์ Wix

หากคุณต้องการแสดงสินค้ามากกว่าหนึ่งรายการบนเว็บไซต์ Wix ของคุณโดยไม่อยากแก้ไขโค้ดฝังตัว คุณสามารถฝังคอลเลกชันแทนได้ คุณสามารถสร้างคอลเลกชันใหม่สำหรับสินค้าที่คุณต้องการให้แสดงบน Wix ได้ในส่วน Shopify admin ของคุณ

ขั้นตอน:

  1. ในส่วน Shopify admin ของคุณ ให้สร้างปุ่มซื้อสำหรับสินค้าหรือคอลเลกชัน จากนั้นคัดลอกโค้ดฝังตัวไว้

หมายเหตุ: เมื่อคุณสร้างปุ่มซื้อของคุณสำหรับเว็บไซต์ Wix คุณจะไม่สามารถใช้การเปลี่ยนเส้นทางในตัวเลือกแท็บเดียวกันได้เนื่องจากมีข้อจำกัดของ Wix

  1. ในบัญชีผู้ใช้ Wix ของคุณ ให้ค้นหาเว็บไซต์ที่คุณต้องการแก้ไขในส่วนเว็บไซต์ของฉัน จากนั้นคลิกที่แก้ไขเว็บไซต์
  2. ในเครื่องมือแก้ไขเว็บไซต์ของ Wix ให้คลิกที่ปุ่ม + จากนั้นคลิกที่เพิ่มเติม
  3. คลิกที่โค้ด HTML เพื่อเพิ่มวิดเจ็ตโค้ด HTML ไปยังหน้าดังกล่าว
  4. คลิกที่ป้อนโค้ด
  5. ในกล่องโต้ตอบการตั้งค่า HTML ให้วางโค้ดฝังตัวสำหรับปุ่มซื้อหรือคอลเลกชันของคุณลงในช่องเพิ่มโค้ดของคุณที่นี่ แล้วคลิกที่อัปเดต
  6. ปรับขนาดวิดเจ็ตโค้ด HTML ให้พอดีกับเนื้อหา หากคุณกำลังสร้างการฝังตัวกับตะกร้าสินค้าอยู่ ตรวจสอบให้แน่ใจว่าแท็บตะกร้าสินค้าปรากฏในที่ที่คุณต้องการแล้ว
  7. เมื่อเสร็จแล้ว ให้คลิกที่บันทึก

ฝังสินค้าหรือคอลเลกชันหลายรายการ

ขั้นตอน:

  1. ในส่วน Shopify admin ของคุณ ให้สร้างปุ่มซื้อสำหรับสินค้าหรือคอลเลกชัน จากนั้นคัดลอกโค้ดฝังตัวไว้
  2. วางโค้ดลงในเครื่องมือแก้ไขโค้ดหรือเครื่องสร้างเว็บไซต์ของ Wix และทำซ้ำสองขั้นตอนแรกจนกว่าคุณจะสร้างปุ่มซื้อตามที่คุณต้องการได้
  3. แก้ไขโค้ดฝังตัวเพื่อให้แน่ใจว่าจะแสดงในตำแหน่งการจัดวางที่เหมาะสม
  4. ในบัญชีผู้ใช้ Wix ของคุณ ให้ค้นหาเว็บไซต์ที่คุณต้องการแก้ไขในส่วนเว็บไซต์ของฉัน จากนั้นคลิกที่แก้ไขเว็บไซต์
  5. ในเครื่องมือแก้ไขเว็บไซต์ของ Wix ให้คลิกที่ปุ่ม + จากนั้นคลิกที่เพิ่มเติม
  6. คลิกที่โค้ด HTML เพื่อเพิ่มวิดเจ็ตโค้ด HTML ไปยังหน้าดังกล่าว
  7. คลิกที่ป้อนโค้ด
  8. ในกล่องโต้ตอบการตั้งค่า HTML ให้วางรหัสที่ถูกแก้ไขของปุ่มซื้อของคุณลงในช่องเพิ่มโค้ดของคุณที่นี่ แล้วคลิกที่อัปเดต
  9. ปรับขนาดวิดเจ็ตโค้ด HTML ให้พอดีกับเนื้อหา หากคุณกำลังสร้างการฝังตัวกับตะกร้าสินค้าอยู่ ตรวจสอบให้แน่ใจว่าแท็บตะกร้าสินค้าปรากฏในที่ที่คุณต้องการแล้ว
  10. เมื่อเสร็จแล้ว ให้คลิกที่บันทึก

หมายเหตุ: คุณต้องการความช่วยเหลือในการใช้งานเครื่องมือแก้ไข Wix ใช่ไหม ติดต่อฝ่ายช่วยเหลือของ Wix ดูสิ

เพิ่มแท็กสคริปต์แยกต่างหาก

แพลตฟอร์มบางชนิด (เช่น 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>

  1. เปิดส่วนหัวของหน้าเว็บบนเว็บไซต์ที่คุณต้องการฝังปุ่มซื้อลงไป

  2. วางองค์ประกอบทั้งหมดของ <script> ลงในส่วนหัวของหน้าเว็บ

  3. บันทึกการเปลี่ยนแปลง

  4. ให้คัดลอกเฉพาะองค์ประกอบของ <div> ที่อยู่ในโค้ดฝังตัวต้นฉบับในส่วน Shopify admin ของคุณ ตัวอย่างเช่น:

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

  1. เปิดหน้าเว็บบนเว็บไซต์ของคุณที่คุณต้องการฝังปุ่มซื้อลงไป

  2. วางส่วนย่อยของโค้ด <div> ลงในหน้าเว็บดังกล่าว

  3. บันทึกการเปลี่ยนแปลง

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี