How can I add a video to an "Image with Text" section in my Shopify theme?

How can I add a video to an "Image with Text" section in my Shopify theme?

'Benefits of upgrading from "Image with Text" to "Video with Text" in Shopify stores.

  • Videos catch people’s attention longer than images because they use moving visuals and sound. Studies also show that people are more likely to buy something after watching a product video.
  • Videos let you tell a more engaging story. You can show off product features, share customer reviews, or tell your brand’s story in a lively way and adding text with the video helps highlight important points.
  • Search engines like Google favor websites with videos and other rich media, which can help to improve your search ranking and make your site more visible.

To add video with text on your shopify store, you'll need to follow the given Instruction Here’s a step-by-step guide to set it up.

1. Customize your shopify theme code

  • Navigate to Online Store > Themes.
  • Under your current theme, click on Actions > Edit Code.
  • In the Sections folder, find and open the file named image-with-text.liquid.

2. Insert the code into the image-with-text.liquid file after line number 43 as showed in image


<div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">

	{%- if section.settings.video_url != blank -%}
		<div style="overflow:unset;" class="_video_parent">
			<video  autoplay  loop muted style="width:500px">
				<source src="{{ section.settings.video_url }}" type="video/mp4" >
					Your browser does not support the video tag.
				</video>
			</div>
	{%- endif -%}</div>

3. Add the schema code in the image-with-text.liquid file after line number 157 as showed in image


{
	"type": "text",
	"id": "video_url",
	"label": "Video URL",
	"info": "Enter the URL of the video you want to display."
},

4. Customize the image-with-text section

  • Go to Online Store > Themes > Customize.
  • Add the  image-with-text section.

  • Now, you will see a block labeled "Video URL."
  • Add the URL of the video you want to display in the section.
  • Save the Changes 
    Back to blog
    null