การแก้ไขหรือการลบปุ่มซื้อหรือตะกร้าสินค้าแบบฝังตัว

หน้านี้พิมพ์ขึ้นเมื่อ Apr 24, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-sales-channels/buy-button/legacy-edit-delete

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

ในหน้านี้

ลบปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัว

หากต้องการลบปุ่มซื้อ คอลเลกชัน หรือตะกร้าสินค้าแบบฝังตัว:

  1. เปิดแหล่งที่มาของ HTML ของเว็บเพจที่มีปุ่มซื้อ คอลเลกชันแบบฝังตัว หรือตะกร้าสินค้าแบบฝังตัว

  2. ลบโค้ดฝังตัวทั้งหมดออกจากแหล่งที่มา HTML โค้ดฝังตัวสำหรับปุ่มซื้อจะมีลักษณะดังต่อไปนี้:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">ซื้อสินค้าของคุณ</a></noscript>
  1. บันทึกการเปลี่ยนแปลง

แก้ไขปุ่มซื้อ

หากต้องการเปลี่ยนรูปลักษณ์หรือการตั้งค่าของปุ่มซื้อที่มีอยู่ คุณต้องแก้ไขเนื้อหาของแท็ก div หลักในโค้ดฝังตัวที่ปรากฏในแหล่งที่มา HTML:

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

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

ตัวอย่างเช่น หากคุณต้องการให้ปุ่มซื้อที่มีอยู่นำผู้ใช้ไปยังหน้าสินค้าแทนที่หน้าการชำระเงิน:

  1. ให้เปิด HTML ของหน้าที่มีปุ่มซื้อที่คุณต้องการเปลี่ยน

  2. ค้นหาคุณลักษณะ data-redirect_to ภายในแท็ก div ของโค้ดฝังตัวของปุ่มซื้อ: 

    data-redirect_to="checkout"

  3. เปลี่ยนค่าของคุณลักษณะเป็น product : 

     data-redirect_to="product"

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

แท็ก div หลักของปุ่มซื้อมีหลายคุณลักษณะที่คุณสามารถแก้ไขได้:

แอตทริบิวต์แท็กปุ่มซื้อที่แก้ไขได้
คุณลักษณะ มูลค่า ค่าเริ่มต้น
ข้อมูลร้านค้า โดเมน myshopify (เช่น storename.myshopify.com ) ที่เชื่อมต่อกับปุ่ม โดเมน Shopify ของคุณ
data-product_handle แฮนเดิลของสินค้าแนะนำซึ่งอิงตามชื่อของสินค้า สินค้าแต่ละรายการของคุณมีแฮนเดิลที่ไม่ซ้ำกันใน Shopify แฮนเดิลของสินค้าแนะนำ
data-embed_type แยกความแตกต่างกันระหว่างโค้ดฝังตัวสำหรับปุ่มซื้อ คอลเลกชันแบบฝังตัว และตะกร้าสินค้าแบบฝังตัว ค่าที่เป็นไปได้คือ product cart และ collection สินค้า
data-display_size ความกว้างสูงสุดของการฝังตัวทั้งหมด (ที่ไม่ใช่ปุ่ม) สามารถเป็น กะทัดรัด (230px) หรือ ปกติ (450px) ได้ ใช้กับปุ่มซื้อสินค้าเพียงรายการเดียวเท่านั้น กะทัดรัด
data-has_image ไม่ว่าจะเป็นสินค้าที่ติดตั้งภายในเต็มรูปแบบ ( true ) หรือปุ่มซื้อเท่านั้น( false ) จริง
data-redirect_to ปลายทางการลิงก์ของปุ่มซื้อ โดยค่าดังกล่าวอาจเป็น checkout, product หรือ cart ก็ได้ หากคุณต้องการให้ปุ่มซื้อเชื่อมต่อกับตะกร้าสินค้าแบบฝังตัวในหน้าเดียวกัน data-redirect_to ต้องเป็น cart การชำระเงิน
data-product_modal ทริกเกอร์โมดอลสินค้าเพื่อแสดง เมื่อมีการคลิกที่สินค้า หากค่าของ data-redirect_to คือ modal คุณสมบัตินี้ต้องเป็นเช่น true หรือไม่ก็ false เท็จ
data-buy_button_text ข้อความที่แสดงบนปุ่มซื้อ ซื้อเลย
data-button_background_color โค้ดฐานสิบหกของสีของปุ่มซื้อโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ 7db461
data-button_text_color โค้ดฐานสิบหกของสีของข้อความปุ่มซื้อโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ ffffff
data-background_color สีพื้นหลังของพื้นที่โดยรอบปุ่มซื้อ อาจเป็นโค้ดฐานสิบหก (ตามกฎข้างต้น) หรือโปร่งใสก็ได้ หากเลือกโปร่งใส จะไม่มีการปรับใช้ช่องว่างกับเนื้อหาของการฝัง โปร่งใส
data-show_product_price แทนที่ไม่ว่าจะแสดงราคาสินค้าหรือไม่ สามารถเป็น true หรือ false ค่าปัจจุบันของ data-has_image
data-show_product_title แทนที่ไม่ว่าจะแสดงชื่อสินค้าหรือไม่ อาจเป็น true หรือ false ค่าปัจจุบันของ data-has_image
data-buy_button_out_of_stock_text ข้อความที่ปรากฏเมื่อสินค้าหมดสต็อก หมดสต็อก
data-buy_button_product_unavailable_text ข้อความที่ปรากฏเมื่อสินค้าไม่พร้อมจำหน่าย ไม่พร้อมใช้งาน
data-product_title_color โค้ดฐานสิบหกของสีของข้อความชื่อสินค้าโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ 000000

แก้ไขตะกร้าสินค้าของเว็บไซต์ของคุณ

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

วิธีแก้ไขตะกร้าสินค้าของเว็บไซต์คุณ:

  1. เปิด HTML ของหน้าที่มีตะกร้าสินค้าที่คุณต้องการจะแก้ไข

  2. วางโค้ดต่อไปนี้:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. แทนที่ your-shop-name.myshopify.com ด้วยที่อยู่ของร้านค้าคุณ myshopify.com

  2. เพิ่มคุณสมบัติที่เกี่ยวข้องไปยังแท็ก div หลักของตะกร้าสินค้าและเปลี่ยนแปลงเพื่อใส่ค่าที่คุณต้องการ ตัวอย่างเช่น หากคุณต้องการเปลี่ยนข้อความที่ปรากฏที่ด้านบนของตะกร้าสินค้า คุณจำเป็นต้องเพิ่ม data-cart_title="your text" ไปยังแท็ก div หลักในส่วนย่อยของโค้ด ผลลัพธ์จะมีลักษณะดังนี้:

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. เมื่อเสร็จสิ้นแล้ว ให้บันทึกการเปลี่ยนแปลงของคุณ

ลักษณะตะกร้าสินค้า

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

แอตทริบิวต์การปรับแต่งตะกร้าสินค้า
คุณลักษณะ มูลค่า ค่าเริ่มต้น
ข้อมูลร้านค้า โดเมนที่เกี่ยวข้องกับ myshopify (เช่น storename.myshopify.com) โดเมน Shopify ของคุณ
data-embed_type แยกความแตกต่างกันระหว่างโค้ดฝังตัวสำหรับปุ่มซื้อ คอลเลกชันแบบฝังตัว และตะกร้าสินค้าแบบฝังตัว ค่าที่เป็นไปได้คือ product cart และ collection ตะกร้าสินค้า
data-checkout_button_text ข้อความที่แสดงบนปุ่มที่นำทางไปยังหน้าการชำระเงินจากภายในตะกร้าสินค้า (ไม่ใช่ปุ่มตะกร้าสินค้า) การชำระเงิน
data-button_text_color โค้ดฐานสิบหกของสีของข้อความปุ่มตะกร้าสินค้าโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ ffffff
data-button_background_color โค้ดฐานสิบหกของสีของปุ่มตะกร้าสินค้าโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ 7db461
data-background_color สีพื้นหลังของพื้นที่โดยรอบตะกร้าสินค้าแบบฝังตัว อาจเป็นโค้ดฐานสิบหก (ตามกฎข้างต้น) หรือโปร่งใสก็ได้ หากเลือกโปร่งใส จะไม่มีการปรับใช้ช่องว่างกับเนื้อหาของการฝัง โปร่งใส
data-text_color โค้ดฐานสิบหกของสีของข้อความปุ่มตะกร้าสินค้าโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ 000000
data-accent_color โค้ดฐานสิบหกของสีขอบที่ปรากฏรอบตะกร้าสินค้าโดยที่ไม่มี # สามารถเป็นเลขฐานสิบหก 3 หรือ 6 ตัวก็ได้ 000000
data-cart_title ข้อความที่ปรากฏที่ด้านบนของตะกร้าสินค้าแบบฝังตัว เมื่อเปิดในหน้า ตะกร้าสินค้าของคุณ
data-cart_total_text ข้อความที่ปรากฏด้านข้างจำนวนเงินทั้งหมดในตะกร้าสินค้าแบบฝังตัว ยอดรวม
data-discount_notice_text ข้อความแจ้งเตือนส่วนลดที่ปรากฏในตะกร้าสินค้าแบบฝังตัว มีการเพิ่มการจัดส่งและโค้ดส่วนลดในขั้นตอนการชำระเงิน
data-sticky บ่งชี้ว่าไม่ว่าปุ่มดังกล่าวจะปรากฏในตำแหน่งที่ตั้งในมาร์กอัปหรือติดอยู่ที่ด้านข้างของหน้านั้น ตะกร้าสินค้าแบบฝังตัวที่เพิ่งสร้างขึ้นจะตั้งค่านี้เป็น true ในเอาต์พุตโค้ดฝังตัว เท็จ
data-empty_cart_text ข้อความที่ปรากฏขึ้น หากตะกร้าสินค้าว่างอยู่ ตะกร้าสินค้าของคุณว่างอยู่
data-next_page_button_text ข้อความที่ปรากฏบนปุ่มหน้าถัดไปภายในคอลเลกชันแบบฝังตัว หน้าถัดไป

แก้ไขคอลเลกชันแบบฝังตัว

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

องค์ประกอบที่สอง div ยังมีคุณสมบัติดังต่อไปนี้:

ข้อกำหนดของแอตทริบิวต์ในโค้ดปุ่มซื้อ
คุณลักษณะ มูลค่า ค่าเริ่มต้น
data-collection_handle แฮนเดิลของคอลเลกชันเด่นซึ่งอิงตามชื่อของคอลเลกชัน แต่ละคอลเลกชันของคุณมีแฮนเดิลที่ไม่ซ้ำกันใน Shopify แฮนเดิลของคอลเลกชันเด่น
data-embed_type แยกความแตกต่างกันระหว่างโค้ดฝังตัวสำหรับปุ่มซื้อ คอลเลกชันแบบฝังตัว และตะกร้าสินค้าแบบฝังตัว ค่าที่เป็นไปได้คือ product cart และ collection คอลเลกชัน

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

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