การเพิ่มโค้ดปุ่มซื้อไปยัง HTML

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

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

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

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

เพิ่มโค้ดฝังตัวไปยังโพสต์หรือหน้าของ WordPress

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

หากคุณใช้ Classic Editor Plugin ของ WordPress แทนการใช้บล็อก Custom HTML ให้เปลี่ยนเครื่องมือแก้ไขข้อความจากโหมดภาพเป็นโหมดข้อความ แล้ววางโค้ดฝังตัวในเครื่องมือแก้ไข

เพิ่มโค้ดฝังตัวไปยังเทมเพลต WordPress

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

ขั้นตอน

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

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

ขั้นตอน

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

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

ขั้นตอน

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

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

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

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

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

ขั้นตอน

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

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

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

ขั้นตอน

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

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

แพลตฟอร์มบางอย่าง (เช่น 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. บันทึกการเปลี่ยนแปลงของคุณ