Shopify themes use sections to build pages with reusable blocks of content. Each section is defined in Liquid and can have a schema that makes it editable inside the Theme Editor. A video section is a custom section that allows users to display a video with options such as autoplay, looping, and a poster image. The purpose of creating this section is to give control over video display without requiring changes to the theme code every time a video needs to be updated.
Create a Section File
Create a new section file inside the /sections directory of the theme. For example, you can name it video-section.liquid. In this file, you define a schema using Shopify"s JSON schema format. The schema describes the settings that will appear in the Theme Editor. In this case, the schema includes a field for a video URL, a poster image, and options for autoplay and looping. These settings are what users will use to control the behavior of the video when they add the section to a page.
{% schema %}
{
"name": "Video Section",
"settings": [
{
"id": "video_url",
"type": "url",
"label": "Video URL"
},
{
"id": "poster",
"type": "image_picker",
"label": "Poster Image"
},
{
"id": "autoplay",
"type": "checkbox",
"label": "Autoplay",
"default": false
},
{
"id": "loop",
"type": "checkbox",
"label": "Loop Video",
"default": false
}
],
"presets": [
{ "name": "Video Section" }
]
}
{% endschema %}
Add Markup for Video Playback
Once the schema is defined, the next part of the same file contains the markup that displays the video on the storefront. This is done using the HTML <video> element combined with Liquid code to insert the values from the schema. The Liquid expressions read the values entered by the merchant in the Theme Editor and apply them to the attributes of the <video> tag.
For example, the video URL chosen in the editor is inserted into the <source> element, and the poster image is used as the placeholder before playback starts. This step connects the settings defined in the schema with the actual video that appears to customers.
<div class="shopify-video-section">
<video
{% if section.settings.autoplay %} autoplay muted {% endif %}
{% if section.settings.loop %} loop {% endif %}
controls
poster="{{ section.settings.poster | img_url: '1024x' }}">
<source src="{{ section.settings.video_url }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Add Styling (Optional)
The video element will render without any styling, but it may not adapt well to different screen sizes. Adding CSS ensures that the video scales correctly and fits within the layout of the theme. A simple rule to make the video width responsive can be added in the theme"s stylesheet or inline in the section file. This ensures that the video looks consistent across devices such as desktops, tablets, and phones.
.shopify-video-section video {
width: 100%;
height: auto;
display: block;
}
Enable Section in Theme Editor
After the section file has been created and markup added, the section becomes available in the Shopify Theme Editor. From the admin panel, when you go to Online Store → Themes → Customize, the new video section will appear as an option to add to supported templates. Merchants can then insert the section, enter the video URL, upload a poster image, and configure playback options.
Optimizing Video Playback
Videos can vary in size and format, so it is important to handle them properly. Short videos can be uploaded directly and served from Shopify"s CDN. Larger files are better hosted externally on services like AWS S3, Cloudflare, Vimeo, or YouTube, and then embedded via URL. Using a poster image prevents a blank screen from appearing before playback. Autoplay should be muted to comply with browser policies. These ensure that the video loads efficiently and behaves consistently across different browsers.