คู่มือที่ครอบคลุมเพื่อปรับแต่งการออกแบบร้านค้า Ecwid ของคุณ

โพสต์ 7 ปีที่ผ่านมา by เคทซัล, หัวของสินค้า

UDP: ในเดือนเมษายน 2018 เราได้เปิดตัวการตั้งค่าการออกแบบใหม่ใน Ecwid! เรียนรู้ว่าคุณสามารถปรับแต่งร้านค้า Ecwid ของคุณได้ลึกซึ้งเพียงใดโดยไม่ต้องเขียนโค้ดใดๆ ในโพสต์บล็อกใหม่- หากร้านค้าของคุณสร้างขึ้นก่อนเดือนเมษายน 2018 และคุณต้องการเรียนรู้การใช้การตั้งค่าแบบเก่า โปรดอ่านบทความนี้ต่อไป

ร้านค้า Ecwid ถูกสร้างขึ้นในลักษณะที่คุณสามารถเพิ่มลงในทุกเว็บไซต์และเริ่มขายสินค้าทุกประเภทได้ในเวลาไม่นาน หน้าร้านจะปรับให้เข้ากับทั้งเดสก์ท็อปและอุปกรณ์มือถือโดยอัตโนมัติ และร้านค้าก็ดูดีบนหน้าจอทุกแบบ

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

ส่วนใหญ่จะอยู่ในรายการ แผงควบคุม → การตั้งค่า → ออกแบบ- ในหน้านั้น คุณสามารถจัดการการตั้งค่าการออกแบบของคุณได้ และในโพสต์นี้ เราจะบอกวิธีใช้ประโยชน์สูงสุดจากการตั้งค่าเหล่านั้น

เราแบ่งการแก้ไขที่เป็นไปได้ทั้งหมดในการออกแบบร้านค้า Ecwid ของคุณออกเป็นสามระดับตามทักษะและทรัพยากรที่จำเป็น จากรวดเร็วและง่ายไปจนถึงลึกและซับซ้อนมากขึ้น

ระดับ 1: รวดเร็วและง่ายดาย

ปรับเปลี่ยนได้ง่ายและรวดเร็ว ไม่มีอะไรนอกจากการคลิกปุ่มเท่านั้น

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

นอกจากนี้ ยังมีวิธีง่ายๆ ในการปรับรูปลักษณ์ของร้านค้าให้เข้ากับภารกิจของคุณโดยไม่ต้องใช้ความพยายามเป็นพิเศษ

1. ขายบน Ecwid Instant Site หากคุณไม่มีเว็บไซต์

Instant Site เป็นเว็บไซต์ฟรีที่มีร้านค้าออนไลน์ที่ Ecwid ให้บริการฟรีเมื่อคุณสร้างบัญชี Ecwid ของคุณ

เมื่อพูดถึงการออกแบบ Instant Site ก็ถูกสร้างขึ้นด้วย สำเร็จรูป บล็อก (ภาพหน้าปก, โลโก้, ร้านค้าออนไลน์, ส่วน “เกี่ยวกับเรา”, ความคิดเห็นของลูกค้า และการติดต่อ) ที่คุณสามารถเปิดใช้งานและปิดใช้งาน แก้ไข และปรับแต่งให้เข้ากับธุรกิจของคุณได้ ทั้งหมดที่สามารถทำได้จริงในเวลาไม่นานด้วยมือของคุณเอง

ดังนั้น หากคุณไม่มีเว็บไซต์ที่จะขาย นี่เป็นวิธีง่ายๆ ในการเริ่มต้นขายของออนไลน์บน ดูดี หน้าเว็บฟรี

เป็นขั้นเป็นตอน คู่มือจะอธิบายวิธีการออกแบบไซต์ทันใจของคุณ: ปรับเปลี่ยนไซต์ทันใจของคุณตั้งแต่เริ่มต้นไปจนถึงการขายครั้งแรก

2. ปรับแต่งการออกแบบได้ง่ายสำหรับผู้ที่มีเว็บไซต์อยู่แล้ว

หากคุณมีเว็บไซต์อยู่แล้ว Ecwid จะยังคงทำงานร่วมกับเว็บไซต์นั้นได้อย่างราบรื่น ไม่ว่าจะสร้างอะไรก็ตาม: WordPress, Wix, Joomla หรือแพลตฟอร์มอื่น ๆ ต่อไปนี้คือสิ่งที่คุณสามารถทำได้เพื่อทำให้ร้านค้าของคุณดูดีขึ้นกว่าเดิม

ขั้นตอนที่ 1: ใช้ธีมที่ตรงกันสำหรับเครื่องมือสร้างเว็บไซต์ของคุณ

ในการออกแบบเว็บไซต์ของคุณ คุณสามารถเลือกธีมที่มีให้ซื้อได้มากมาย ร้านค้า Ecwid เข้ากันได้กับร้านค้าส่วนใหญ่

ต่อไปนี้คือไดเร็กทอรีโดยย่อของสถานที่ต่างๆ บนเว็บที่คุณสามารถค้นหาธีมสำหรับเครื่องมือสร้างไซต์ของคุณได้

สำหรับเว็บไซต์ WordPress

นอกจากนี้อย่าพลาดการสะสมของ ธีม WordPress ฟรีที่ดีที่สุดสำหรับ E-commerce เว็บไซต์.

สำหรับเว็บไซต์ Joomla

สำหรับเว็บไซต์ Squarespace

สำหรับเว็บไซต์ Wix ง่ายยิ่งขึ้น: เรียกดูธีมโดยไม่ต้องออก www.wix.com.

หมายเหตุ ผู้ค้า Ecwid + Wix สามารถจับคู่สีของเว็บไซต์ของตนและจัดเก็บไว้ในการตั้งค่าแอปพลิเคชัน Ecwid Wix

การตั้งค่าการออกแบบร้านค้า Ecwid บนเว็บไซต์ Wix

ขั้นตอนที่ 2: เปิดใช้งานโหมดปรับสี

หากคุณเปิดร้านค้า Ecwid ใหม่และเพิ่มลงในเว็บไซต์ของคุณ Ecwid จะปรับสีร้านค้าให้เข้ากับสไตล์เว็บไซต์ของคุณโดยอัตโนมัติ คุณสมบัตินี้เรียกว่าโหมดปรับสี เป็นวิธีที่ง่ายมากในการทำให้ร้านค้าของคุณเป็นส่วนหนึ่งของเว็บไซต์ของคุณ

หากคุณขายกับ Ecwid อยู่แล้ว โหมดปรับสีจะไม่เปิดใช้งานตามค่าเริ่มต้น แต่คุณสามารถเปิดใช้งานได้ในหน้าการออกแบบ:

จะเกิดอะไรขึ้นหากคุณเพิ่มร้านค้า Ecwid ของคุณไปยังหลาย ๆ เว็บไซต์? เมื่อเปิดใช้งานโหมดปรับสี สีของร้านค้าจะปรับให้เข้ากับสีแต่ละสี ร้านค้าของคุณจะดูเป็นธรรมชาติในแต่ละสภาพแวดล้อมของเว็บไซต์ ไม่ว่าจะเป็นสีขาว สีดำ หรือสีเขียว

คุณลักษณะนี้มีให้สำหรับผู้ค้า Ecwid ส่วนใหญ่ หมายเหตุ: ผู้ค้า Ecwid + Wix สามารถจับคู่สีของเว็บไซต์ของตนและจัดเก็บในการตั้งค่าแอปพลิเคชัน Ecwid Wix เท่านั้น

3. เล่นด้วยการตั้งค่ารูปลักษณ์ที่รวดเร็ว

เมื่อไหร่ก็ตามที่คุณ ขายออนไลน์ ด้วย Ecwid คุณสามารถเปิดหรือปิดใช้งานองค์ประกอบหน้าร้าน Ecwid ได้ด้วยการคลิกเพียงไม่กี่ครั้ง ตัวอย่างเช่น ผู้ที่ขายสินค้าแฮนด์เมดเป็นชุดเดียวมักจะต้องการซ่อนช่องปริมาณ

คุณอาจต้องการซ่อนองค์ประกอบที่ไม่จำเป็นหรือเปลี่ยนขนาดภาพขนาดย่อ — ส่วนลักษณะที่ปรากฏของหน้าการออกแบบของคุณจะช่วยให้คุณทำสิ่งนี้ได้โดยสิ้นเชิง

ระดับ 2: นักผจญภัย

สำหรับผู้ที่ไม่มีความรู้ทางเทคนิคที่กำลังมองหาการเปลี่ยนแปลงการออกแบบเชิงลึกและมีเวลาสำหรับการเดินทางเพียงเล็กน้อย

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

ไม่ต้องกังวล: ในระดับนี้ เราได้รวบรวมเครื่องมือที่จะช่วยให้คุณบรรลุเป้าหมายข้างต้นโดยไม่ต้องมีความรู้พิเศษ มาดูพวกเขากันดีกว่า

1. ใช้แอปจาก Ecwid App Market เพื่อการออกแบบร้านค้า

พื้นที่ ตลาดแอป Ecwid นับแอปมากกว่า 100 รายการเพื่อช่วยคุณในด้านการวิเคราะห์ โปรโมชั่น การจัดส่ง และอื่นๆ คุณยังสามารถค้นหา แอพสำหรับปรับแต่งหน้าร้าน และ ออกแบบ- เราจะดูแอปหนึ่งสำหรับการเปลี่ยนสีธีมของคุณโดยไม่ต้องเขียนโค้ด: นักออกแบบร้านค้า.

นักออกแบบร้านค้า

นักออกแบบร้านค้า เป็นแอปที่ให้คุณตั้งค่าสีให้กับปุ่ม ข้อความ และพื้นหลังได้อย่างรวดเร็ว

โหมดแสดงตัวอย่างช่วยให้คุณเล่นกับสีได้มากเท่าที่คุณต้องการก่อนที่จะเผยแพร่การออกแบบที่สมบูรณ์แบบของคุณไปยังหน้าร้าน

อินเทอร์เฟซผู้ออกแบบร้านค้า

แอปนี้มีราคา 4.99 เหรียญสหรัฐฯ และให้ทดลองใช้ฟรี XNUMX สัปดาห์

นักออกแบบร้านค้าสามารถใช้ได้ ในแผน Ecwid แบบชำระเงินทั้งหมดรวมถึงแอพอื่นๆ ของ App Market

2. คัดลอกวาง ปรับแต่งพร้อมจากฐานความรู้

ฐานความรู้ของ Ecwid มีคำตอบสำหรับคำถามส่วนใหญ่ที่เจ้าของร้านค้า Ecwid อาจมี เรากำลังเพิ่มบทความใหม่ๆ อย่างต่อเนื่องที่นี่ พร้อมด้วยเคล็ดลับที่ถูกถามบ่อยที่สุดและ สำเร็จรูป โซลูชั่น

นักผจญภัยสามารถพบกับสิ่งต่างๆ คำแนะนำในการปรับแต่งหน้าร้าน- ตัวอย่างเช่น,

การเปลี่ยนแบบอักษรในร้าน or เพิ่มช่องค้นหา.

คำแนะนำเหล่านี้ส่วนใหญ่พังทลายลงไป คัดลอกวาง โค้ดบางส่วนลงในธีม CSS ของคุณ

คุณสามารถจัดการธีม CSS ของคุณได้ใน แผงควบคุม → การตั้งค่า → ออกแบบ.

กระบวนการดำเนินไปดังนี้: ตัวอย่างเช่น หากคุณต้องการเปลี่ยนไอคอนรถเข็น ให้ไปที่ของคุณ การตั้งค่า → การออกแบบสร้างธีม CSS ใหม่ เพิ่ม รหัสชิ้นหนึ่งบันทึกการเปลี่ยนแปลง และเปิดใช้งานธีม

คุณควรเพิ่มการเปลี่ยนแปลงเพิ่มเติมทั้งหมดให้กับธีมนี้ — สามารถใช้งานได้ครั้งละหนึ่งธีมเท่านั้น ดังนั้นจึงต้องรวมการแก้ไขทั้งหมดที่คุณต้องการนำมาสู่ร้านค้าของคุณ

3. สั่งซื้อการพัฒนาธีมแบบกำหนดเอง

หากคุณไม่พบธีมที่ตรงกับความต้องการของคุณ อีกทางเลือกหนึ่งก็คือ สั่งพัฒนาธีม CSS ที่จะสร้างขึ้นเพื่อคุณโดยเฉพาะ ธีมที่กำหนดเองมีความหมายมากกว่าการเปลี่ยนสี และช่วยให้คุณปรับแต่งได้ลึกซึ้งยิ่งขึ้น เช่น ลำดับการบล็อกที่แตกต่างไปจากเดิมอย่างสิ้นเชิงบนหน้าผลิตภัณฑ์ของคุณ

สำเร็จรูป ธีมและการพัฒนาธีมมีให้สำหรับผู้ค้า Ecwid ทุกคน

ระดับ 3: ทหารผ่านศึก

การปรับแต่งที่หนักหน่วง: การเปลี่ยนแปลงรูปลักษณ์ร้านค้าของคุณอย่างสมบูรณ์ สวัสดีรหัส

บางครั้งจำเป็นต้องเปลี่ยนแปลงรูปลักษณ์ร้านค้าที่ลึกซึ้งยิ่งขึ้น: คุณอาจต้องการ แบบเลื่อนลง เมนู เค้าโครงที่แตกต่างกันขององค์ประกอบของหน้าผลิตภัณฑ์ หรือการออกแบบปุ่มแบบกำหนดเอง

สำหรับ ความเชี่ยวชาญด้านเทคโนโลยี ผู้ค้าหรือผู้ที่มีนักพัฒนาอยู่ในทีมของตน มีโอกาสที่จะนำการเปลี่ยนแปลงประเภทนั้นมาใช้และแม้แต่เปลี่ยนร้านค้า Ecwid ของตนจนจำไม่ได้ด้วยความช่วยเหลือของธีม CSS ที่กำหนดเองหรือ Ecwid API

1. สร้างก ที่สร้างตัวเอง ธีมซีเอสเอส

หากคุณต้องการออกแบบร้านค้าของคุณเอง ให้ลองสร้างธีม CSS ของคุณเอง

ธีม CSS คือชุดกฎที่กำหนดรูปลักษณ์ของทุกองค์ประกอบในร้านค้า (ขนาด รูปร่าง สี และสถานที่บนเพจ)

สร้างธีม CSS ของคุณเองใน การตั้งค่า → การออกแบบ

มี คำแนะนำในฐานความรู้ Ecwid ที่อธิบายวิธีสร้างธีม CSS ของคุณเองและ คำแนะนำในการเปลี่ยนองค์ประกอบเฉพาะ.

โปรดทราบว่าคุณจะต้องมีความเข้าใจเกี่ยวกับ HTML และ CSS ดังนั้นหากคำสองคำนี้ฟังดูไม่คุ้นเคย คุณควรพร้อมที่จะใช้เวลาเพื่อรับทักษะที่จำเป็นในการสร้างธีมตั้งแต่เริ่มต้น

โปรดจำไว้ว่าหากคุณประสบปัญหากับการออกแบบร้านค้า Ecwid คุณสามารถขอความช่วยเหลือจากทีมดูแลลูกค้าของ Ecwid ได้ตลอดเวลา หรือยังสามารถทำได้ สั่งซื้อการพัฒนาธีม CSS ของคุณเอง.

2. ใช้ Ecwid Javascript API เพื่อขยายคุณสมบัติหน้าร้าน Ecwid

ส่วนนี้ส่วนใหญ่มีไว้สำหรับนักพัฒนา คุณรู้หรือไม่ว่ามีอะไรอีกที่สามารถปรับปรุงหน้าร้าน Ecwid ของคุณได้? การได้รับ Ecwid จาวาสคริปต์ API.

ตัวอย่างเช่น คุณสามารถสร้างธีม CSS หรือแอปใหม่และขายบน Ecwid App Market Ecwid Javascript API ช่วยให้คุณสามารถเปลี่ยนรูปลักษณ์หน้าร้านได้อย่างสมบูรณ์ โดยนำการเปลี่ยนแปลงที่ลึกเท่าที่คุณต้องการ

หากคุณพร้อมที่จะเริ่มโปรด ลงทะเบียนบนหน้าของเราสำหรับนักพัฒนา.