SHOPLINE ขอนำเสนอธีมใหม่ UltraChic ด้วยธีมนี้ร้านค้าสามารถออกแบบหน้าร้านค้าแบบไดนามิกได้มากยิ่งขึ้น
*หมายเหตุ: คุณไม่สามารถเปลี่ยนเลย์เอาต์ร้านค้าได้หากร้านค้าของคุณใช้แผนทางการอยู่และเฉพาะ "โซเชียลคอมเมิร์ซ"
- กำหนดธีมสีของร้านค้า
- แบนเนอร์ขนาดเต็มความกว้าง
- กำหนดเมนูด้วยตนเอง & ขนาดแบนเนอร์ที่แนะนำ
- แนะนำการออกแบบส่วนท้าย (Footer)
- เพิ่ม/ นำออก ข้อความ ช่องว่าง และเส้นใต้
- แนะนำการจัดหน้าเพจรายละเอียดสินค้า
- รายละเอียดอื่นๆ
1. กำหนดธีมสีของร้านค้า
ในหน้าเพจ SHOPLINE แอดมิน กรุณาไปที่ [การออกแบบร้านค้าออนไลน์] > [หน้า] และคลิก + หน้าเพจขั้นสูง เพื่อสร้างหน้าเพจร้านค้าใหม่ หรือคลิกที่ปุ่ม แก้ไข ที่อยู่บนหน้าเพจที่รองรับตัวสร้างหน้าเพจใหม่
ในหน้าเพจขั้นสูง กรุณาไปที่ [การตั้งค่าร้านค้า] > [สี] เพื่อกำหนดสีสำหรับแต่ละบล็อค ค่าสีพื้นฐานสำหรับแต่ละบล็อคจะเป็นสีที่คุณตั้งค่าไว้ตอนแรก
คุณสามารถใช้โค้ดสีที่กำหนดเองสำหรับปุ่มต่างๆ, ข้อมูลสำคัญและการขีดเส้นใต้ ในร้านค้าของคุณเองได้ กรุณาใช้ 6-digit HEX color code (หลีกเลี่ยงการใช้สีอ่อนเพื่อให้อ่านได้อย่างชัดเจนยิ่งขึ้น) โค้ดสีสามารถอ้างอิงได้ที่: https://htmlcolorcodes.com/ กรุณาอ้างอิงจากการตั้งค่าร้านค้า | เครื่องมือสร้างหน้าเพจ (ใหม่) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าสี
2. แต่งแต้มหน้าร้านของคุณ
A. แบนเนอร์ขนาดเต็มความกว้าง
หน้าโฮมเพจธีม Ultrachic จะแสดงภาพขนาดเต็มความกว้าง โลโก้ร้านค้าและเมนูจะถูกแสดงด้านบนของรูปภาพ แนะนำให้ใช้ภาพที่มีสีธรรมดาสำหรับแบนเนอร์
ตัวอย่างพื้นหลังสีดำของส่วนหัวและอักษรสีขาว:
ตัวอย่างพื้นหลังสีขาวของส่วนหัวและตัวอักษรสีดำ:
หมดกังวลสำหรับการใช้งานภาพแบนเนอร์ที่ซับซ้อน เมื่อลูกค้าเลื่อนหน้าจอลงมา พวกเขาจะยังเห็นรายการเมนูอยู่
ตัวอย่างนี้คือพื้นหลังขาวของส่วนหัวและตัวอักษรสีดำ
*หมายเหตุ:
- หน้าที่ถูกตั้งเป็นหน้าโฮมเพจเท่านั้นที่สามารถแสดงแบนเนอร์แบบเต็มความกว้างได้
- โปรดอย่าลืมนำภาพส่วนเกินด้านบนและล่างออกและเปิดใช้งานรูปแบบเต็มความกว้างเพื่อแสดงภาพแบบเต็มความกว้าง
B. กำหนดสีพื้นหลังของส่วนหัว
หากร้านค้าต้องการกำหนดสีพื้นหลังของส่วนหัว สามารถอัปโหลดภาพที่มีสีธรรมดาหรือมีลวดลาย โปรดอย่าลืมเอาตัวเลือกลบ padding ด้านบนและด้านล่าง เพื่อเปิดการแสดงภาพเต็มความกว้าง
ตัวอย่างภาพที่มีลวดลายด้วยพื้นหลังสีขาว:
ผลลัพธ์ภาพที่แสดงบนหน้าร้านค้า:
โปรดอย่าลืมตรวจสอบการแสดงผลบนอุปกรณ์มือถือด้วย
สำหรับธีม Ultra Chic โลโก้และเมนูจะแสดงอยู่บนภาพแรก (ซึ่งเป็นองค์ประกอบแรกบนหน้าเพจขั้นสูง) หากคุณไม่ต้องการให้ภาพทับซ้อนกับโลโก้และเมนู คุณสามารถเพิ่มองค์ประกอบ “ข้อความ” ด้วยเนื้อหาที่ว่างเปล่าได้ ดังภาพด้านล่าง:
C. ขนาดแบนเนอร์ที่แนะนำ
ลองเครื่องมือบีบอัดรูปนี้เพื่อช่วยให้เว็บไซต์ของคุณโหลดได้รวดเร็วยิ่งขึ้น:https://tinypng.com/
หน้าเพจขั้นสูง
คุณสามารถใช้แบนเนอร์ขนาดเต็มความกว้างสำหรับแบนเนอร์ด้านบนของหน้าโฮมเพจ ขนาดที่แนะนำคือ 1920x1080px.
หากคุณไม่ต้องการใช้พื้นที่แบนเนอร์ทั้งหมด กรุณาตั้งค่าแบนเนอร์ไว้ที่ 1920x720px. แบนเนอร์จะมีขนาด 1 ใน 3 ของหน้าจอทั้งหมด
ที่หน้าสินค้าทั้งหมด เราแนะนำให้ตั้งค่าความสูงของแบนเนอร์ให้ต่ำกว่า 640px ดังนั้นเมื่อลูกคาเข้ามาในหน้าเพจแรก พวกเขาจะสามารถเห็นสินค้าแถวแรกได้บางส่วน
*หมายเหตุ:
- สำหรับหน้าเพจขั้นสูงที่สร้างด้วยตัวสร้างหน้าเพจใหม่ กรุณาเปิดใช้ฟีเจอร์ "ปรับระยะขอบตามขนาดมีเดีย (Adapt Height to the Media Size)" ในขณะที่กำลังเพิ่มวิดเจ็ตตัวเลื่อน (Slider) เพื่อป้องกันปัญหาภาพโดนตัดขอบ
- สำหรับการสร้างหน้าเพจขั้นสูงด้วยตัวสร้างหน้าเพจใหม่ กรุณาอ้างอิงขนาดด้านล่างนี้:
- สัดส่วนรูปภาพที่แนะนำสำหรับเวอร์ชันเดสก์ท็อป
- สี่เหลี่ยมผืนผ้า (อัตราส่วน 2:1 ) - ขนาดภาพเดี่ยวที่แนะนำ: 2000 x 1000 พิกเซล
- สี่เหลี่ยมผืนผ้า (อัตราส่วน 3:4 ) - ขนาดภาพเดี่ยวที่แนะนำ: 1500 x 2000 พิกเซล
- สีเหลี่ยมจัตุรัส (อัตราส่วน 1:1 ) - ขนาดภาพเดี่ยวที่แนะนำ: 2000 x 2000 พิกเซล
- สัดส่วนรูปภาพที่แนะนำสำหรับเวอร์ชันมือถือ
- สี่เหลี่ยมผืนผ้า (อัตราส่วน 2:1 ) - ขนาดภาพเดี่ยวที่แนะนำ: 1080 x 540 พิกเซล
- สี่เหลี่ยมผืนผ้า (อัตราส่วน 3:4 ) - ขนาดภาพเดี่ยวที่แนะนำ: 810 x 1080 พิกเซล
- สีเหลี่ยมจัตุรัส (อัตราส่วน 1:1 ) - ขนาดภาพเดี่ยวที่แนะนำ: 1080 x 1080 พิกเซล
- สัดส่วนรูปภาพที่แนะนำสำหรับเวอร์ชันเดสก์ท็อป
D. ส่วนท้าย (Footer) แสดงตามสีพื้นหลังของส่วนหัว (header)
ระบบ SHOPLINE จะเติมสีส่วนท้ายทั้งหมดโดยอัตโนมัติ ร้านค้าสามารถเติมรายละเอียดแบรนด์หรือลากและวางส่วนประกอบอื่นได้เช่นกัน
ตัวอย่างเมื่อพื้นหลังของส่วนหัวเป็นสีเข้ม ส่วนท้ายก็จะเป็นสีเข้ม
เมื่อพื้นหลังของส่วนหัวเป็นสีขาว ส่วนท้ายก็จะเป็นสีเทาสว่าง
*โปรดทราบว่าสีพื้นหลังจะไม่แสดงในโหมดการแก้ไข คุณจะต้องดูหน้าเพจในโหมดดูตัวอย่างหรือหลังจากบันทึกการเปลี่ยนแปลงนี้แล้ว รวมถึงคุณจะต้องเลือกสีเข้มสำหรับตัวอักษรและรูปภาพเพื่อให้สะดุดตาในหน้าร้าน (เช่น พื้นหลังสีดำ ตัวอักษรสีขาว, รูปสีสด, หรือพื้นหลังสีเทาและตัวอักษรสีเข้ม)
E. ข้อความที่มีชื่อด้วยเส้นใต้
เมื่อเลือกใช้องค์ประกอบข้อความที่มีชื่อ ระบบจะขีดเส้นใต้หัวข้อด้วยธีมสีที่กำหนดไว้โดยอัตโนมัติ
หากคุณต้องการเพิ่มการขีดเส้นใต้สำหรับข้อความที่มีชื่อ:
ใน "หน้าเพจแบบขั้นสูง" คุณสามารถเพิ่มองค์ประกอบ "ข้อความที่มีภาพ" หรือเลือกที่ช่อง "แสดงชื่อ"
เนื่องจากรูปแบบที่เป็นค่าพื้นฐานขององค์ประกอบข้อความ (เช่น สี, ขนาด) หากคุณต้องการทำรูปแบบข้อความให้เข้ากับ "หมวดหมูสินค้า" คุณสามารถทำได้ตามคำแนะนำ CSS ดังต่อไปนี้:
1. ในขณะที่ตั้งค่าข้อความ กรุณาตั้งค่าสีข้อความเป็น #666666 ด้วยขนาด 22 จากนั้นคลิกที่ </>
2. คัดลอกและวางโค้ดนี้: <span style="letter-spacing:3px;"> ลงหลัง "<p>" แรก, คลิกตกลงเพื่อบันทึกการแก้ไข
F. นำเส้นใต้ที่อยู่ใต้ข้อความออก
หากคุณไม่ต้องการข้อความที่ขีดเส้นใต้ กรุณาใช้องค์ประกอบ "ข้อความ" หรือเลือกที่ช่อง "แสดงรายละเอียด" เมื่อเพิ่มองค์ประกอบอื่นๆ
G. วางข้อความอธิบายสินค้าไว้กึ่งกลางหน้าในหน้ารวมสินค้า
ในรูปแบบธีม Ultra Chic ธีมนี้จะไม่มีแถบด้านข้างที่หมวดหมู่สินค้า ดังนั้นคุณสามารถดึงดูดความสนใจของลูกค้าได้ด้วยการแสดงภาพสินค้าที่ใหญ่และชัดเจน
เนื่องจากขนาดภาพสินค้าที่กว้าง เราขอแนะนำให้แสดงรายละเอียดสินค้าไว้ที่กึ่งกลางหน้าเพจเพื่อให้ข้อความดูสวยงามและน่ามอง
H. รูปภาพจาก Instagram มีขนาดใหญ่!
SHOPLINE ปรับขนาดองค์ประกอบของ Instagram เพื่อแสดงรูปภาพที่ใหญ่และชัดเจนขึ้นกว่าเดิมทั้งเวอร์ชั่นหน้าเดสก์ท็อปและบนมือถือ
I. กรุณาเพิ่มเงาและกรอบสำหรับโลโก้สีขาวของคุณ
โลโก้สีขาวจะช่วยดึงดูดสายตาเมื่ออยู่บนพื้นหลังสีเข้ม
แต่ในขณะที่การแชร์เว็บไซต์หรือส่งอีเมล์ จะไม่แสดงโลโก้ที่มีสีขาวอย่างชัดเจน ตามตัวอย่างด้านล่าง
ดังนั้นแนะนำให้เพิ่มเงาหรือกรอบสำหรับโลโก้ที่มีสีขาวตามตัวอย่างด้านล่าง
ข้อคิดเห็น