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

เครื่องหมาย 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

เคล็ดลับ

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

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

เคล็ดลับ

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

ขั้นตอนมีดังนี้

เดสก์ท็อป

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>

iPhone

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>

Android

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 ด้วยตนเอง

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

เคล็ดลับ

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

ขั้นตอนมีดังนี้

เดสก์ท็อป

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>

iPhone

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>

Android

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>