เมื่อใช้ตัวแก้ไขหน้าเพจใหม่นี้เพื่อเพิ่มหรือแก้ไขหน้าเพจแบบขั้นสูง คุณสามารถใช้วิดเจ็ต “ตัวเลื่อน” เพื่อเพิ่มรูปภาพและวิดีโอลงหน้าร้านค้า และทำให้ร้านค้าออนไลน์ของคุณสมบูรณ์แบบมากยิ่งขึ้น
⚠️ ก่อนที่คุณจะเริ่มต้น:
- ปัจจุบันเครื่องมือสร้างหน้าร้านค้ารองรับเฉพาะธีม Ultra Chic, Kingsman, Varm และ Phillia
- หลังจากสร้างร้านค้าโดยใช้เครื่องมือสร้างร้านค้า หน้าเพจยังคงสามารถแสดงได้แม้ว่าคุณจะเปลี่ยนไปใช้ธีมอื่น แต่ไม่สามารถแก้ไขได้และเลย์เอาต์อาจมีความยุ่งเหยิง โปรดทราบสิ่งนี้ก่อนที่จะเผยแพร่หน้าเพจ
1. เพิ่มวิดเจ็ตตัวเลื่อน
ขั้นตอนที่ 1
ไปที่หน้าผู้ดูแลระบบ SHOPLINE > [การออกแบบร้านค้าออนไลน์] > [หน้าเพจ] และคลิก [หน้าเพจแบบขั้นสูง] คลิกปุ่มแก้ไขเพื่อเปิดหน้าการตั้งค่าหน้าเพจขึ้นมา
ขั้นตอนที่ 2
คลิกปุ่มวิดเจ็ต
ขั้นตอนที่ 3
เลือกวิดเจ็ต “ตัวเลื่อน (สไลเดอร์)”
ขั้นตอนที่ 4
ชุดของตัวเลื่อนหนึ่งชุดจะกำหนดมาให้โดยค่าเริ่มต้น คลิกปุ่มรูปภาพและวิดีโอเพื่อแก้ไขเนื้อหา
คลิกที่ไอคอนด้านซ้ายมือ เพื่อลากและเรียงลำดับรูปภาพหรือวิดีโอ
ขั้นตอนที่ 5
คลิกที่วิดเจ็ตรูปภาพเพื่ออัปโหลดรูปภาพแยกสำหรับอินเทอร์เฟซเดสก์ท็อปและมือถือ
1. อัปโหลดทีละหลายรายการ
ระบบจะจัดเรียงตามวันที่แก้ไขไฟล์รูปภาพ จากบนลงล่าง จากรูปที่แก้ไขล่าสุดไปจนถึงรูปที่แก้ไขก่อนหน้า
2.อัปโหลดทีละรายการ
คุณยังสามารถอัปโหลดรุปภาพทีละรายการได้และรูปตัวอย่างขนาดย่อจะถูกจัดเรียงในรูปแบบเดียวกับการอัปโหลดทีละหลายรายการ
*หมายเหตุ:
- ขอแนะนำให้ความกว้างของรูปภาพเวอร์ชันเดสก์ท็อปมากกว่า 2,000 พิกเซล และความกว้างของรูปภาพเวอร์ชันมือถือควรมากกว่า 1080 พิกเซล
- หากการอัปโหลดล้มเหลวเนื่องจากรูปแบบไฟล์, ปริมาณ และอื่นๆ การแจ้งเตือนดังต่อไปนี้อาจปรากฎขึ้นมา
- การอัปโหลดล้มเหลว
ข้อความแสดงข้อผิดพลาด: การอัปโหลดล้มเหลว (ไม่สามารถแสดงรูปตัวอย่างขนาดย่อได้) - การอัปโหลดล้มเหลวบางส่วน
ข้อความแสดงข้อผิดพลาด: การอัปโหลดล้มเหลวบางรูปภาพ (ในขณะที่แสดงรูปตัวอย่างขนาดย่อ ระบบจะข้ามไฟล์ที่เกิดข้อผิดพลาดโดยอัตโนมัติ)
- การอัปโหลดล้มเหลว
คลิกที่เมนู “ภาษา” และรายการภาษาที่รองรับจะปรากฏขึ้นมา คุณสามารถอัปโหลดรูปภาพสำหรับแต่ละอินเทอร์เฟซภาษาแยกกันได้
ขั้นตอนที่ 6
คลิกวิดเจ็ตรูปภาพและวิดีโอเพื่อแก้ไขรูปภาพและวิดีโอและการตั้งค่าที่เกี่ยวข้อง
1. รูปภาพ
- การครอบรูปภาพ: เลือกส่วนของรูปภาพที่ต้องการครอปและแสดง (ซ้ายบน/บนกลาง/ขวาบน/ซ้ายกลาง/ตรงกลาง/ขวากลาง/ล่างกลาง/ขวาล่าง)
- ข้อความ Alt รูปภาพ: กรอกข้อความแสดงแทนรูปภาพ เพื่ออธิบายเนื้อหาของภาพซึ่งช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาของภาพได้ดีขึ้น หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคำอธิบาย ALT ของรูปภาพ โปรดดูบทความนี้
- หน้ากาก: เลือกระดับหน้ากากของรูปภาพ
- ชื่อ: กรอกชื่อสินค้า สามารถปรับแต่งสไตล์เหล่านี้ได้ ลำดับการแสดงของการตั้งค่าสไตล์คือ: การตั้งค่าสไตล์วิดเจ็ต > การตั้งค่าร้านค้า
- แท็กหัวข้อ: มีทั้งหมด 6 ตัวเลือก ตั้งแต่แท็ก H1 - H6 ค่าเริ่มต้นของระบบจะเป็นแท็ก H3
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- เนื้อหา: กรอกคำอธิบายของสินค้า คุณสามารปรับแต่งการตั้งค่าของสไตล์เหล่านี้ได้
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- รายการ: สามารถเพิ่มสัญลักษณ์แสดงรายการหัวข้อย่อย (bulleted lists) หรือเรียงลำดับรายการได้
- แก้ไขแบบเต็มหน้าจอ: คุณสามารถเปิดโหมดแก้ไขแบบเต็มหน้าจอได้ เพื่อให้การแก้ไขต่างๆ สะดวกมากยิ่งขึ้น
- แสดงปุ่ม: คุณสามารถเลือกได้ว่าจะให้ลูกค้าเห็นปุ่มนี้ที่หน้าร้านค้าหรือไม่
- ปุ่มข้อความ: คุณสามารถปรับข้อความของปุ่มเพื่อให้ลูกค้าเห็นได้
- ลิงก์ไปที่: เพิ่มลิงก์ URL ให้กับรูปภาพ ซึ่งเมื่อลูกค้าคลิกที่รูปภาพ พวกเขาจะสามารถเข้าไปยังหน้าเพจใหม่ได้โดยตรง
คุณสามารถเลือกสองวิธีในการเปิดลิงก์ URL:- หน้าต่างปัจจุบัน: เปิดหน้าเพจโดยตรงจากหน้าต่างปัจจุบัน
- หน้าต่างใหม่: เปิดหน้าเพจที่หน้าต่างใหม่
2. วิดีโอ
- URL วิดีโอ: เนื่องจากวิดีโอจะถูกปิดเสียงโดยอัตโนมัติเมื่อเล่น โปรดป้อน URL ของ Youtube หรือ Vimeo
- หน้ากาก: เลือกระดับหน้ากากของรูปภาพ
- ชื่อ: กรอกชื่อสินค้า สามารถปรับแต่งสไตล์เหล่านี้ได้ ลำดับการแสดงของการตั้งค่าสไตล์คือ: การตั้งค่าสไตล์วิดเจ็ต > การตั้งค่าร้านค้า
- แท็กหัวข้อ: มีทั้งหมด 6 ตัวเลือก ตั้งแต่แท็ก H1 - H6 ค่าเริ่มต้นของระบบจะเป็นแท็ก H3
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- เนื้อหา: กรอกคำอธิบายของสินค้า คุณสามารปรับแต่งการตั้งค่าของสไตล์เหล่านี้ได้
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- รายการ: สามารถเพิ่มสัญลักษณ์แสดงรายการหัวข้อย่อย (bulleted lists) หรือเรียงลำดับรายการได้
- แก้ไขแบบเต็มหน้าจอ: คุณสามารถเปิดโหมดแก้ไขแบบเต็มหน้าจอได้ เพื่อให้การแก้ไขต่างๆ สะดวกมากยิ่งขึ้น
- แสดงปุ่ม: คุณสามารถเลือกได้ว่าจะให้ลูกค้าเห็นปุ่มนี้ที่หน้าร้านค้าหรือไม่
- ปุ่มข้อความ: คุณสามารถปรับข้อความของปุ่มเพื่อให้ลูกค้าเห็นได้
- ลิงก์ไปที่: เพิ่มลิงก์ URL ให้กับวิดีโอ ซึ่งเมื่อลูกค้าคลิก พวกเขาจะสามารถเข้าไปยังหน้าเพจใหม่ได้โดยตรงคุณสามารถเลือกสองวิธีในการเปิดลิงก์ URL:
- หน้าต่างปัจจุบัน: เปิดหน้าเพจโดยตรงจากหน้าต่างปัจจุบัน
- หน้าต่างใหม่: เปิดหน้าเพจที่หน้าต่างใหม่
*หมายเหตุ:
- ลำดับการแสดงการตั้งค่าสไตล์คือ: การตั้งค่าสไตล์วิดเจ็ต > การตั้งค่าร้านค้า
- หากได้ปรับแก้เค้าโครงของหน้าเพจด้วยการใช้ custom liquid คุณจำเป็นต้องแก้ไขกฏสำหรับ custome liquid หลังจากที่ปรับเปลี่ยนการตั้งค่าสไตล์ของวิดเจ็ต
- ในการปรับขนาดตัวหนังสือของชื่อและเนื้อหาสไลเดอร์ คุณสามารถไปที่ตัวเลือก "ขนาดตัวหนังสือ" ที่้านล่างซ้ายของแผง สำหรับรายละเอียดเพิ่มเติม กรุณาไปยังขั้นตอนที่ 7: I. ขนาดตัวหนังสือ ด้านล่าง
- ปัจจุบัน Shopper App ยังไม่รองรับการปรับแต่งสีข้อความและขนาดตัวอักษรของวิดเจ็ต
ขั้นตอนที่ 7
รองรับการตั้งค่าอื่นๆ
A. เต็มจอ
โหมดเต็มจอไม่ได้เปิดอยู่:
โหมดเต็มจอเปิดอยู่:
B. ปรับระยะขอบตามขนาดมีเดีย
ปรับระยะขอบของรูปภาพและหน้าเพจ
หากฟีเจอร์ "ปรับระยะขอบตามขนาดมีเดีย (Adapt height to the Media Size)" ปิดใช้งานอยู่:
ความสูงของสไลดเดอร์ (ตัวเลื่อน) จะขึ้นอยู่กับความกว้างของรูปภาพ
- สัดส่วนความกว้าง/ความสูง ของเวอร์ชันมือถือคือ 2:1
- สัดส่วนความกว้าง/ความสูง ของเวอร์ชันมือถือคือ 3:4
หากฟีเจอร์ "ปรับระยะขอบตามขนาดมีเดีย (Adapt height to the Media Size)" เปิดใช้งานอยู่:
ความสูงของขอบวิดเจ็ตสไลเดอร์จะขึ้นอยู่กับความสูงของภาพแรก (ตามสัดส่วนของภาพ)
C. สัดส่วนรูปภาพ
คุณสามารถกำหนดสัดส่วนของรูปภาพสำหรับมุมองเดสก์ท็อปและมือถือแยกกันได้ (อัตราส่วน 3:4, 2:1, 1:1)
- สัดส่วนภาพที่แนะนำสำหรับเวอร์ชันเดสก์ท็อป
- หากฟีเจอร์ "ปรับระยะขอบตามขนาดมีเดีย (Adapt height to the Media Size)" ปิดใช้งานอยู่ สัดส่วนของรูปภาพจะถูกตั้งค่าเป็นอัตราส่วน 2:1 ซึ่งเป็นค่าตั้งต้นของระบบ (2000 x 1000 พิกเซล)
- หากฟีเจอร์ "ปรับระยะขอบตามขนาดมีเดีย (Adapt height to the Media Size)" เปิดใช้งานอยู่ ระบบจะแสดงสัดส่วนต้นฉบับของรูปภาพ โดยแนะนำให้มีความกว้างอย่างน้อย 2000 พิกเซล
- สัดส่วนภาพที่แนะนำสำหรับเวอร์ชันมือถือ
- สี่เหลี่ยมผืนผ้า (อัตราส่วน 2:1 ) - ขนาดภาพเดี่ยวที่แนะนำ: 1080 x 540 พิกเซล
- สี่เหลี่ยมผืนผ้า (อัตราส่วน 3:4 ) - ขนาดภาพเดี่ยวที่แนะนำ: 810 x 1080 พิกเซล
- สีเหลี่ยมจัตุรัส (อัตราส่วน 1:1 ) - ขนาดภาพเดี่ยวที่แนะนำ: 1080 x 1080 พิกเซล
D. ระยะขอบ
ปรับระยะขอบระหว่างรูปภาพและหน้าเพจได้
E. ระยะเวลา
คุณสามารถเลือกระยะเวลาตัวเลื่อนได้ระหว่าง 1-10 วินาที
F. สไตล์ (การดูสินค้า)
คุณสามารถเลือกได้ระหว่าง “ปุ่ม, จุด และรูปขนาดย่อ” สำหรับสไตล์การเลื่อนดู
G. ตำแหน่งข้อความ (เดสก์ท็อป)
คุณสามารถเลือกว่าต้องการให้ข้อความบนรูปภาพ/วิดีโอสำหรับเวอร์ชันเดสก์ท็อปอยู่ตำแหน่งไหน เลือกว่าต้องการวางไว้ "ด้านบนซ้าย, ด้านบนตรงกลาง, ด้านบนขวา, ตรงกลางซ้าย, กึ่งกลาง, ตรงกลางขวา, ด้านล่างซ้าย, ด้านล่างตรงกลาง, ด้านล่างขวา"
H. ตำแหน่งข้อความ (มือถือ)
คุณสามารถเลือกว่าต้องการให้ข้อความบนรูปภาพ/วิดีโอสำหรับเวอร์ชันมือถืออยู่ตำแหน่งไหน เลือกว่าต้องการวางไว้ "ใต้ภาพ หรือ ทับซ้อนกันบนสื่อ"
I. ขนาดตัวหนังสือ
คุณสามารถเลือก “ค่าเริ่มต้นการตั้งค่าร้านค้า, ชื่อขนาดใหญ่และเนื้อหาขนาดเล็ก, ชื่อขนาดใหญ่พิเศษและเนื้อหา” ได้ตามความต้องการของคุณ
ขั้นตอนที่ 8
ระหว่างขั้นตอนการตั้งค่า คุณสามารถคลิกปุ่มบันทึกด้านล่างเพื่อดูตัวอย่างวิดเจ็ตตัวเลื่อนที่เพิ่มเข้าไปใหม่ได้
*หมายเหตุ: คุณสามารถเลือกว่าจะดูตัวอย่างที่หน้าเวอร์ชันเดสก์ท็อปหรือมือถือได้
หรือคลิกปุ่มดูตัวอย่างที่ด้านบนขวามือเพื่อดูตัวอย่างหน้าร้านค้า
ขั้นตอนที่ 9
หลังจากเสร็จสิ้นการตั้งค่า คลิกปุ่มเผยแพร่ด้านบนขวามือ เพื่อที่ลูกค้าสามารถเห็นเนื้อหาใหม่ทั้งหมดที่หน้าร้านค้า
อ่านเพิ่มเติม
- แถบการประกาศ/การตั้งค่าส่วนหัว | เครื่องมือสร้างร้านค้า
- วิดเจ็ตข้อความ | เครื่องมือสร้างร้านค้า
- วิดเจ็ตคลังรูปภาพ | เครื่องมือสร้างร้านค้า
- วิดเจ็ตรูปภาพพร้อมข้อความ | เครื่องมือสร้างร้านค้า
- วิดเจ็ตรายการสินค้า | เครื่องมือสร้างร้านค้า
- วิดเจ็ตตัวเลื่อนสินค้า | เครื่องมือสร้างร้านค้า
- การตั้งค่า SEO | เครื่องมือสร้างร้านค้า
- การตั้งค่าส่วนท้าย | เครื่องมือสร้างร้านค้า
ข้อคิดเห็น