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

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

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

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

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

การเพิ่มโค้ดฝังตัวไปยังบล็อก WordPress.org

คุณสามารถเพิ่มโค้ดฝังตัวลงในแต่ละโพสต์และในเมนูบนหน้าแรกของบล็อก WordPress.org ของคุณได้

หมายเหตุ: ปุ่มซื้อแบบฝังตัวจะสามารถใช้งานได้กับแพลตฟอร์ม WordPress.org แต่ไม่สามารถใช้งานกับ WordPress.com ได้ โดยเอกสารฉบับนี้กล่าวถึง WordPress 4.2.2 ซึ่งเวอร์ชันของคุณอาจแตกต่างกัน คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับเวอร์ชันของ WordPressได้ที่เว็บไซต์ความช่วยเหลือของ WordPress

เพิ่มโค้ดฝังตัวลงในโพสต์ของ WordPress

  1. ใน Shopify ให้สร้างปุ่มซื้อและคัดลอกโค้ดฝังตัวจากกล่องโต้ตอบโค้ดฝังตัว (หรือคลิกคัดลอกโค้ดฝังตัวไปยังคลิปบอร์ด)
  2. จากแดชบอร์ด WordPress ของคุณให้ไปที่โพสต์ของคุณ
  3. สร้างโพสต์ใหม่หรือแก้ไขโพสต์ที่มีอยู่ที่คุณต้องการให้แสดงปุ่มซื้อ

  4. ให้ดำเนินการตามขั้นตอนใดขั้นตอนหนึ่งต่อไปนี้ ขึ้นอยู่กับเวอร์ชัน WordPress:

    • ในโพสต์ ให้เปลี่ยนแปลงตัวแก้ไขข้อความจากโหมดภาพเป็นโหมข้อความ
    • ในเครื่องมือแก้ไขบล็อก ให้คลิกปุ่ม + ค้นหา Custom HTMLจากนั้นคลิกHTML แบบกำหนดเอง

  5. วางโค้ดฝังตัวลงในช่องข้อความในตำแหน่งที่คุณต้องการให้ปุ่มซื้อหรือคอลเลกชันปรากฏ

  6. เมื่อเสร็จสิ้นแล้ว ให้คลิกที่บันทึกแบบร่าง ตัวอย่าง หรือเผยแพร่

เพิ่มโค้ดฝังตัวลงในเมนูของ Wordpress

ขั้นตอน:

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

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

การเพิ่มโค้ดฝังตัวไปยังบล็อก Shopify ของคุณ

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

ขั้นตอน:

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

การเพิ่มโค้ดฝังตัวไปยัง 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 แล้วหรือยัง

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