การเพิ่มรหัสปุ่มซื้อไปยัง HTML
หลังจากที่คุณสร้างปุ่มซื้อในส่วน Shopify admin ของคุณแล้ว เท่ากับว่าคุณพร้อมที่จะเพิ่มปุ่มดังกล่าวไปยังเว็บไซต์หรือบล็อกของคุณเองแล้วเช่นกัน
กระบวนการเพิ่มโค้ดฝังตัวไปยัง HTML ต้นทางของเว็บไซต์ของคุณจะแตกต่างกันไปเล็กน้อยขึ้นอยู่กับวิธีการและตำแหน่งที่คุณต้องการให้ปุ่มซื้อและตะกร้าสินค้าปรากฏบนแพลตฟอร์มการเผยแพร่ และบางครั้งปรากฏบนธีมที่คุณใช้บนแพลตฟอร์มนั้นด้วย
หมายเหตุ: หากคุณต้องการความช่วยเหลือเกี่ยวกับการเพิ่มโค้ดฝังตัวไปยังแพลตฟอร์มการเผยแพร่นอก Shopify (เช่น Squarespace หรือบล็อก WordPress.org) ให้ติดต่อผู้ให้บริการเว็บไซต์หรือแพลตฟอร์มการเผยแพร่ของคุณโดยตรงเพื่อรับความช่วยเหลือ
การเพิ่มโค้ดฝังตัวไปยังบล็อก WordPress.org
คุณสามารถเพิ่มโค้ดฝังตัวลงในแต่ละโพสต์และในเมนูบนหน้าแรกของบล็อก WordPress.org ของคุณได้
หมายเหตุ: ปุ่มซื้อแบบฝังตัวจะสามารถใช้งานได้กับแพลตฟอร์ม WordPress.org แต่ไม่สามารถใช้งานกับ WordPress.com ได้ โดยเอกสารฉบับนี้กล่าวถึง WordPress 4.2.2 ซึ่งเวอร์ชันของคุณอาจแตกต่างกัน คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับเวอร์ชันของ WordPressได้ที่เว็บไซต์ความช่วยเหลือของ WordPress
เพิ่มโค้ดฝังตัวลงในโพสต์ของ WordPress
- ใน Shopify ให้สร้างปุ่มซื้อและคัดลอกโค้ดฝังตัวจากกล่องโต้ตอบโค้ดฝังตัว (หรือคลิกคัดลอกโค้ดฝังตัวไปยังคลิปบอร์ด)
- จากแดชบอร์ด WordPress ของคุณให้ไปที่โพสต์ของคุณ
- สร้างโพสต์ใหม่หรือแก้ไขโพสต์ที่มีอยู่ที่คุณต้องการให้แสดงปุ่มซื้อ
-
ให้ดำเนินการตามขั้นตอนใดขั้นตอนหนึ่งต่อไปนี้ ขึ้นอยู่กับเวอร์ชัน WordPress:
- ในโพสต์ ให้เปลี่ยนแปลงตัวแก้ไขข้อความจากโหมดภาพเป็นโหมข้อความ
- ในเครื่องมือแก้ไขบล็อก ให้คลิกปุ่ม
+
ค้นหาCustom HTML
จากนั้นคลิกHTML แบบกำหนดเอง
วางโค้ดฝังตัวลงในช่องข้อความในตำแหน่งที่คุณต้องการให้ปุ่มซื้อหรือคอลเลกชันปรากฏ
เมื่อเสร็จสิ้นแล้ว ให้คลิกที่บันทึกแบบร่าง ตัวอย่าง หรือเผยแพร่
เพิ่มโค้ดฝังตัวลงในเมนูของ Wordpress
ขั้นตอน:
- ในหน้าแดชบอร์ดของ WordPressของคุณ ให้คลิกที่รูปลักษณ์
- คลิกที่ปรับแต่งเพื่อเปิดเครื่องมือแก้ไขธีม จากนั้นคลิกที่วิดเจ็ต
- คลิกชื่อของพื้นที่ที่คุณต้องการเพิ่มปุ่มซื้อหรือรหัสตะกร้าสินค้าแบบกำหนดเอง
- เปิดวิดเจ็ตข้อความที่มีอยู่แล้ว หรือคลิกเพิ่มวิดเจ็ต จากนั้นคลิกที่ข้อความ
- วางโค้ดฝังตัวลงในช่องข้อความหลักภายในวิดเจ็ตข้อความ
- บันทึกการเปลี่ยนแปลง
หมายเหตุ: หากคุณต้องการเปลี่ยนลักษณะการทำงานหรือรูปลักษณ์ของตะกร้าสินค้าบนเว็บไซต์ของคุณ จากนั้นคุณจะสามารถเพิ่มรหัสตะกร้าสินค้าแบบกำหนดเองลงในเมนูบนหน้าแรกของบล็อก WordPress.org ของคุณได้
การเพิ่มโค้ดฝังตัวไปยังบล็อก Shopify ของคุณ
หมายเหตุ: ปุ่มซื้อจะสร้างตะกร้าสินค้าแยกต่างหาก หากลูกค้าของคุณเปลี่ยนไปยังหน้าอื่นในร้านค้าออนไลน์ของคุณ สินค้าดังกล่าวจะไม่ปรากฏในตะกร้าสินค้าอีกต่อไป คุณสามารถแก้ไขปุ่มซื้อเพื่อให้นำไปยังหน้าการชำระเงินได้โดยตรง
ขั้นตอน:
- จากส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > โพสต์บล็อก
- จาก แอป Shopify ให้แตะ ร้านค้า
- ในส่วน ช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะโพสต์บล็อก
- จาก แอป Shopify ให้แตะ ร้านค้า
- ในส่วน ช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
- แตะโพสต์บล็อก
- ในหน้าบล็อกโพสต์ ให้คลิกชื่อของบล็อกโพสต์ที่ต้องการแก้ไข หรือหากต้องการสร้างใหม่ ให้คลิกที่เพิ่มบล็อกโพสต์ 4. ในส่วนเขียนบล็อกโพสต์ของคุณ ให้คลิกที่แสดง HTML ในเครื่องมือแก้ไข Rich Text 5. วางโค้ดฝังตัวของคุณลงในช่องข้อความหลัก 6. คลิกที่บันทึก
การเพิ่มโค้ดฝังตัวไปยัง Squarespace
คุณสามารถเพิ่มโค้ดฝังตัวลงในแต่ละโพสต์ใน Squarespace และในเมนูบนหน้าแรกของคุณได้ ในบางกรณีคุณอาจต้องการดำเนินการทั้งสองอย่าง ตัวอย่างเช่นคุณสามารถฝังตะกร้าสินค้าลงบนหน้าแรกเพื่อรับการซื้อจากปุ่มซื้อที่คุณฝังบนแต่ละโพสต์ได้
ขั้นตอน:
- ในแดชบอร์ด Squarespace ของคุณ ให้เปิดเว็บเพจที่คุณต้องการเพิ่มโค้ดฝังตัว
- ค้นหาองค์ประกอบบนหน้าที่คุณต้องการให้ปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัวปรากฏ โดยการเลื่อนเคอร์เซอร์ไปที่บริเวณเนื้อหาของหน้าจากนั้นคลิกแก้ไข
- คลิกที่จุดแทรกในตำแหน่งที่คุณต้องการเพิ่มโค้ดฝังตัว
- ในส่วนเพิ่มเติมของกล่องโต้ตอบบล็อกเนื้อหา ให้คลิกที่โค้ด
- ในส่วน Shopify admin ของคุณ ให้คัดลอกโค้ดฝังตัวจากกล่องโต้ตอบโค้ดฝังตัว
- ในแดชบอร์ด Squarespace ของคุณ ให้วางโค้ดฝังตัวลงในกล่องโต้ตอบCODE และตรวจสอบให้แน่ใจว่าช่องข้อความดังกล่าวถูกตั้งค่าให้รับ HTML แล้ว
- คลิกที่ APPLY ในกล่องโต้ตอบ EDIT CODE
- คลิกที่บันทึกในเครื่องมือแก้ไขหน้าอีกครั้ง เนื่องจาก Squarespace ปิดใช้งาน JavaScript ในแดชบอร์ด ดังนั้นคุณจึงต้องแสดงตัวอย่างเพจของคุณแยกต่างหากเพื่อดูปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัวที่คุณเพิ่มไว้
หากคุณดำเนินการตามขั้นตอนเสร็จสิ้นแล้วและปุ่มซื้อของคุณไม่โหลด คุณอาจต้องปิดการใช้งานการโหลด Ajax ด้วย สามารถดูรายละเอียดเพิ่มเติมได้ที่เปิดหรือปิดใช้งาน Ajax
หมายเหตุ: หากคุณเพิ่มตะกร้าสินค้าแบบฝังตัวลงในเมนูบนหน้าแรกของ Squarespace ของคุณ ตะกร้าสินค้าดังกล่าวจะรับคำสั่งซื้อจากปุ่มซื้อที่คุณฝังบนแต่ละโพสต์
การเพิ่มโค้ดฝังตัวไปยัง Wix
หลังจากที่คุณสร้างปุ่มซื้อหรือคอลเลกชันในส่วน Shopify admin ของคุณแล้ว คุณจะสามารถเพิ่มปุ่มดังกล่าวไปยังเว็บไซต์ Wix ของคุณได้โดยใช้เครื่องมือแก้ไขเว็บไซต์ Wix
หากคุณต้องการแสดงสินค้ามากกว่าหนึ่งรายการบนเว็บไซต์ Wix ของคุณโดยไม่อยากแก้ไขโค้ดฝังตัว คุณสามารถฝังคอลเลกชันแทนได้ คุณสามารถสร้างคอลเลกชันใหม่สำหรับสินค้าที่คุณต้องการให้แสดงบน Wix ได้ในส่วน Shopify admin ของคุณ
ขั้นตอน:
- ในส่วน Shopify admin ของคุณ ให้สร้างปุ่มซื้อสำหรับสินค้าหรือคอลเลกชัน จากนั้นคัดลอกโค้ดฝังตัวไว้
หมายเหตุ: เมื่อคุณสร้างปุ่มซื้อของคุณสำหรับเว็บไซต์ Wix คุณจะไม่สามารถใช้การเปลี่ยนเส้นทางในตัวเลือกแท็บเดียวกันได้เนื่องจากมีข้อจำกัดของ Wix
- ในบัญชีผู้ใช้ Wix ของคุณ ให้ค้นหาเว็บไซต์ที่คุณต้องการแก้ไขในส่วนเว็บไซต์ของฉัน จากนั้นคลิกที่แก้ไขเว็บไซต์
- ในเครื่องมือแก้ไขเว็บไซต์ของ Wix ให้คลิกที่ปุ่ม
+
จากนั้นคลิกที่เพิ่มเติม - คลิกที่โค้ด HTML เพื่อเพิ่มวิดเจ็ตโค้ด HTML ไปยังหน้าดังกล่าว
- คลิกที่ป้อนโค้ด
- ในกล่องโต้ตอบการตั้งค่า HTML ให้วางโค้ดฝังตัวสำหรับปุ่มซื้อหรือคอลเลกชันของคุณลงในช่องเพิ่มโค้ดของคุณที่นี่ แล้วคลิกที่อัปเดต
- ปรับขนาดวิดเจ็ตโค้ด HTML ให้พอดีกับเนื้อหา หากคุณกำลังสร้างการฝังตัวกับตะกร้าสินค้าอยู่ ตรวจสอบให้แน่ใจว่าแท็บตะกร้าสินค้าปรากฏในที่ที่คุณต้องการแล้ว
- เมื่อเสร็จแล้ว ให้คลิกที่บันทึก
ฝังสินค้าหรือคอลเลกชันหลายรายการ
ขั้นตอน:
- ในส่วน Shopify admin ของคุณ ให้สร้างปุ่มซื้อสำหรับสินค้าหรือคอลเลกชัน จากนั้นคัดลอกโค้ดฝังตัวไว้
- วางโค้ดลงในเครื่องมือแก้ไขโค้ดหรือเครื่องสร้างเว็บไซต์ของ Wix และทำซ้ำสองขั้นตอนแรกจนกว่าคุณจะสร้างปุ่มซื้อตามที่คุณต้องการได้
- แก้ไขโค้ดฝังตัวเพื่อให้แน่ใจว่าจะแสดงในตำแหน่งการจัดวางที่เหมาะสม
- ในบัญชีผู้ใช้ Wix ของคุณ ให้ค้นหาเว็บไซต์ที่คุณต้องการแก้ไขในส่วนเว็บไซต์ของฉัน จากนั้นคลิกที่แก้ไขเว็บไซต์
- ในเครื่องมือแก้ไขเว็บไซต์ของ Wix ให้คลิกที่ปุ่ม
+
จากนั้นคลิกที่เพิ่มเติม - คลิกที่โค้ด HTML เพื่อเพิ่มวิดเจ็ตโค้ด HTML ไปยังหน้าดังกล่าว
- คลิกที่ป้อนโค้ด
- ในกล่องโต้ตอบการตั้งค่า HTML ให้วางรหัสที่ถูกแก้ไขของปุ่มซื้อของคุณลงในช่องเพิ่มโค้ดของคุณที่นี่ แล้วคลิกที่อัปเดต
- ปรับขนาดวิดเจ็ตโค้ด HTML ให้พอดีกับเนื้อหา หากคุณกำลังสร้างการฝังตัวกับตะกร้าสินค้าอยู่ ตรวจสอบให้แน่ใจว่าแท็บตะกร้าสินค้าปรากฏในที่ที่คุณต้องการแล้ว
- เมื่อเสร็จแล้ว ให้คลิกที่บันทึก
หมายเหตุ: คุณต้องการความช่วยเหลือในการใช้งานเครื่องมือแก้ไข Wix ใช่ไหม ติดต่อฝ่ายช่วยเหลือของ Wix ดูสิ
เพิ่มแท็กสคริปต์แยกต่างหาก
แพลตฟอร์มบางชนิด (เช่น Unbounce) กำหนดให้คุณวางแท็ก <script>
ของโค้ดฝังตัวลงในส่วนหัวของหน้าดังกล่าว และวางโค้ดฝังตัวที่เหลือลงในหน้าเว็บที่คุณต้องการให้ปุ่มซื้อปรากฏ
ขั้นตอน:
- ให้คัดลอกองค์ประกอบของทั้ง
<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>
เปิดส่วนหัวของหน้าเว็บบนเว็บไซต์ที่คุณต้องการฝังปุ่มซื้อลงไป
วางองค์ประกอบทั้งหมดของ
<script>
ลงในส่วนหัวของหน้าเว็บบันทึกการเปลี่ยนแปลง
ให้คัดลอกเฉพาะองค์ประกอบของ
<div>
ที่อยู่ในโค้ดฝังตัวต้นฉบับในส่วน Shopify admin ของคุณ ตัวอย่างเช่น:
<div id='product-component-2dd3c8704e6'></div>
เปิดหน้าเว็บบนเว็บไซต์ของคุณที่คุณต้องการฝังปุ่มซื้อลงไป
วางส่วนย่อยของโค้ด
<div>
ลงในหน้าเว็บดังกล่าวบันทึกการเปลี่ยนแปลง