วิธีปรับแต่งเลย์เอาต์เว็บสโตร์ (How to Custom Webstore Layout)

1. บทนำ
2. ข้อมูลพื้นฐาน
3. การตั้งค่า
4. วิธีเพิ่มบล็อกใหม่
5. ข้อมูลเพิ่มเติม

1. บทนำ

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

2. ข้อมูลพื้นฐาน

ขั้นตอนที่ 1: ไปที่ Webstore > Webstore Builder

ขั้นตอนที่ 2: ที่เมนูด้านซ้าย จะมีตัวเลือก Theme, Settings และ Add Block

📌หมายเหตุ:
Theme: เลือกธีมที่คุณชื่นชอบเพื่อใช้เป็นรูปแบบการแสดงผลของเว็บสโตร์ - ดูเพิ่มเติม
Settings: ใช้สำหรับปรับแต่งการออกแบบเว็บสโตร์ตามเนื้อหาที่คุณสร้าง
Add Block: ใช้สำหรับเพิ่มเนื้อหาลงในเว็บสโตร์

ขั้นตอนที่ 3: เลือกหน้าของเว็บสโตร์ที่ต้องการเพิ่มบล็อกหรือแก้ไขเนื้อหา

ขั้นตอนที่ 4: คุณสามารถดูตัวอย่างการแสดงผลบน เดสก์ท็อป แท็บเล็ต และมือถือ

3. การตั้งค่า

I. General – ตั้งค่าฟอนต์ รูปแบบข้อความ และสี

II. Web Layout – ตั้งค่ารูปแบบการจัดวาง ความกว้าง และพื้นหลังของเว็บสโตร์

III. Header – ตั้งค่ารูปแบบส่วนหัว พื้นหลัง เมนู และไอคอน

IV. Button – ตั้งค่ารูปแบบและสีของปุ่ม

V. Brands & Collections – ตั้งค่าการแสดงผลรูปภาพและคำอธิบายของแบรนด์และคอลเลกชัน

VI. Product – ตั้งค่ากรอบสินค้า การจัดตำแหน่งข้อความ และสี

📌หมายเหตุ: โดยค่าเริ่มต้นหน้าสินค้าจะแสดง 3 สินค้าต่อแถว แต่หากลบบล็อก Advanced Filter By ออก ระบบจะแสดง 4 สินค้าต่อแถว

VII. Footer – ตั้งค่ารูปแบบส่วนท้าย พื้นหลัง รูปแบบข้อความ และองค์ประกอบต่าง ๆ

4. เพิ่มบล็อกใหม่

ขั้นตอนที่ 1: คลิก Add Block ที่เมนูด้านซ้าย หรือคลิกปุ่ม + ที่ด้านบนหรือด้านล่างของบล็อก เพื่อเพิ่มเนื้อหาในหน้าเว็บสโตร์

ขั้นตอนที่ 2: เลือกบล็อกเนื้อหาที่ต้องการเพิ่ม และเลือกรูปแบบการจัดวาง (Layout)

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

ขั้นตอนที่ 4: คุณสามารถจัดลำดับ แก้ไข หรือลบบล็อกได้

ขั้นตอนที่ 5: เมื่อออกแบบเว็บสโตร์เรียบร้อยแล้ว ให้คลิก Save And Publish เพื่อบันทึกและเผยแพร่การเปลี่ยนแปลง หรือหากไม่พอใจกับการออกแบบ สามารถคลิก Reset To Default เพื่อคืนค่าการตั้งค่าทั้งหมดกลับเป็นธีมเริ่มต้น