วิดเจ็ตตัวเลื่อนสินค้า | เครื่องมือสร้างร้านค้า

e-commerce_social_commerce__1_.png

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

⚠️ ก่อนที่คุณจะเริ่มต้น:

  • ปัจจุบันเครื่องมือสร้างร้านค้ารองรับเฉพาะธีม Ultra Chic, Kingsman, Varm และ Phillia
  • หลังจากสร้างร้านค้าโดยใช้เครื่องมือสร้างร้านค้า หน้าเพจยังคงสามารถแสดงได้แม้ว่าคุณจะเปลี่ยนไปใช้ธีมอื่น แต่ไม่สามารถแก้ไขได้และเลย์เอาต์อาจมีความยุ่งเหยิง โปรดทราบสิ่งนี้ก่อนที่จะเผยแพร่หน้าเพจ


1. การเพิ่มวิดเจ็ตตัวเลื่อนสินค้า

ขั้นตอนที่ 1

ไปที่หน้าผู้ดูแลระบบ SHOPLINE > [การออกแบบร้านค้าออนไลน์] > [หน้าเพจ] และคลิก [หน้าเพจแบบขั้นสูง] คลิกปุ่มแก้ไขเพื่อเปิดหน้าการตั้งค่าหน้าเพจขึ้นมา

1.png

 

ขั้นตอนที่ 2

คลิกปุ่มวิดเจ็ต

1.png

ขั้นตอนที่ 3

เลือกวิดเจ็ตตัวเลื่อนสินค้า

1.png

 

ขั้นตอนที่ 4

คลิกปุ่ม + สินค้า เพื่อสร้างรายการสินค้าที่กำหนดเอง หรือคลิก + เพิ่มหมวดหมู่ เพื่อเลือกรายการสินค้าที่มีอยู่ 

TH_update1.png

1. สร้างรายการสินค้าที่กำหนดเอง

คลิก + สินค้า เพื่อเลือกสินค้า คุณสามารถเลือกได้สูงสุดถึง 25 รายการสินค้าเพื่อสร้างรายการสินค้าที่กำหนดเอง เมื่อเลือกแล้วให้คลิก ถัดไป เพื่อดำเนินการต่อ

TH_update2.png

 

คุณสามารถสลับอันดับการจัดเรียงรายการสินค้าได้ด้วยการลากและวาง คลิก ยืนยัน เพื่อดำเนินการต่อ

TH_update3.png

 

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

*หมายเหตุ: ปุ่ม "แสดงเพิ่มเติม" ไม่รองรับสำหรับรายการสินค้าที่กำหนดเอง การเปิดใช้งานปุ่ม "แสดงปุ่ม" จะไม่สามารถแสดงปุ่มด้วยเช่นกัน

Screen Shot 2023-07-27 at 12.36.03 PM.png

 

2. รายการสินค้าที่มีอยู่

คลิก + เพิ่มหมวดหมู่ เพื่อเลือกหมวดหมู่สินค้า คลิก ยืนยัน เพื่อดำเนินการต่อ

TH_update5.png

 

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

Screen Shot 2023-07-27 at 12.52.46 PM.png

 

ขั้นตอนที่ 5

แก้ไขชื่อตัวเลื่อนสินค้า

*หมายเหตุ:  คุณสามารถเว้นว่างช่องนี้ได้ หน้าเพจจะไม่แสดงชื่อ

TH_update7.png

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

TH_update8.png

คุณสามารถกำหนดการจัดเรียงข้อความของชื่อได้ (ซ้าย/กลาง/ขวา)

TH_update9.png

 

ขั้นตอนที่ 6

แก้ไขการตั้งค่าที่เกี่ยวข้องกับตัวเลื่อน

A. ปุ่มแสดง

หากเปิด "ปุ่มแสดง" เปิดอยู่ ปุ่ม "แสดงเพิ่มเติม" จะปรากฏใต้ตัวเลื่อนสินค้า ลูกค้าสามารถคลิก แสดงเพิ่มเติม เพื่อเข้าสู่หน้าหมวดหมู่สินค้าและเรียกดูสินค้าได้

6.png

B. สัดส่วนของรูปภาพสินค้า

คุณสามารถกำหนดสัดส่วนของรูปภาพสินค้า

7.png

 

C. สินค้าต่อแถว

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

*หมายเหตุ: ลูกค้าสามารถเลือกดูสินค้าได้โดยการปัดไปทางซ้ายและขวาบนตัวเลื่อนสินค้า

8.png

D. ระยะขอบ

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

TH_update10.png

 

E. สไตล์ (การเลือกดูสินค้า)

คุณสามารถเลือกได้ระหว่าง “ปุ่ม และ จุด” สำหรับสไตล์การเลื่อนดู

10.png

 

a. ปุ่ม

ลูกค้าสามารถคลิกทางลูกศรซ้ายและขวาเพื่อเปลี่ยนสินค้า

Screen Shot 2023-07-27 at 12.55.50 PM.png

b. จุด

ลูกค้าสามารถคลิกจุดที่ด้านล่างของตัวเลื่อนสินค้าเพื่อเลื่อนสินค้า

Screen Shot 2023-07-27 at 12.57.21 PM.png

ขั้นตอนที่ 7

เลือกว่าจะแสดงสินค้าที่ถูกซ่อนหรือไม่ เมื่อเปิดเพื่อแสดง ลูกค้าจะสามารถเห็นสินค้าที่ถูกซ่อนบนหน้าร้านค้า

*หมายเหตุ: สินค้าที่ซ่อนอยู่ที่ไม่ได้เผยแพร่จะไม่แสดง หากคุณต้องการเรียนรู้วิธีตั้งค่าสินค้าที่ซ่อนอยู่ โปรดดูที่ การซ่อนสินค้า

11.png

 

ขั้นตอนที่ 8

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

Screen Shot 2023-07-27 at 12.58.52 PM.png

 

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

Screen Shot 2023-07-27 at 12.59.30 PM.png

 

ขั้นตอนที่ 9

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

Screen Shot 2023-07-27 at 12.59.30 PM.png

อ่านเพิ่มเติม

 

 

 

 

 

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

ข้อคิดเห็น