อัปเกรดขั้นตอนการชำระเงินออนไลน์ของคุณ

หน้านี้พิมพ์ขึ้นเมื่อ May 20, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/checkout-settings/checkout-upgrade

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

หากต้องการเตรียมพร้อมสำหรับการอัปเกรดนี้ คุณจำเป็นต้องดำเนินการดังต่อไปนี้:

  1. ดูตัวอย่างการชำระเงินแบบใหม่และทดสอบประสบการณ์การชำระเงินจากมุมมองของลูกค้า คุณอาจต้องเปลี่ยนไฟล์ checkout.liquid ก่อนจะสามารถอัปเกรดได้ ทั้งนี้ขึ้นอยู่กับการปรับแต่งที่ได้ทำไว้ในขั้นตอนการชำระเงิน
  2. เมื่อคุณพอใจกับการเปลี่ยนแปลงของคุณแล้วให้อัปเกรดร้านค้าของคุณเพื่อใช้งานการชำระเงิน Shopify ใหม่

ในหน้านี้

ดูตัวอย่างการชำระเงินของคุณและทดสอบข้อผิดพลาด

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

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่หน้าอัปเกรดการชำระเงิน จากนั้นคลิก “ดูตัวอย่างการชำระเงิน”
  2. เลือกธีมปัจจุบันของคุณจากรายการ จากนั้นคลิก ดูตัวอย่าง
  3. สร้างการชำระเงินทดสอบ โดยดําเนินการต่อในขั้นตอนการชำระเงินในฐานะลูกค้า

หากคุณพบข้อผิดพลาดใดๆ ระหว่างการทดสอบเหล่านี้ การปรับแต่งการชำระเงินบางส่วนของคุณอาจขัดแย้งกับ การปรับปรุง ในเวอร์ชันใหม่ หากเป็นกรณีเช่นนี้ คุณจำเป็นต้องทำการเปลี่ยนแปลงไฟล์ checkout.liquid ของคุณ ก่อนที่จะอัปเกรด

การแก้ไขข้อผิดพลาด

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. คลิกปุ่ม "..." จากนั้นคลิก "คัดลอก"
  3. จากธีมเพิ่มเติมให้ค้นหาธีมที่ซ้ำกัน จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส" ทำการแก้ไขและทดสอบโดยใช้ธีมที่ซ้ำกันและไม่ได้เผยแพร่เวอร์ชันนี้

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

  1. เปิดไฟล์ checkout.liquid

  2. ดูตัวอย่างไฟล์ checkout.liquid จากธีมที่ทำซ้ำของคุณโดยใช้การชำระเงิน Shopify แบบใหม่:

หากคุณมีข้อผิดพลาดหรือสังเกตเห็นปัญหาในรูปแบบที่การชำระเงินปรากฏในหน้าการชำระเงิน คุณจำเป็นต้องแก้ไขไฟล์ checkout.liquid เพื่อแก้ปัญหาดังกล่าว

อัปเกรดเป็นการชำระเงินแบบใหม่ของ Shopify

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

เลือกช่วงเวลาที่ผู้คนเบาบางสำหรับการอัปเกรด (เช่นเช้าตรู่ ช่วงดึกหรือในช่วงสุดสัปดาห์) เพื่อลดการหยุดชะงักในการดำเนินการที่อาจเกิดขึ้น

ขั้นตอน:

  1. ในหน้าอัปเกรดการชำระเงินให้คลิกอัปเกรดขั้นตอนการชำระเงิน (ปุ่มนี้จะอยู่ที่ด้านล่างของหน้า)

  2. หากคุณพบข้อผิดพลาดเมื่อแสดงตัวอย่างธีมแรกของคุณ ก่อนอื่นคุณควรตรวจสอบให้แน่ใจว่าได้แก้ไขข้อผิดลาดดังกล่าวแล้ว (อ้างอิงถึงการแก้ไขข้อผิดพลาดด้านบน) จากนั้นให้เผยแพร่ธีมซ้ำเดิมที่อัปเดตแล้วของคุณ:

ขั้นตอนการชำระเงินของคุณจะได้รับการอัปเกรดและสำเนาธีมของคุณคือธีมปัจจุบันของคุณ

มีอะไรใหม่ในขั้นตอนการชำระเงินของ Shopify

การชำระเงินของ Shopify เวอร์ชันใหม่ประกอบด้วยการเปลี่ยนแปลงและฟีเจอร์ใหม่ๆ ดังต่อไปนี้:

การสมัครรับข้อมูล

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

หลังจากอัปเกรดการชำระเงินเสร็จสิ้นแล้ว คุณสามารถเสนอการสมัครใช้งานโดยการเพิ่มแอปการสมัครใช้งานจาก Shopify App Store หรือสร้างแอปแบบกำหนดเองด้วย API การสมัครใช้งานใหม่

ดูข้อมูลเพิ่มเติมเกี่ยวกับการสมัครใช้งานในศูนย์ช่วยเหลือของ Shopify

  • เมื่อเปิดใช้งานการสมัครใช้งาน วิธีการจัดส่งที่ใช้สำหรับการสมัครใช้งานจะแสดงแยกต่างหากจากวิธีการจัดส่งสำหรับการซื้อแบบครั้งเดียว
  • .product_description_variant Span.product_description_selling_plan ปรากฏเป็นคุณสมบัติเพิ่มเติมของสินค้าเฉพาะรายการหากมีการสมัครใช้งานที่เกี่ยวข้องกับสินค้าดังกล่าว
  • ยอดรวมของการซื้อซ้ำกับเคล็ดลับเกี่ยวกับเครื่องมือที่เกี่ยวข้องจะปรากฏด้านล่างยอดรวมในสรุปคำสั่งซื้อ
  • ตัวเลือกการจัดส่งสินค้าแบบสมัครใช้งานจะปรากฏเมื่อมีสินค้าแบบสมัครใช้งานรวมอยู่ในคำสั่งซื้อ

การเสนอขายที่มีมูลค่าสูงขึ้น

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการแนะนำสินค้าที่ราคาสูงกว่าหลังการซื้อ

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

หมายเหตุ: การปรับแต่งหน้าหลังการซื้อจะเสร็จสิ้นภายในแอปแนะนำสินค้าที่มีมูลค่าสูงขึ้นของบุคคลภายนอก ไม่สามารถปรับแต่งโดยใช้ checkout.liquid ได้

การให้ทิปในขั้นตอนการชำระเงิน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเสนอตัวเลือกการให้ทิป

  • เมื่อเปิดใช้งานการให้ทิปแล้ว ส่วนเพิ่มทิปจะปรากฏขึ้นในขั้นตอนวิธีการชำระเงินของขั้นตอนการชำระเงิน

การรับสินค้าและการจัดส่งในพื้นที่

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

ดูวิธีเปิดใช้งานการรับสินค้าที่ร้านและการจัดส่งภายในพื้นที่

  • ช่องข้อมูลเพิ่มเติมสำหรับการจัดส่งในพื้นที่จะปรากฏเมื่อมีการเปิดใช้งานการจัดส่งในพื้นที่และลูกค้าเลือกไว้
  • หากเปิดใช้งานการรับสินค้าที่ร้าน ระบบจะแสดงส่วนวิธีการจัดส่งไปยังลูกค้าในหน้าข้อมูลในขั้นตอนการชำระเงิน หากไม่สามารถจัดส่งได้ก็จะแสดงเฉพาะข้อมูลการรับสินค้าเท่านั้น

  • วิธีการจัดส่งจะปรากฏเป็นแท็บแยกออกมา

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

  • หากลูกค้าเลือกรับสินค้าในขั้นตอนการจัดส่งของขั้นตอนการชำระเงิน ระบบจะไม่เก็บข้อมูลการจัดส่ง ลูกค้าจำเป็นต้องป้อนข้อมูลการเรียกเก็บเงินในขั้นตอนการชำระเงิน

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

  • หน้าสถานะคำสั่งซื้อได้รับการอัปเดตเพื่อแสดงความคืบหน้าของการจัดส่งและการรับสินค้า ข้อความจะปรากฏเมื่อ:

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

ช่องทางต่างประเทศเพิ่มเติม

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องทางต่างประเทศเพิ่มเติม

  • ช่องการชำระเงินเพิ่มเติมจะปรากฏเฉพาะลูกค้าในบราซิล เกาหลีใต้ อิตาลี และจีนเท่านั้น

ปุ่ม “ติดตามคำสั่งซื้อด้วย Shop”

ปุ่มติดตามคำสั่งซื้อกับ Shop ในสถานะคำสั่งซื้อและหน้าขอบคุณได้รับการอัปเดตด้วยรูปแบบใหม่

ดูข้อมูลเพิ่มเติมเกี่ยวกับแอป Shop

  • มีการเพิ่มปุ่มข้อความที่แจ้งให้ลูกค้าติดตามการซื้อของพวกเขาในแอป Shop
  • มีการเพิ่มพารามิเตอร์เพื่อแสดงการติดตาม Shop Pay
  • การแสดงผลของปุ่ม “ติดตามคำสั่งซื้อด้วย Shop” สำหรับกรณีดังต่อไปนี้:
    • จัดส่งไม่ถึงมือลูกค้า
    • การยืนยัน
    • จัดส่งแล้ว
    • ล้มเหลว
    • รอดำเนินการ
    • ไม่สามารถจัดส่งได้
    • อยู่ระหว่างการจัดส่ง

การอัปเดตหน้าสถานะคำสั่งซื้อ

มีการอัปเดตจำนวนมากในหน้าสถานะคำสั่งซื้อ

  • ส่วนสำหรับข้อมูลบัตรของขวัญโดยเฉพาะสร้างขึ้นที่จะปรากฏเมื่อมีการซื้อบัตรของขวัญไปแล้ว
  • เพิ่มข้อมูลการสมัครใช้งานแล้ว
  • ระดับชั้น icon-svg--align-text-bottom ถูกลบไปแล้ว
  • data-step="thank-you" มีการเปลี่ยนแปลงเป็น data-step="thank_you" หากคุณใช้แอททริบิวต์นี้เพื่อระบุว่าลูกค้าใช้งานอยู่ในหน้าใดของการชำระเงิน ให้ใช้อ็อบเจกต์ JavaScript “Shopify.Checkout.page” แทน
  • เพิ่มบัตรแสดงสถานะคำสั่งซื้อแล้ว

การเปลี่ยนแปลงไฟล์ทั่วไป

  • div.content-box__row ตอนนี้มี role="table"
  • หากลูกค้าอยู่ในขั้นตอนการขอบคุณและมีคิวอาร์โค้ด จะมีการเพิ่ม show_qr.js
  • มีการเพิ่มการตรวจสอบเพื่อให้แน่ใจว่าลูกค้าสามารถเข้าถึงขั้นตอนการชำระเงินได้
  • ตอนนี้บัตรของขวัญจะแสดงด้วย checkouts/order_status/gift_cards
  • คำสั่งข้อมูลการติดต่อได้รับการแก้ไขแล้วด้วย enforce_content_directionality
  • ข้อมูลการจัดส่งถูกย้ายไปยัง checkouts/web/checkouts/contact_information/pickup แล้ว
  • มีการรองรับการแสดงรายละเอียดการจัดส่งแบบหลายบรรทัดในแถบสรุปคำสั่งซื้อด้านข้างแล้ว
  • tr.total-line จะแสดงเฉพาะเมื่อมีการอัปเดตยอดรวม
  • ขณะนี้มีการรองรับบรรทัดการชำระเงินแบบทั่วไป
  • ขณะนี้มีการรองรับการเปลี่ยนสกุลเงินระหว่างขั้นตอนการชำระเงิน

  • #payment-gateway-subfields ขณะนี้มีระดับชั้น:

    • .radio-wrapper content-box__row .content-box__row--secondary
    • .card-fields-container

  • คำแนะนำการใช้งานบัตรเครดิตได้รับการปรับปรุงและตอนนี้อยู่ใน div.field__icon

  • Aria-label จะถูกลบออกจากรายละเอียดอัตราค่าจัดส่งแบบเต็ม

  • ช่องแบบฟอร์มอัตราค่าจัดส่งย้ายไปยัง checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields

สถานะโครงสร้าง/ขณะโหลด

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

  • วัตถุที่ซ่อนขณะโหลด:

    • del.total-recap__original-price
    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis

  • วัตถุที่แสดงโครงสร้างขณะโหลด:

    • Span.total-recap__final-price
    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price.total-line--subtotal span.order-summary__emphasis

ข้อความแจ้งข้อผิดพลาด

เพิ่มข้อความแจ้งข้อผิดพลาดใหม่ไปยังขั้นตอนการชำระเงินแล้ว

  • คำเตือนหมายเลขพลเมืองได้เพิ่มไปยังช่องที่อยู่แล้ว
  • คำเตือนที่ระบุว่าไม่มีอัตราค่าจัดส่งในตะกร้าสินค้า ปลายทาง หรือประเทศแบ่งออกเป็นข้อความแจ้งเตือนที่แตกต่างกันสองข้อความ: ข้อความแจ้งเตือนที่ระบุว่าไม่มีอัตราค่าจัดส่งสำหรับตะกร้าสินค้าหรือปลายทางหนึ่งข้อความ และข้อความเตือนที่ระบุว่าไม่มีอัตราค่าจัดส่งสำหรับประเทศแยกต่างหาก
  • แบนเนอร์คำเตือนถูกเพิ่มไปยังขั้นตอนการชำระเงินเมื่อดำเนินการสั่งซื้อเสร็จสิ้นในร้านค้าระยะพัฒนา
  • มีการเพิ่มประกาศที่จะปรากฏขึ้นเมื่อจะไม่เรียกเก็บเงินลูกค้าในขั้นตอนการชำระเงิน
  • มีการเพิ่มแบนเนอร์คำเตือนเพื่อระบุว่ามีข้อผิดพลาดในการเปลี่ยนแปลงการยืนยันตัวตน
  • มีการเพิ่มข้อความแจ้งข้อผิดพลาดที่ระบุว่าวิธีการจัดส่งจะไม่สามารถใช้งานได้ในขั้นตอนการจัดส่งของขั้นตอนการชำระเงิน

การเปลี่ยนแปลงลักษณะประจำข้อมูล

Trekkie ถูกลบออกจากอ็อบเจกต์ต่อไปนี้:

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • ช่องป้อนข้อมูลการชำระเงิน:
    • {type}_address_field
    • {type}_firstname_field
    • {type}_lastname_field
    • {type}_company_field
    • {type}_address1_google_autocomplete_field
    • {type}_address1_field
    • {type}_address2_field
    • {type}_city_field
    • {type}_country_field
    • {type}_province_field
    • {type}_zip_google_autocomplete_field
    • {type}_phone_field

การปรับปรุงการเข้าถึง

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

  • เพิ่ม role="list" ใน ul ต่อไปนี้

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • ได้มีการลบคำแนะนำเครื่องมือออกจาก aria-labelledby ใน telephone_field

  • ใน Shop ได้มีการเปลี่ยนแปลงป้ายกำกับอินพุตเพื่ออ้างอิงไปยังโทรศัพท์

  • เพิ่มส่วนหัว h3 เมื่อรอภาษี

  • เพิ่มส่วนหัว h3 เมื่อเปลี่ยนเส้นทาง

  • เมื่อโหลดวิธีการจัดส่ง แท็ก p ได้เปลี่ยนเป็นแท็ก h3

  • ในตอนนี้การกรอกช่องข้อมูลอัตโนมัติจะอ้างอิง mobile tel แทน phone

  • อัปเดต div[data-processing-order] โดยการเพิ่ม role="region"

  • อัปเดต div[data-announce-change] โดยการดำเนินการต่อไปนี้

    • เพิ่ม role="region"
    • ตั้งค่า aria-labelledby ให้ตรงกับ ID ขององค์ประกอบส่วนหัว
    • ตั้งค่า aria-describedby ให้ตรงกับ ID ขององค์ประกอบคอนเทนเนอร์เนื้อหา

  • อัปเดต div.content-box blank-slate โดยการดำเนินการต่อไปนี้

    • เพิ่ม role="region"
    • ตั้งค่า aria-labelledby ให้ตรงกับ ID ขององค์ประกอบส่วนหัว

  • กริดการชำระเงินด่วนได้รับการปรับปรุง โดยเปลี่ยนไปใช้องค์ประกอบ ul และ li แทน div

  • อัปเดตข้อมูลสรุปคำสั่งซื้อโดยการดำเนินการต่อไปนี้

    • ปรับปรุงความชัดเจนของราคาโปรโมชันและราคาปกติ
    • เปลี่ยน span เป็นแท็ก dl
    • เปลี่ยนแท็ก del เป็นแท็ก dt และ dd

  • อัปเดตรายละเอียดวิธีการชำระเงินโดยการเปลี่ยนองค์ประกอบต่อไปนี้

    • span.radio__label__accessory เปลี่ยนเป็น div.radio__label__accessory
    • span.visually-hidden เปลี่ยนเป็น h3.visually-hidden
    • span.payment-icon-list__more เปลี่ยนเป็น li.payment-icon-list__more
    • span.content-box__small-text เปลี่ยนเป็น small.content-box__small-text

ลิงก์ที่เกี่ยวข้อง

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

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