Kingsman เป็นธีมที่สามารถช่วยนำเสนอรูปแบบของเว็บไซต์ที่หรูหราและเหมาะกับร้านค้าที่ต้องการเน้นภาพและรายละเอียดคุณภาพของสินค้า ซึ่งเหมาะสำหรับร้านค้าประเภทเสื้อผ้า เครื่องแต่งกาย, เฟอร์นิเจอร์, เครื่องประดับ, และสินค้าอิเล็กทรอนิกส์ (3C) และอื่นๆ
*หมายเหตุ: คุณไม่สามารถเปลี่ยนเลย์เอาท์ร้านค้าได้หากร้านค้าของคุณใช้แผนทางการอยู่และเฉพาะ "โซเชียลคอมเมิร์ซ"
ในบทความนี้จะกล่าวถึง:
- กำหนดธีมสีของร้านค้า
- ฟอนต์ที่กำหนดเอง
- สร้างสโลแกนที่หน้าการออกแบบขั้นสูง
- เค้าโครงหน้ารายละเอียดสินค้า
- ขนาดแบนเนอร์ที่แนะนำ
- รายละเอียดอื่นๆ
1. กำหนดธีมสีของร้านค้า
A. การตั้งค่า
ในหน้าเพจ SHOPLINE แอดมิน กรุณาไปที่ [การออกแบบร้านค้าออนไลน์]>[หน้า]และคลิก + หน้าเพจขั้นสูง เพื่อสร้างหน้าเพจร้านค้าใหม่ หรือคลิกที่ปุ่มแก้ไขที่อยู่บนหน้าเพจที่รองรับตัวสร้างหน้าเพจใหม่
ในหน้าเพจขั้นสูง กรุณาไปที่ [การตั้งค่าร้านค้า]>[สี] เพื่อกำหนดสีสำหรับแต่ละบล็อค ค่าสีพื้นฐานสำหรับแต่ละบล็อคจะเป็นสีที่คุณตั้งค่าไว้ตอนแรก
กรุณาอ้างอิงจาก การตั้งค่าร้านค้า | เครื่องมือสร้างหน้าเพจ (ใหม่) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าสี
B. คำแนะนำสำหรับการจับคู่สี
คุณสามารถจับคู่สามสีที่ต่างกันได้สำหรับรูปแบบเทมเพลตนี้ หากคุณต้องการรูปแบบสีเว็บไซต์ที่หรูหรามากขึ้น สามารถใช้สีที่มีค่า saturation (ค่าความอิ่มตัวของสี) ต่ำ ได้แก่ ชุดสี Morandi ที่ [ปุ่มแรก] > [พื้นหลัง] จากนั้นแนะนำให้ใช้สีขาวกับสีตัวอักษร
หรือใช้สีดำเพื่อสร้างรูปแบบเว็บไซต์ให้น่าดึงดูดมากยิ่งขึ้น
หากคุณต้องการความสบายตาที่เรียบง่ายยิ่งขึ้นด้วยสีของ "ส่วนหัว", "ธีม #1" และ "ธีม #2" คุณสามารถจับคู่สีของ "ธีม #2" กับสีพื้นหลังของ "ส่วนหัว" และ "ธีม #1" ได้
หากคุณต้องการเลือกคู่สี ให้เลือกสีที่คล้ายกัน คุณสามารถเลือกสีที่คล้ายแต่เฉดต่างกันได้ ตัวอย่างเช่น คุณสามารถตั้งค่าสีของ "ธีมสี #2" ด้วยการปรับความสว่างและค่าความต่างของสี (saturation) ของสีพื้นหลังของ "ส่วนหัว" และ "ธีมสี #1" โดยไม่จำเป็นต้องใช้สีที่ต่างกันโดยสิ้นเชิง
หากคุณต้องการสร้างความประทับใจให้กับลูกค้า คุณสามารถใช้สีที่ตรงข้ามกัน เช่น สีดำและสีเหลือง
มีเว็บไซต์เปรียบเทียบคู่สีมากมายที่คุณสามารถลองใช้ได้
C. แบบฟอนต์ที่แนะนำ
ฟอนต์ Open Sans เหมาะสำหรับเว็บไซต์ที่มีความทันสมัย Noto Serif เหมาะสำหรับรูปแบบเว็บไซต์ที่มีความคลาสสิค หลังจากเลือกใช้ตัวอักษรแล้ว เว็บไซต์ทั้งหมดจะถูกแทนที่ด้วยแบบตัวอักษรที่ได้เลือกไว้
2. สร้างสโลแกนที่หน้าการออกแบบขั้นสูง
A. ตัวสร้างหน้าเพจแบบใหม่
ในขณะนี้ฟีเจอร์สโลแกนยังไม่รองรับในตัวสร้างหน้าเพจใหม่
B. ตัวสร้างหน้าเพจแบบเก่า
สโลแกนที่โดดเด่นจะทำให้ลูกค้าเข้าถึงจิตวิญญาณของแบรนด์คุณได้
คุณสามารถไปที่ "หน้าเพจขั้นสูง" เพื่อเพิ่มองค์ประกอบ “ข้อความที่มีชื่อ” สำหรับข้อมูลเพิ่มเติม สามารถอ่านเพิ่มเติมได้ที่บทความหน้าเพจแบบขั้นสูง
สำหรับเทมเพลตนี้ สีพื้นหลังของธีมสี #1 จะปรากฏที่หน้าร้านค้าเมื่อคุณกรอกข้อความลงในช่องคำอธิบาย โปรดอย่าลืมกำหนดสีข้อความคำอธิบายที่เข้ากันกับพื้นหลัง (หากการกำหนดธีมสี #1 มืดเกินไป ขอแนะนำอย่าวางไว้ที่บรรทัดเดียวกันกับองค์ประกอบสินค้า)
สีพื้นหลังจะถูกกำหนดตามสีธีม #1 เราแนะนำให้คุณเลือกสีแบบอักษรที่เข้าคู่กัน
นอกจากนี้ คุณยังสามารถปรับระยะห่างของตัวอักษรด้วยรหัส css ได้อีกด้วย:
1. คลิกที่ช่องคำอธิบายเพื่อเปิดเครื่องมือแก้ไข จากนั้นคลิกปุ่ม </> เพื่อตรวจสอบ HTML
2. วางโค้ดนี้: <span style="letter-spacing:3px;"> ไว้ด้านหลัง “<p>” ตัวแรก” คลิก OK เพื่อบันทึกการเปลี่ยนแปลง
3. คุณสามารถเปลี่ยนตัวเลข “3” เพื่อปรับช่องว่างระหว่างตัวอักษรได้
3. เค้าโครงหน้ารายละเอียดสินค้า
3 ฟีเจอร์ใหม่ในหน้ารายละเอียดสินค้า
- วางเมาส์เพื่อซูมภาพสินค้า เมื่อวางเมาส์เหนือรูปภาพสินค้าหลัก รูปภาพขนาดเดิมจะปรากฏในหน้าต่างป๊อปอัป
- ใช้เมาส์เพื่อเลื่อนดูภาพสินค้าทั้งหมด
- รายละเอียดสินค้าและวิธีการจัดส่ง/ชำระเงินจะถูกย่อให้เล็กและแสดงไว้ทางด้านขวามือ เพื่อให้ลูกค้ามองไปที่รูปของสินค้า
ดังนั้น แนะนำให้อัปโหลดรูปภาพสินค้าทั้งหมดลงในส่วนของรูปถ่ายสินค้าหลัก และย่อความยาวของคำอธิบายลง ซึ่งวิธีการนี้จะช่วยให้หน้ารายละเอียดสินค้าสวยงามมากยิ่งขึ้นและเรายังแนะนำให้คุณอัปโหลดรูปภาพขนาดไม่เกิน 1000 x 1000px เพื่อความเร็วในการอัปโหลด
4. ขนาดแบนเนอร์ที่แนะนำ
เพื่อช่วยให้เว็บไซต์ของคุณเร็วขึ้น ลองใช้เครื่องมือปรับขนาดภาพนี้ได้!
https://tinypng.com/
หน้าขั้นสูง: คุณสามารถใช้ภาพแบนเนอร์แบบขนาดเต็มได้สำหรับแบนเนอร์ด้านบนที่หน้าโฮมเพจ ซึ่งขนาดจะอยู่ที่ 1920x84พิกเซล
หากคุณไม่ต้องการใช้พื้นที่ว่างทั้งหมดของแบนเนอร์ แนะนำให้ใช้ขนาด 1920x640 พิกเซล ซึ่งจะใช้พื้นที่สามในสี่ของหน้าจอ
สำหรับหน้ารายการสินค้า แนะนำให้ใช้ขนาดที่ความสูงน้อยกว่า 640 พิกเซล ดังนั้นเมื่อลูกค้าเข้าสู่หน้าเพจเป็นครั้งแรก พวกเขาจะเห็นรายการสินค้าแถวแรกเล็กน้อย
*หมายเหตุ:
- สำหรับหน้าเพจขั้นสูงที่สร้างด้วยตัวสร้างหน้าเพจใหม่ กรุณาเปิดใช้ฟีเจอร์ "ปรับระยะขอบตามขนาดมีเดีย (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 พิกเซล
- สัดส่วนรูปภาพที่แนะนำสำหรับเวอร์ชันเดสก์ท็อป
5. รายละเอียดอื่นๆ
-
รูปแบบเค้าโครงของ Instagram
-
บล็อกโพส
ส่วนแรกจะเน้นไปที่การดึงดูดความสนใจของลูกค้าด้วยการแสดงรูปภาพขนาดเต็ม ส่วนถัดไปจะแสดงผลแบบข้างกัน เมื่อคุณเลื่อนลง ลูกค้าจะสามารถอ่านหลายๆ บทความพร้อมกันได้ ซึ่งช่วยให้ลูกค้าประหยัดเวลาในการค้นหา หน้าปกของบทความจะใช้เป็นรูปภาพแรกที่อยู่ในบทความ แนะนำให้ใช้ภาพที่มีขนาด 16:9
ข้อคิดเห็น