แสดง Shop Promise ในหน้าสินค้าของคุณ

หน้านี้พิมพ์ขึ้นเมื่อ Apr 18, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/shipping/shop-promise/product-page

เครื่องหมาย Shop Promise จะแสดงด้านข้างวันที่จัดส่งและในหน้าสินค้าของการจัดส่งที่มีคุณสมบัติเข้าเกณฑ์ ซึ่งคาดว่าได้รับการจัดส่งภายในประเทศสหรัฐอเมริกาภายในเวลาไม่เกิน 5 วันตามปฏิทิน เครื่องหมายนี้ช่วยให้ลูกค้าทราบว่าคำสั่งซื้อของตนมีการจัดส่งที่รวดเร็วและเชื่อถือได้

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

หากเครื่องหมายแสดงไม่ถูกต้อง คุณจะต้องวางตําแหน่งโมดูล Shop Promise ด้วยตนเอง

ในหน้านี้

วางตําแหน่งโมดูล Shop Promise ด้วยตนเอง

หากคุณสะดวกที่จะอ่านและแก้ไขโค้ดธีมเอง คุณสามารถระบุตำแหน่งที่จะเปลี่ยนแปลงและอัปเดตหน้าสินค้า

ระบุจุดที่ต้องการจะเปลี่ยนแปลง

คุณจะต้องใส่โค้ดของโมดูล Shop Promise ไว้ในแบบฟอร์มสินค้าในหน้าสินค้า ซึ่งจะมีลักษณะตามตัวอย่างนี้ {%- form 'product', product -%} สามารถดูโมดูล Shop Promise ได้ในหลากหลายตำแหน่งด้วยกันขึ้นอยู่กับธีมของคุณ ตำแหน่งต่อไปนี้เป็นตำแหน่งที่ใช้ดูแบบฟอร์มสินค้าได้โดยทั่วไป:

  • main-product.liquid
  • product-form.liquid
  • product-template.liquid
  • product.liquid

อัปเดตหน้าสินค้า

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  3. เปิดไฟล์ที่เกี่ยวข้อง
  4. ค้นหาบรรทัดที่มี {%- if block.settings.show_dynamic_checkout -%} หรือ {{ form | payment_button }}
  5. สร้างบรรทัดใหม่ด้านล่างบรรทัดดังกล่าว{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} แล้วจึงวางข้อความต่อไปนี้ในบรรทัดนั้น: 
<div class="delivery-promise__promise-container"></div>
  1. คลิกที่ “บันทึก”

ผลลัพธ์ที่ได้ควรมีลักษณะดังต่อไปนี้:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. จากแอป Shopify ให้แตะที่ปุ่ม …
  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
  3. แตะจัดการธีม
  4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  5. เปิดไฟล์ที่เกี่ยวข้อง
  6. ค้นหาบรรทัดที่มี {%- if block.settings.show_dynamic_checkout -%} หรือ {{ form | payment_button }}
  7. สร้างบรรทัดใหม่ด้านล่างบรรทัดดังกล่าว{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} แล้วจึงวางข้อความต่อไปนี้ในบรรทัดนั้น: 
<div class="delivery-promise__promise-container"></div>
  1. คลิกที่ “บันทึก”

ผลลัพธ์ที่ได้ควรมีลักษณะดังต่อไปนี้:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. จากแอป Shopify ให้แตะที่ปุ่ม …
  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
  3. แตะจัดการธีม
  4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  5. เปิดไฟล์ที่เกี่ยวข้อง
  6. ค้นหาบรรทัดที่มี {%- if block.settings.show_dynamic_checkout -%} หรือ {{ form | payment_button }}
  7. สร้างบรรทัดใหม่ด้านล่างบรรทัดดังกล่าว{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} แล้วจึงวางข้อความต่อไปนี้ในบรรทัดนั้น: 
<div class="delivery-promise__promise-container"></div>
  1. คลิกที่ “บันทึก”

ผลลัพธ์ที่ได้ควรมีลักษณะดังต่อไปนี้:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

การแทนที่ธีมโมดูล Shop Promise ด้วยตนเอง

โมดูล Shop Promise จะมีธีมแบบมืดและแบบสว่าง โดยโมดูลจะใช้ธีมที่มีอัตราส่วนคอนทราสต์สูงสุดเมื่อเทียบกับสีพื้นหลังของหน้าสินค้าโดยอัตโนมัติ

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

ก่อนจะลงมือทำการเปลี่ยนแปลงใดๆ ให้ทำซ้ำธีมของคุณแล้วจึงแก้ไขธีมที่ทำซ้ำ เพื่อให้คุณสามารถย้อนคืนการเปลี่ยนแปลงใดๆ ได้อย่างสะดวก

ขั้นตอน:

  1. ปฏิบัติตามคําแนะนำเพื่อวางตำแหน่งโมดูล Shop Promise ด้วยตนเองในหน้าสินค้า จากนั้นจึงเปิดเครื่องมือแก้ไขธีมไว้
  2. เพิ่มแอตทริบิวต์ข้อมูลธีมไปยังองค์ประกอบจุดยึดที่สร้างขึ้นใหม่ โดยตั้งค่าเป็นมืดหรือสว่าง
  3. คลิกที่ “บันทึก”

ผลลัพธ์ควรมีลักษณะเหมือนกับหนึ่งในตัวอย่างต่อไปนี้:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

หรือ

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. ปฏิบัติตามคําแนะนำเพื่อวางตำแหน่งโมดูล Shop Promise ด้วยตนเองในหน้าสินค้า จากนั้นจึงเปิดเครื่องมือแก้ไขธีมไว้
  2. เพิ่มแอตทริบิวต์ข้อมูลธีมไปยังองค์ประกอบจุดยึดที่สร้างขึ้นใหม่ โดยตั้งค่าเป็นมืดหรือสว่าง
  3. แตะที่บันทึก

ผลลัพธ์ควรมีลักษณะเหมือนกับหนึ่งในตัวอย่างต่อไปนี้:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

หรือ

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. ปฏิบัติตามคําแนะนำเพื่อวางตำแหน่งโมดูล Shop Promise ด้วยตนเองในหน้าสินค้า จากนั้นจึงเปิดเครื่องมือแก้ไขธีมไว้
  2. เพิ่มแอตทริบิวต์ข้อมูลธีมไปยังองค์ประกอบจุดยึดที่สร้างขึ้นใหม่ โดยตั้งค่าเป็นมืดหรือสว่าง
  3. แตะที่บันทึก

ผลลัพธ์ควรมีลักษณะเหมือนกับหนึ่งในตัวอย่างต่อไปนี้:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

หรือ

<div class="delivery-promise__promise-container" data-theme="light"></div>

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

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