คำแนะนำทีละขั้นตอนในการเพิ่มแบนเนอร์วิดีโอธีม Dawn Shopify

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

ธีม Dawn มาพร้อมกับโมดูลมากมาย เช่น บล็อกการอัปโหลดวิดีโอมาตรฐานและแบนเนอร์รูปภาพ

ในคู่มือนี้ เราจะแสดงวิธีสร้าง ธีมรุ่งอรุณ แบนเนอร์วิดีโอเพื่อดึงดูดความสนใจบนหน้าแรกของคุณ!

ภาพรวมของธีมรุ่งอรุณ

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

พื้นหลัง/แบนเนอร์วิดีโอคืออะไร และเหตุใดคุณจึงควรใช้อย่างใดอย่างหนึ่งบนเว็บไซต์ของคุณ?

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

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

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

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

คำแนะนำทีละขั้นตอนในการเพิ่มพื้นหลัง/แบนเนอร์วิดีโอให้กับธีม Dawn

ในทางเทคนิคแล้ว มีสี่วิธีในการเพิ่มแบนเนอร์วิดีโอธีม Dawn (ไม่ใช่ทั้งหมดที่เหมาะสม):

1. การแปลงวิดีโอเป็นรูปแบบวิดีโอ/ภาพ WebP
2. การปรับ Shopify โค้ดสำหรับแบนเนอร์รูปภาพปกติ เพื่อรองรับวิดีโอ
3. การแปลงวิดีโอเป็นรูปแบบ GIF
4. เพียงอัปโหลดวิดีโอไปยังบล็อกวิดีโอ Shopifyข้ามแนวคิดเรื่องการมีองค์ประกอบพื้นหน้า (ดังนั้นมันจะไม่ใช่แบนเนอร์ที่แท้จริง)

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

ดังนั้นเราขอแนะนำให้แปลงไฟล์วิดีโอในรูปแบบใดก็ได้ที่คุณมี (.mp4, .mov, .wmv) เป็นรูปแบบ WebP WebP ผสมผสานข้อดีของภาพ JPEG ความละเอียดสูง วิดีโอ และ GIF เข้าด้วยกัน โดยคุณสามารถสร้างวิดีโอเคลื่อนไหวที่สวยงามได้โดยไม่เทอะทะและไม่สูญเสียความละเอียดมากนัก และคุณสามารถอัปโหลดวิดีโอ/รูปภาพ WebP ไปยัง Shopify แบนเนอร์รูปภาพ

นี่คือวิธี:

ขั้นตอนที่ 1: ถ่ายวิดีโอของคุณและแปลงเป็นไฟล์ WebP Format

มีตัวแปลง “วิดีโอเป็น WebP” ฟรีมากมายทางออนไลน์ ลองค้นหาออนไลน์ หรือใช้หนึ่งในตัวแปลงที่เราทดสอบ:

• เอซกิฟ
• ตัวแปลง MC
• MP4.to

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

ขั้นตอนที่ 2: ค้นหาธีม Dawn ใน Shopify

ไปที่ “ร้านค้าออนไลน์” > “ธีม”

หากคุณยังไม่มี ให้ติดตั้งธีม Dawn มิฉะนั้น คุณควรจะพบธีม Dawn ที่ได้รับการกำหนดเป็น Shopifyของ “ธีมปัจจุบัน” คลิกที่ปุ่ม "ปรับแต่ง" เพื่อดำเนินการต่อ

ขั้นตอนที่ 3: เพิ่มและเลือกบล็อกแบนเนอร์รูปภาพ

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

ขั้นตอนที่ 4: อัปโหลดไฟล์วิดีโอ WebP

คลิกปุ่ม "เลือกภาพ" ใต้ส่วน "ภาพแรก"

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

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

ยินดีด้วย คุณเพิ่มแบนเนอร์วิดีโอธีม Dawn สำเร็จแล้ว!

ขั้นตอนที่ 5: ดูตัวอย่างวิดีโอ

แต่เดี๋ยวก่อน ควรดูตัวอย่างวิดีโอในส่วนหน้าก่อนเพื่อให้แน่ใจว่าวิดีโอดูถูกต้อง ทำงานได้ราบรื่น และมีความละเอียดที่เหมาะสม

กลับมาที่หน้าจอหลักของแดชบอร์ด คลิกไอคอนลูกตาเพื่อ “ดูร้านค้าออนไลน์ของคุณ” ที่อยู่ถัดจาก "ร้านค้าออนไลน์" ใต้ส่วน "ช่องทางการขาย"

ที่ประสบความสำเร็จ!

การปรับแต่งแบนเนอร์วิดีโอธีม Dawn ของคุณ: ทำให้เป็นของคุณโดยเฉพาะ

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

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

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

สำหรับการปรับแต่งเพิ่มเติม คุณสามารถเข้าถึงส่วน “CSS แบบกำหนดเอง” ได้

และแน่นอนว่าคุณสามารถเลือกข้อความหรือปุ่มของเนื้อหาเพื่อเปลี่ยนสิ่งที่พวกเขาพูดและลักษณะที่ปรากฏได้

เคล็ดลับในการเพิ่มประสิทธิภาพไฟล์วิดีโอของคุณเพื่อความเร็วสูงสุดและความเข้ากันได้

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

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

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

การแก้ไขปัญหาทั่วไปเกี่ยวกับการเพิ่มพื้นหลังวิดีโอ/แบนเนอร์ให้กับธีม Dawn

บางครั้ง ไม่ว่าคุณจะระมัดระวังเพียงใด ปัญหาก็ยังอาจปรากฏขึ้นเมื่อเพิ่มแบนเนอร์วิดีโอธีม Dawn ต่อไปนี้เป็นเคล็ดลับการแก้ปัญหาเมื่อคุณพบปัญหา:

ปัญหาความไม่เข้ากัน

ลองแปลงวิดีโอเป็นรูปแบบไฟล์ที่เข้ากันได้ เช่น WebP หรือใช้ลิงก์ฝังวิดีโอ

ขนาดวิดีโอใหญ่เกินไป

ตัดแต่งวิดีโอหรือบีบอัดเพื่อลดขนาดไฟล์โดยยังคงคุณภาพไว้

วิดีโอไม่เล่นอัตโนมัติ

ตรวจสอบว่าคุณได้เปิดใช้งานตัวเลือก "เล่นอัตโนมัติ" ในการตั้งค่าธีมแล้ว

บทสรุปของเราเกี่ยวกับการเพิ่มแบนเนอร์วิดีโอธีม Dawn

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

คุณคิดยังไง? แจ้งให้เราทราบในความคิดเห็นหากคุณประสบความสำเร็จในการเพิ่มแบนเนอร์วิดีโอธีม Dawn!