ส่วน ก่อนและหลัง จะวางรูปภาพสองรูปซ้อนกันโดยมีเส้นแบ่ง ผู้ซื้อลากเส้นแบ่งเพื่อดูรูปหนึ่งมากขึ้นหรือน้อยลง ใช้แสดงผลลัพธ์ (ก่อนและหลัง) สองสี หรือผิวสัมผัสสองแบบของสินค้า
เพิ่มส่วน
- เปิดตัวสร้างร้านค้า แล้วไปที่หน้าที่ต้องการ ส่วนนี้ใช้ได้ในหน้าแรก หน้าสินค้า แลนดิ้งเพจ หน้าคอลเลกชัน และหน้ารวมคอลเลกชัน สูงสุด 3 ส่วนต่อหน้า
- ในแท็บ ส่วนต่าง ๆ คลิก เพิ่มส่วนใหม่ แล้วเลือก ก่อนและหลัง จากกลุ่ม เนื้อหา
- คลิกบล็อก ก่อนและหลัง ที่อยู่ภายใน แล้วเลือกรูปภาพสองรูป จากนั้นคลิก เผยแพร่
บล็อกก่อนและหลัง
บล็อกนี้เก็บรูปภาพทั้งสองรูป มีอยู่ในส่วนเสมอและลบไม่ได้
- รูปก่อน และ รูปหลัง: รูปภาพสองรูป ใช้รูปที่ถ่ายจากมุมเดียวกันเพื่อให้ตรงกันพอดี
- ป้ายก่อน และ ป้ายหลัง: ป้ายสั้น ๆ ที่มุมของแต่ละรูป เช่น "ก่อน" และ "หลัง" หรือ "ดำ" และ "ขาว" เว้นว่างไว้เพื่อซ่อนป้าย
- ทิศทาง: แนวนอน ใช้เส้นแบ่งที่ผู้ซื้อลากไปทางซ้ายและขวา แนวตั้ง ใช้เส้นแบ่งที่ผู้ซื้อลากขึ้นและลง
- อัตราส่วน: รูปทรงของกรอบ อัตโนมัติ จะยึดตามรูปก่อน หรือเลือก แนวตั้งสี่เหลี่ยมจัตุรัส หรือ แนวนอน รูปทั้งสองจะถูกครอปให้พอดีกับกรอบเดียวกัน
- ตำแหน่งเส้นแบ่ง: จุดเริ่มต้นของเส้นแบ่ง ตั้งแต่ 5% ถึง 95% ที่ 50% ผู้ซื้อจะเห็นรูปละครึ่ง
- แสดงคำแนะนำเมื่อเลื่อนมาถึง: เส้นแบ่งจะขยับเองเล็กน้อย เพื่อให้ผู้ซื้อรู้ว่าลากได้
- ตามเมาส์บนเดสก์ท็อป: บนคอมพิวเตอร์ เส้นแบ่งจะเลื่อนตามเมาส์โดยไม่ต้องคลิก บนโทรศัพท์ผู้ซื้อต้องลากเสมอ
- ใช้ชุดสีของส่วนหลัก: เส้นแบ่ง ที่จับ และป้ายจะใช้สีของส่วน ปิดตัวเลือกนี้เพื่อเลือก ชุดสี อื่น
การตั้งค่าส่วนและหัวข้อ
เพิ่มบล็อก ข้อความ ได้สูงสุด 2 บล็อก เส้นคั่น 1 บล็อก และ กลุ่ม 1 บล็อก สำหรับหัวข้อและข้อความสั้น ๆ
- ทิศทาง: แนวตั้ง จะวางหัวข้อไว้เหนือรูปภาพ แนวนอน จะวางไว้ข้างรูปภาพ
- เรียงแนวตั้งบนมือถือ: เปิดไว้เป็นค่าเริ่มต้น เพื่อให้รูปภาพกว้างเต็มหน้าจอโทรศัพท์
- ตำแหน่ง และ การจัดแนวความกว้างของส่วนชุดสีระยะขอบใน และแท็บ CSS ที่กำหนดเอง
ในหน้าสินค้า
บล็อกก่อนและหลังแบบเดียวกันนี้ยังใส่ไว้ในส่วนข้อมูลสินค้าและส่วนข้อมูลแลนดิ้งเพจ รวมถึงในแถบย่อ/ขยายได้ด้วย เพื่อให้การเปรียบเทียบอยู่ข้างปุ่มซื้อ ดู จะเพิ่มแถบย่อ/ขยาย วันจัดส่ง ตารางไซซ์ ป้าย หรือรูปก่อนและหลังในหน้าสินค้าได้อย่างไร
ควรรู้
- บนร้านค้าจริง การเปรียบเทียบจะแสดงเมื่อเลือกรูปครบทั้งสองรูปแล้วเท่านั้น ก่อนหน้านั้นตัวสร้างร้านค้าจะแสดงรูปตัวอย่าง
- ผู้ซื้อเลื่อนเส้นแบ่งด้วยแป้นพิมพ์ได้ด้วย
- ผู้ซื้อที่เปิดโหมดลดการเคลื่อนไหวบนอุปกรณ์จะไม่เห็นการขยับของคำแนะนำ
- รูปดูถูกตัด? เลือกอัตราส่วนที่ใกล้เคียงกับรูปของคุณที่สุด หรือใช้รูปที่มีรูปทรงเดียวกัน
- ใช้เฉพาะรูปจริงของผลลัพธ์จริงเท่านั้น