19 ตัวอย่างเว็บไซต์ Divi eCommerce

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

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

1. แอฟริกาตะวันออก

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

ดูเว็บไซต์

2. เซซิลีแสนหวาน

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

ดูเว็บไซต์

3. กระดาษสีชมพูสมัยใหม่

หน้าแรกของ Modern Pink Paper ดูเหมือนร้านค้าและใช้สีอ่อนเพื่อดึงดูดกลุ่มเป้าหมาย รวมถึง CTAs สำหรับหมวดหมู่ต่างๆ หน้าหมวดหมู่หลักใช้รูปภาพเดียวกันสำหรับแต่ละหมวดหมู่ แต่จะแสดงชื่อเหนือรูปภาพ หน้าหมวดหมู่รองแสดงผลิตภัณฑ์ที่มีตัวกรอง หน้าผลิตภัณฑ์มีตัวเลือกสีและการปรับเปลี่ยนในแบบของคุณมากมาย ผู้ซื้อสามารถเลือกสี เพิ่มชื่อสำหรับการปรับเปลี่ยนในแบบของคุณ เลือกดูสินค้าก่อนจัดส่ง และเพิ่มข้อความและบันทึกย่อ รายละเอียดผลิตภัณฑ์ใช้หีบเพลงสำหรับคำถามที่พบบ่อย

ดูเว็บไซต์

4. การออกแบบใบไม้เดียว

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

ดูเว็บไซต์

5. ตะกร้า Bro

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

ดูเว็บไซต์

6. ร้านดูแลธรรมชาติ

Natural Care Shop มีการออกแบบร้านค้าที่ดีพร้อมรูปภาพที่เชื่อมโยงไปยังหมวดหมู่ต่างๆ ใช้สีอ่อนเพื่อดึงดูดกลุ่มเป้าหมาย หน้าหมวดหมู่ประกอบด้วยวิดเจ็ตแถบด้านข้างของ WooCommerce และ CTA ในส่วนท้าย ผลิตภัณฑ์จะแสดงด้วยภาพขนาดใหญ่ หน้าผลิตภัณฑ์มีไอคอนที่มีสไตล์และผลิตภัณฑ์ที่คล้ายกันทั้งในวิดเจ็ตและเป็นรูปภาพ CTA

ดูเว็บไซต์

7. Apis ออสเตรเลีย

Apis Australia มี CTA ของร้านค้าแบบเต็มความกว้างในส่วนหัวพร้อมกับส่วนหมวดหมู่ที่แสดงผลิตภัณฑ์หลายรายการในรูปภาพ หน้าร้านค้าใช้พื้นหลังเดียวกันเพื่อแสดงด้านหลังโมดูลร้านค้า ส่วนร้านค้าอื่นแสดงผลิตภัณฑ์เสริมบนพื้นหลังเดียวกัน ผลิตภัณฑ์จะแสดงด้วยเงากล่อง หน้าผลิตภัณฑ์นั้นเรียบง่าย แต่มีการจัดรูปแบบข้อความให้เข้ากับไซต์และผลิตภัณฑ์ที่เกี่ยวข้อง

ดูเว็บไซต์

8. ลาลัย

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

ดูเว็บไซต์

9. Leoca

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

ดูเว็บไซต์

10. สุภาพบุรุษผู้น่าขยะแขยง

Scruffy Gentleman มีกล่องค้นหาผลิตภัณฑ์ใต้ส่วนหัวตามด้วยภาพพื้นหลังแบบเต็มความกว้างในรูปแบบพารัลแลกซ์ สินค้าเด่นเลื่อนดูและทับซ้อนกับส่วนถัดไปของผลิตภัณฑ์แนะนำ ส่วนอื่นแสดง CTA ในพารัลแลกซ์ ตามด้วยรายการใหม่ในร้านค้า หน้าร้านค้ามีการออกแบบที่คล้ายกันและเพิ่มแถบด้านข้างของ WooCommerce หน้าผลิตภัณฑ์จะแสดงแบบเต็มความกว้างและมีรูปภาพขนาดใหญ่

ดูเว็บไซต์

11. วีซ

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

ดูเว็บไซต์

12. โคโค่ กุสซิโน

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

ดูเว็บไซต์

13. Tarte และ Berry

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

ดูเว็บไซต์

14. เภสัชกร Nikki Hill

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

ดูเว็บไซต์

15. หนามและนกกระจอก

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

ดูเว็บไซต์

16. คิกไบค์

Kickbike แสดงแถบเลื่อนเต็มความกว้างพร้อม CTA ของร้านค้า หน้าแรกมีบทความและลิงก์มากมายเกี่ยวกับบริษัท ส่วนร้านค้า และข้อมูลมากมายเกี่ยวกับผลิตภัณฑ์ หน้าหมวดหมู่ประกอบด้วยรูปภาพแบบเต็มหน้าจอ ตามด้วยส่วนข้อมูล ส่วนร้านค้าแบบเต็มความกว้าง และคำถามที่พบบ่อย หน้าผลิตภัณฑ์นั้นเรียบง่าย แต่ใช้รูปภาพขนาดใหญ่และผลิตภัณฑ์ที่เกี่ยวข้องจำนวนมาก

ดูเว็บไซต์

17. บูติกไม่ใส่เกลือ

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

ดูเว็บไซต์

18. เมซองฟลาวเวอร์

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

ดูเว็บไซต์

19. ร้าน Basami

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

ดูเว็บไซต์

จบความคิด

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

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

ภาพเด่นผ่าน TeraVector / shutterstock.com