Compatibility: Any Shopify themes, work best on Shopify 2.0 FREE themes
Add a video with text section in your Shopify website. You can choose your video source from youtube, vimeo or even internal source. I added a video container radius as well.
Please be reminded, due to browser policy, video will be muted when autoplayed. Please see policy here. Some CSS styles might vary depending on the theme.
Make sure to adjust the video size. On this section, it is recommended to use a 2/3 aspect ratio sized video.
Check DEMO store here 💻. Password: made4uo
If you want to have one video and a text, you can use this section instead here.
What are Centered Video with Text Sections?
Centered video with text sections are multimedia elements that combine a central video with overlaid text. These sections can be strategically placed on key pages of your Shopify store to grab user attention, convey important messages, and showcase products or promotions in a visually engaging way.
Why Use Centered Video with Text Sections?
There are several advantages to incorporating centered video with text sections on your Shopify store:
- Increased Engagement: Videos are a powerful tool for capturing user attention and keeping them interested compared to static text blocks. The combination of video and text can enhance communication and potentially lead to a more immersive user experience.
- Improved Brand Storytelling: Videos allow you to showcase your brand personality, product features, or customer testimonials in a dynamic and memorable way.
- Clear Communication of Key Messages: The text overlays provide an opportunity to highlight key points or product benefits alongside the video content, ensuring users grasp the message quickly.
- Enhanced Design Appeal: Well-crafted video sections can add a visually dynamic element to your store, potentially improving the overall aesthetics and user experience.
Additional Considerations:
While centered video with text sections offer a visually captivating way to communicate with your customers, here are some additional factors to consider for successful implementation:
-
Video Content Strategy:
- High-Quality Videos: Use high-resolution, professional-looking videos that are clear, engaging, and relevant to your target audience. Grainy or poorly produced videos can have a negative impact on brand perception.
- Video Length: Keep video length concise and focused on conveying the key message. Long, drawn-out videos might lose user interest quickly.
- Consider Background Music: Background music can enhance the overall impact of the video, but ensure it complements the visuals and doesn't overwhelm the text overlays.
-
Text Overlay Optimization:
- Clarity and Conciseness: Keep the text overlay concise and easy to read. Users may only have a few seconds to grasp the message, so focus on the most important points.
- Text Size and Placement: Choose a text size that is clear and readable on all devices, especially considering mobile users. Position the text strategically to avoid obstructing key elements within the video.
- Color Contrast: Ensure the text color offers a clear contrast against the video background for optimal readability.
-
Accessibility:
- Closed Captions: Provide closed captions for your video content to ensure accessibility for users with hearing impairments.
- Video Description: Include a brief video description that outlines the content and purpose of the video. This can be helpful for search engine optimization (SEO) and screen readers used by visually impaired users.
-
Mobile Optimization:
- Responsive Design: Ensure the video with text section displays and functions flawlessly on mobile devices. Consider potential differences in screen size and data usage when optimizing the video for mobile viewing.
What you are buying:
- Video is at the center with 4 texts containers on each side
- Video section that accepts internal and external source
- Well written code with NO external library being use
- Able to control autoplay, looping, show/hide controls
- Able to add poster (cover image) when using an internal source video
- Able to resize the video height and width using aspect ratio
- Support WebM video type for internal source video ONLY
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
Steps on how to add Centered Video with Text Sections to Your Shopify Store
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
Step #2. Create a new section file
In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.
Step #3. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #4. Customize theme
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add the section using the theme editor, and find the Centered Video With Texts. Make sure to SAVE once you are done customizing.
Conclusion
By incorporating centered video with text sections on your Shopify store, you can create a dynamic and engaging way to showcase your products or brand message.
Copied!