หน้าสินค้า

หน้าสินค้าอีคอมเมิร์ซนำเสนอรายละเอียดสินค้าทั้งหมดและสื่อที่เกี่ยวข้องกับสินค้า คุณสามารถปรับแต่ง:ref:ส่วนภาพและวิดีโอ <ecommerce/product_page/image-customization> เลือก:ref:ข้อมูลสินค้าที่จะแสดง <ecommerce_design/product_page/customization> แสดง:ref:ปุ่ม <ecommerce_design/product_page/buttons>`ที่เฉพาะเจาะจง ปรับแต่ง:ref:`ส่วนรายละเอียดคุณสมบัติ <ecommerce_design/product_page/attributes> เปิดใช้งาน:ref:ฟีเจอร์การจัดระเบียบเพิ่มเติม <ecommerce_design/product_page/page-features> และเพิ่มเนื้อหาโดยใช้:ref:บล็อกการสร้าง <ecommerce_design/product_page/building_blocks>

รูปภาพและวิดีโอสินค้า

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

Tip

หากต้องการเข้าถึงหน้าสินค้าที่เกี่ยวข้องจาก:ref:แบบฟอร์มสินค้า <ecommerce/products/product-form>`ในแบ็กเอนด์ ให้คลิกปุ่มอัจฉริยะ :icon:`fa-globe ไปที่เว็บไซต์ ที่ด้านบนของแบบฟอร์ม

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

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

• รูปภาพหลัก: คลิก แทนที่ เพื่อเปลี่ยนภาพสินค้าหลัก

  Note

  ไม่สามารถใช้วิดีโอเป็นสื่อหลักได้

• สื่อเพิ่มเติม: เพิ่มเติม รูปภาพหรือวิดีโอ (รวมถึงผ่าน URL) หรือ ลบทั้งหมด รายการสื่อ

• การแสดงผล: เลือกระหว่างเค้าโครงต่อไปนี้เมื่อคุณใช้รายการสื่อมากกว่าหนึ่งรายการ:

  • ภาพหมุน: ตัวเลือกนี้ช่วยให้ผู้เยี่ยมชมสามารถไปยังรูปภาพถัดไปได้โดยใช้ (ลูกศรซ้าย) หรือ (ลูกศรขวา) แสดง รูปขนาดย่อ ที่ (ซ้าย) หรือที่ (ล่าง) และปรับความ โค้งมน ของมุมรูปภาพ

  • ตาราง: เค้าโครงนี้จะแสดงรายการสื่อในรูปแบบตาราง ปรับจำนวน คอลัมน์ และกำหนด ระยะห่าง ระหว่างรูปภาพในตารางหากจำเป็น

• ครอบตัดอัตโนมัติ: เลือกขนาดเพื่อตัด/ครอบรูปภาพให้ตรงกับเค้าโครงหน้า ฟีเจอร์นี้มีประโยชน์เมื่อออกแบบ เค้าโครง มือถือ

• ซูมเมื่อคลิก: เปิดใช้งานการซูมรูปภาพเมื่อผู้เยี่ยมชมคลิกที่รูปภาพ

เค้าโครงหน้าเพจและการแสดงข้อมูลสินค้า

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

Tip

คุณสามารถเลือกความกว้างที่แตกต่างกันสำหรับ หน้าร้านค้า

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

ปุ่ม

ปรับแต่งปุ่มที่แสดงบนหน้าสินค้าโดยใช้ตัวเลือกต่อไปนี้:

• สไตล์การซื้อ: กำหนดเค้าโครงของปุ่ม

• ตัวเลือกการซื้อ: เปิด/ปิดใช้งานปุ่ม ซื้อเลย และ/หรือตัวเลือก จำนวน

• การกระทำ: เปิดใช้งานฟีเจอร์ รายการสิ่งที่อยากได้ และ การเปรียบเทียบสินค้า

คุณลักษณะ

เลือกวิธีการแสดง คุณลักษณะ สินค้าในส่วน ข้อกำหนด ของหน้าสินค้า:

• ไม่มี: ไม่แสดงรายละเอียด

• ท้ายหน้า: แสดงรายละเอียดที่ท้ายหน้า

• ในอะคอร์เดียน: แสดงตารางพับเก็บได้โดยตรงใต้ตัวเลือกการสั่งซื้อ

Note

ส่วนข้อกำหนดจะแสดงเฉพาะเมื่อเปิดใช้งาน รูปแบบสินค้า และมีการกำหนดคุณลักษณะอย่างน้อยหนึ่งรายการสำหรับสินค้า

Tip

• สร้าง:ref:`หมวดหมู่คุณลักษณะ <ecommerce/categories_variants/attribute-categories>`เพื่อจัดโครงสร้างส่วนนี้ให้ดีขึ้น

• ใช้:guilabel:รูปภาพ :ref:`ประเภทการแสดงผลคุณลักษณะ <products/variants/attributes>`เพื่อแสดงรูปภาพของตัวเลือกสินค้าบนหน้าสินค้า

ตัวเลือกการจัดระเบียบหน้าและฟีเจอร์เพิ่มเติม

เปิด/ปิดตัวเลือกต่อไปนี้เพื่อเปิดหรือปิดใช้งานฟีเจอร์ในทุกหน้าสินค้า:

• เส้นแบ่ง: จัดระเบียบหน้าและปรับปรุงความชัดเจนทางภาพ

• การระบุภาษี: ระบุว่าราคา:ref:รวมหรือไม่รวม VAT <ecommerce/prices/taxes>

• แท็ก: แสดงแท็กที่สร้างใน:ref:`แบ็กเอนด์ <ecommerce/catalog/filters>`บนหน้าสินค้าและให้ลูกค้าสามารถกรองสินค้าตามแท็กเหล่านั้นได้

• ข้อกำหนดและเงื่อนไข: แสดงลิงก์ไปยัง:doc:`ข้อกำหนดและเงื่อนไข </applications/finance/accounting/customer_invoices/terms_conditions>`ของคุณ

• รีวิว: อนุญาตให้:doc:ผู้ใช้พอร์ทัลที่เข้าสู่ระบบ </applications/general/users/user_portals>`ส่งรีวิวสินค้าได้ ในการเพิ่มรีวิว ผู้ใช้ต้องไปที่ส่วน:guilabel:`รีวิวลูกค้า`ที่ด้านล่างของหน้าและคลิกไอคอน :icon:`fa-plus (บวก) จากนั้นสามารถเลือกคะแนนโดยใช้ไอคอน (ดาว) และแสดงความคิดเห็น คะแนน (ดาว) จะแสดงไว้ใต้ชื่อสินค้าโดยตรง

• แถบค้นหา: แสดงแถบค้นหาที่สามารถแสดงหรือซ่อนได้อย่างอิสระจาก:ref:หน้าร้านค้า <ecommerce/catalog/toolbar>

• ริบบิ้น (หรือป้าย): เน้นสินค้าเฉพาะ

Tip

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

• คลิกและรับ: แสดงสถานที่รับคำสั่งซื้อและความพร้อมจัดส่งบนหน้าสินค้า และให้ลูกค้าเลือกจุดรับสินค้าที่ต้องการ

• คำอธิบาย: แสดงคำอธิบายสินค้าเฉพาะอีคอมเมิร์ซไว้ใต้ชื่อสินค้าโดยตรง

• บรรจุภัณฑ์: เสนอบรรจุภัณฑ์ประเภทต่างๆ

• เอกสาร: เพิ่มเอกสารที่เกี่ยวข้อง เช่น คู่มือผู้ใช้หรือเอกสารสนับสนุนอื่นๆ

• สินค้าทางเลือก: แนะนำสินค้าที่คล้ายกันและปรับแต่งส่วน

• แสดงจำนวนที่มีอยู่: แสดงจำนวนสินค้าที่มีอยู่เมื่อจำนวนต่ำกว่าเกณฑ์ที่กำหนด

• ข้อความสินค้าหมด: แสดงข้อความที่กำหนดเองสำหรับสินค้าที่หมดจากคลัง

• รับการแจ้งเตือนเมื่อมีสินค้ากลับเข้ามา: ลูกค้าสามารถใส่ที่อยู่อีเมลเพื่อรับการแจ้งเตือนเมื่อสินค้ากลับเข้ามาในคลัง

• ฟิลด์เพิ่มเติมสำหรับหน้าสินค้า: เพื่อเปิดใช้งานฟิลด์เพิ่มเติมเฉพาะสำหรับหน้าสินค้า ให้เปิดใช้งาน:doc:โหมดนักพัฒนา </applications/general/developer_mode> จากนั้นไปที่ เว็บไซต์ ‣ การกำหนดค่า ‣ เว็บไซต์ เลือกเว็บไซต์ที่เกี่ยวข้อง ไปที่แท็บ ฟิลด์เพิ่มเติมสำหรับหน้าสินค้า และภายใต้ ฟิลด์ ให้คลิก เพิ่มบรรทัด เพื่อเพิ่มฟิลด์เพิ่มเติมได้มากเท่าที่ต้องการ เช่น หมายเลขบาร์โค้ดของสินค้า

บล็อกข้อมูลสำเร็จรูป

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

• ลงในพื้นที่สีน้ำเงินที่ด้านบนหรือด้านล่างของหน้าสินค้าเพื่อให้ใช้งานได้ใน*ทุก*หน้าสินค้า หรือ

• ลงในพื้นที่บล็อกการสร้างสีน้ำเงินด้านล่างชื่อสินค้าหรือด้านล่างตัวเลือกการสั่งซื้อเพื่อแสดงเฉพาะสินค้าปัจจุบันเท่านั้น

Note

บล็อกการสร้างเหล่านี้จะไม่ปรากฏบน:ref:หน้าร้านค้า <ecommerce/catalog/customize-layout>

ดูเพิ่มเติม

การออกแบบเว็บ