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

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

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

หมายเหตุ

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

การเพิ่มโค้ดฝังตัวไปยัง 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 ให้ไปที่ร้านค้าออนไลน์ > โพสต์บล็อก
2. ในหน้าบล็อกโพสต์ ให้คลิกชื่อบล็อกโพสต์ที่ต้องการแก้ไข หรือหากต้องการสร้างบล็อกโพสต์ใหม่ ให้คลิกที่ “เพิ่มบล็อกโพสต์”
3. ในส่วนเขียนบล็อกโพสต์ของคุณ ให้คลิกที่ “แสดง HTML” ในเครื่องมือแก้ไข Rich Text
4. วางโค้ดฝังตัวของคุณลงในช่องข้อความหลัก
5. คลิกที่ “บันทึก”

iPhone

1. จากแอป Shopify ให้แตะที่ปุ่ม …
2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
3. แตะที่โพสต์บล็อก

Android

1. จากแอป Shopify ให้แตะที่ปุ่ม …
2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
3. แตะที่โพสต์บล็อก

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

ข้อควรระวัง

การปรับแต่งขั้นสูงบางอย่างใน Squarespace เป็นรูปแบบเฉพาะเจาะจงของธีมซึ่ง Shopify ไม่รองรับการปรับแต่งเหล่านี้

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

ขั้นตอน:

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

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

หมายเหตุ

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

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

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

ข้อควรระวัง

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

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

ขั้นตอน:

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

หมายเหตุ

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

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

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

ขั้นตอน:

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้สร้างปุ่มซื้อสำหรับสินค้าหรือคอลเลกชัน จากนั้นคัดลอกโค้ดฝังตัวไว้
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 ของคุณ ตัวอย่างเช่น:

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

1. เปิดหน้าเว็บบนเว็บไซต์ของคุณที่คุณต้องการฝังปุ่มซื้อลงไป
2. วางส่วนย่อยของโค้ด <div> ลงในหน้าเว็บดังกล่าว
3. บันทึกการเปลี่ยนแปลง