เมื่อใช้ตัวแก้ไขหน้าเพจใหม่นี้เพื่อเพิ่ม/แก้ไขหน้าเพจแบบขั้นสูง คุณสามารถใช้วิดเจ็ต “รูปภาพพร้อมข้อความ” เพื่อทำให้ร้านค้าออนไลน์ของคุณสมบูรณ์แบบมากยิ่งขึ้น
⚠️ ก่อนที่คุณจะเริ่มต้น:
- ปัจจุบันเครื่องมือสร้างหน้าร้านค้ารองรับเฉพาะธีม Ultra Chic, Kingsman, Varm และ Phillia
- หลังจากสร้างร้านค้าโดยใช้เครื่องมือสร้างร้านค้า หน้าเพจยังคงสามารถแสดงได้แม้ว่าคุณจะเปลี่ยนไปใช้ธีมอื่น แต่ไม่สามารถแก้ไขได้และเลย์เอาต์อาจมีความยุ่งเหยิง โปรดทราบสิ่งนี้ก่อนที่จะเผยแพร่หน้าเพจ
1. เพิ่มวิดเจ็ต “รูปภาพพร้อมข้อความ”
ขั้นตอนที่ 1
ไปที่หน้าผู้ดูแลระบบ SHOPLINE > [การออกแบบร้านค้าออนไลน์] > [หน้าเพจ] และคลิก [หน้าเพจแบบขั้นสูง] คลิกปุ่มแก้ไขเพื่อเปิดหน้าการตั้งค่าหน้าเพจขึ้นมา
ขั้นตอนที่ 2
คลิกที่ปุ่มวิดเจ็ต
ขั้นตอนที่ 3
เลือกวิดเจ็ต “รูปภาพพร้อมข้อความ”
ขั้นตอนที่ 4
ชุดวิดเจ็ตรูปภาพพร้อมข้อความถูกกำหนดโดยค่าเริ่มต้น คลิกวิดเจ็ตรูปภาพและข้อความเพื่อแก้ไขเนื้อหา
คลิกที่ไอคอนด้านซ้ายเพื่อลากและเรียงลำดับรูปภาพหรือข้อความ
ขั้นตอนที่ 5
คลิกที่วิดเจ็ตรูปภาพเพื่ออัปโหลดรูปภาพแยกสำหรับอินเทอร์เฟซเดสก์ท็อปและมือถือ
*หมายเหตุ: ขอแนะนำให้ความกว้างของรูปภาพเวอร์ชันเดสก์ท็อปมากกว่า 2,000 พิกเซล และความกว้างของรูปภาพเวอร์ชันมือถือควรมากกว่า 1080 พิกเซล
คลิกที่เมนู “ภาษา” และรายการภาษาที่รองรับจะปรากฏขึ้นมา คุณสามารถอัปโหลดรูปภาพสำหรับแต่ละอินเทอร์เฟซภาษาแยกกันได้
ขั้นตอนที่ 6
คลิกวิดเจ็ตรูปภาพ/ข้อความเพื่อแก้ไขรูปภาพและการตั้งค่าข้อความที่เกี่ยวข้อง
1. รูปภาพ
- การครอบรูปภาพ: เลือกส่วนของรูปภาพที่ต้องการครอปและแสดง (ซ้ายบน/บนกลาง/ขวาบน/ซ้ายกลาง/ตรงกลาง/ขวากลาง/ล่างกลาง/ขวาล่าง)
- ข้อความ Alt รูปภาพ: กรอกข้อความแสดงแทนรูปภาพ เพื่ออธิบายเนื้อหาของภาพซึ่งช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาของภาพได้ดีขึ้น หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคำอธิบาย ALT ของรูปภาพ โปรดดูบทความนี้
- ชื่อ: กรอกชื่อรูปภาพ
- ลิงก์ URL: เพิ่มลิงก์ URL ให้กับรูปภาพ ซึ่งเมื่อลูกค้าคลิกที่รูปภาพ พวกเขาจะสามารถเข้าไปยังหน้าเพจใหม่ได้โดยตรง
คุณสามารถเลือกสองวิธีในการเปิดลิงก์ URL:
-
- หน้าต่างใหม่: เปิดหน้าเพจที่หน้าต่างใหม่
- หน้าต่างปัจจุบัน: เปิดหน้าเพจโดยตรงจากหน้าต่างปัจจุบัน
2. ข้อความ
- ชื่อ: กรอกชื่อสินค้า สามารถปรับแต่งสไตล์เหล่านี้ได้ ลำดับการแสดงของการตั้งค่าสไตล์คือ: การตั้งค่าสไตล์วิดเจ็ต > การตั้งค่าร้านค้า
- แท็กหัวข้อ: มีทั้งหมด 6 ตัวเลือก ตั้งแต่แท็ก H1 - H6 ค่าเริ่มต้นของระบบจะเป็นแท็ก H3
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- ขนาดตัวอักษร: สามารถเลือกขนาด 16/20/24/28/32 ได้ ขนาดจริงของตัวอักษรจะปรับตามขนาดตัวอักษรที่ตั้งค่าไว้ในการตั้งค่าร้านค้า
- ชื่อรอง: กรอกชื่อรองของสินค้า สามารถปรับแต่งสไตล์เหล่านี้ได้ ลำดับการแสดงของการตั้งค่าสไตล์คือ: การตั้งค่าสไตล์วิดเจ็ต > การตั้งค่าร้านค้า
- แท็กหัวข้อ: มีทั้งหมด 6 ตัวเลือก ตั้งแต่แท็ก H1 - H6 ค่าเริ่มต้นของระบบจะเป็นแท็ก H4
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- ขนาดตัวอักษร: สามารถเลือกขนาด 14/16/18/20/22 ได้ ขนาดจริงของตัวอักษรจะปรับตามขนาดตัวอักษรที่ตั้งค่าไว้ในการตั้งค่าร้านค้า
- เนื้อหา: กรอกคำอธิบายของสินค้า คุณสามารปรับแต่งการตั้งค่าของสไตล์เหล่านี้ได้
- ขนาดตัวอักษร: สามารถเลือกขนาด 12/14/16/18/20 ได้ ขนาดจริงของตัวอักษรจะปรับตามขนาดตัวอักษรที่ตั้งค่าไว้ในการตั้งค่าร้านค้า
- สีตัวหนังสือ: กดเปิดจานสีเพื่อเลือกสีของตัวหนังสือ หรือกรอกรหัสสี
- รายการ: สามารถเพิ่มสัญลักษณ์แสดงรายการหัวข้อย่อย (bulleted lists) หรือเรียงลำดับรายการได้
- แก้ไขแบบเต็มหน้าจอ: คุณสามารถเปิดโหมดแก้ไขแบบเต็มหน้าจอได้ เพื่อให้การแก้ไขต่างๆ สะดวกมากยิ่งขึ้น
- ปุ่มข้อความ: กรอกข้อความของปุ่ม
- ลิงก์ไปที่: ใส่ลิงก์สำหรับปุ่ม มีสองวิธีในการเปิด URL:
คุณสามารถเลือกสองวิธีในการเปิดลิงก์ URL:
- หน้าต่างปัจจุบัน: เปิดหน้าเพจโดยตรงจากหน้าต่างปัจจุบัน
- หน้าต่างใหม่: เปิดหน้าเพจที่หน้าต่างใหม่
*หมายเหตุ:
- ลำดับการแสดงการตั้งค่าสไตล์คือ: การตั้งค่าสไตล์วิดเจ็ต > การตั้งค่าร้านค้า
- หากได้ปรับแก้เค้าโครงของหน้าเพจด้วยการใช้ custom liquid คุณจำเป็นต้องแก้ไขกฏสำหรับ custome liquid หลังจากที่ปรับเปลี่ยนการตั้งค่าสไตล์ของวิดเจ็ต
- ปัจจุบัน Shopper App ยังไม่รองรับการปรับแต่งสีข้อความและขนาดตัวอักษรของวิดเจ็ต
ขั้นตอนที่ 7
รองรับการตั้งค่าอื่นๆ
A. ระยะขอบ
สามารถปรับระยะขอบระหว่างข้อความและช่องว่างเว็บไซต์ได้
B. สัดส่วนรูปภาพ
คุณสามารถกำหนดสัดส่วนของรูปภาพสำหรับมุมองเดสก์ท็อปและมือถือแยกกันได้
C. การจัดตำแหน่งข้อความ
ขั้นตอนที่ 8
ระหว่างขั้นตอนการตั้งค่า คุณสามารถคลิกปุ่มบันทึกด้านล่างเพื่อดูตัวอย่างวิดเจ็ตรูปภาพพร้อมข้อความที่เพิ่มไป
*หมายเหตุ: คุณสามารถเลือกว่าจะดูตัวอย่างที่หน้าเวอร์ชันเดสก์ท็อปหรือมือถือได้
หรือคลิกปุ่มดูตัวอย่างที่ด้านบนขวามือเพื่อดูตัวอย่างหน้าร้านค้า
ขั้นตอนที่ 9
หลังจากเสร็จสิ้นการตั้งค่า คลิกปุ่มเผยแพร่ด้านบนขวามือ เพื่อที่ลูกค้าสามารถเห็นเนื้อหาใหม่ทั้งหมดที่หน้าร้านค้า
อ่านเพิ่มเติม
- แถบการประกาศ/การตั้งค่าส่วนหัว | เครื่องมือสร้างร้านค้า
- วิดเจ็ตข้อความ | เครื่องมือสร้างร้านค้า
- วิดเจ็ตคลังรูปภาพ | เครื่องมือสร้างร้านค้า
- วิดเจ็ตตัวเลื่อน | เครื่องมือสร้างร้านค้า
- วิดเจ็ตรายการสินค้า | เครื่องมือสร้างร้านค้า
- วิดเจ็ตตัวเลื่อนสินค้า | เครื่องมือสร้างร้านค้า
- การตั้งค่า SEO | เครื่องมือสร้างร้านค้า
- การตั้งค่าส่วนท้าย | เครื่องมือสร้างร้านค้า
ข้อคิดเห็น