Why is my video background code not working on my new website?

Topic summary

Issue: Users are encountering an error when trying to implement a video background feature on Shopify following a YouTube tutorial. The error message states: “Invalid preset: cannot include blocks in preset because there are no blocks defined.”

Root Cause: The problem appears to be in the schema section of the code, specifically within the “presets” configuration where blocks are being referenced incorrectly.

Proposed Solution:

  • Locate the {% schema %} section in the code
  • Find the “presets” area
  • Remove the entire block definition for “Video Background” (including nested sections)
  • Double-check for typos or missing curly braces
  • Consider using Shopify’s online theme editor for easier management

Status: Multiple users report experiencing the identical issue. One user provided a fix that was acknowledged positively, though no confirmation of successful resolution has been posted yet.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

I have a code for your shopify system. Following the tutorial and support guidance, I did everything step by step, but after I’m done creating the file and editing it with the script below, then trying to save it, it gives me an error:

Unable to update the file

  • Invalid preset “{“en”=>“Video Background”}”: cannot include blocks in preset because there are no blocks defined.

So I don’t know what to do at this point. I really need this feature for my website, because my business is migrating from Wix to Shopify. Heres the tutorial (https://www.youtube.com/watch?v=wajvd9oL9Zg)

{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% if block.type == ‘video’ %}

{%- if block.settings.video_link != blank -%}

{% endif %}
{% if block.settings.title != blank %}

{{ block.settings.title | escape }}

{% endif %}

{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}

{% if block.settings.text != blank %}

{{ block.settings.text }}
{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% else %}
{% if block.settings.title != blank %}

{{ block.settings.title | escape }}

{% endif %}

{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}

{% if block.settings.text != blank %}

{{ block.settings.text }}
{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% endif %} {%- endfor -%}

{% else %}

This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%} body.template-index .main-content .videoBackground { margin-top: -55px; } .videoBackground { position: relative; } .videoBackground .fullscreen-video-wrap { position: absolute; top: 0; left: 0; min-width: 100%; width: 100%; height: 100%; overflow: hidden; } .videoBackground .fullscreen-video-wrap .video-js { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; width: 100%; height: 100%; object-fit: cover; } .videoBackground .fullscreen-video-wrap video { min-height: 100%; min-width: 100%; object-fit: cover; } .videoBackground .videoBox { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 500px; max-height: 800px; height: calc(100vh - 165px); position: relative; } .videoBackground .imageBox { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; min-height: calc(100vh - 165px); height: auto; } .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo { z-index: 2; text-align: center; } .videoBackground .overlay { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 1; } .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 2px; padding: 8px 15px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: normal; font-size: 14px; margin-top: 20px; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { color: #FFF; font-size: 30px; line-height: 40px; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { max-width: 500px; margin: 0 auto; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { font-size: 18px; line-height: 28px; } .videoBackground .placeholderNoblocks { text-align: center; max-width: 500px; margin: 0 auto; } @media screen and (max-width: 767px) { body.template-index .main-content .videoBackground { margin-top: -35px; } .videoBackground .fullscreen-video-wrap { z-index: 3; } .videoBackground .videoBox { min-height: 500px; height: 100%; position: relative; padding: 0; } .videoBackground .fullscreen-video-wrap { position: relative; min-height: 300px; } .videoBackground .videoBoxInfo { padding: 40px 20px; background: #000; width: 100%; } }

{% schema %}
{
“name”: {
“en”: “Video Background”
},
“class”: “videoBackground”,
“max_blocks”: 1,
“blocks”: [
{
“type”: “video”,
“name”: “Video”,
“settings”: [
{
“type”: “url”,
“id”: “video_link”,
“label”: {
“en”: “Video link”
}
},
{
“type”: “image_picker”,
“id”: “video_image”,
“label”: {
“en”: “Cover image”
}
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: {
“en”: “Overlay opacity”
},
“min”: 0,
“max”: 99,
“step”: 1,
“unit”: {
“en”: “%”
},
“default”: 0
},
{
“type”: “header”,
“content”: {
“en”: “Text”
}
},
{
“type”: “text”,
“id”: “title”,
“label”: {
“en”: “Heading”
},
“default”: “Video slide”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: {
“en”: “Description”
},
“default”: {
“en”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.


}
},
{
“type”: “color”,
“id”: “color_text”,
“label”: {
“en”: “Text color”
},
“default”: “#ffffff
},
{
“type”: “text”,
“id”: “button_label”,
“label”: {
“en”: “Button label”
}
},
{
“type”: “url”,
“id”: “button_link”,
“label”: {
“en”: “Button link”
}
},
{
“type”: “color”,
“id”: “color_btn_bg”,
“label”: {
“en”: “Background button color”
},
“default”: “#ffffff
},
{
“type”: “color”,
“id”: “color_btn_text”,
“label”: {
“en”: “Button text color”
},
“default”: “#ffffff
}
]
},
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “color”,
“id”: “color_bg”,
“label”: {
“en”: “Background color (optional)”
},
“default”: “#16165b
},
{
“type”: “image_picker”,
“id”: “image_bg”,
“label”: {
“en”: “or use an image (required)”
}
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: {
“en”: “Overlay opacity”
},
“min”: 0,
“max”: 99,
“step”: 1,
“unit”: {
“en”: “%”
},
“default”: 0
},
{
“type”: “header”,
“content”: {
“en”: “Text”
}
},
{
“type”: “text”,
“id”: “title”,
“default”: “Image slide”,
“label”: {
“en”: “Heading”
}
},
{
“type”: “richtext”,
“id”: “text”,
“label”: {
“en”: “Description”
},
“default”: {
“en”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.


}
},
{
“type”: “color”,
“id”: “color_text”,
“label”: {
“en”: “Text color”
},
“default”: “#ffffff
},
{
“type”: “text”,
“id”: “button_label”,
“label”: {
“en”: “Button label”
}
},
{
“type”: “url”,
“id”: “button_link”,
“label”: {
“en”: “Button link”
}
},
{
“type”: “color”,
“id”: “color_btn_bg”,
“label”: {
“en”: “Background button color”
},
“default”: “#ffffff
},
{
“type”: “color”,
“id”: “color_btn_text”,
“label”: {
“en”: “Button text color”
},
“default”: “#ffffff
}
]
}
],
“presets”: [
{
“name”: {
“en”: “Video Background”
},
“category”: {
“en”: “Main”
},
“blocks”: [
{
“type”: “video”
}
]
}
]
}
{% endschema %}

Hi, I have exact the same issue with the same code on both of my shopify stores

Shopify please help!!!

I’m having the exact same issue too. Any input is appreciated

Here’s how to fix the code:

Locate the line {% schema %} in your code.
Find the section labeled “presets”.
Inside “presets”, remove the entire block definition for “Video Background” (including nested sections like “blocks”).
Additional Tips:

Make sure you’re following the specific instructions for your theme and the tutorial you linked.
Double-check for typos or missing curly braces ({}).
Consider using Shopify’s online theme editor for easier code management.
Once you’ve corrected the schema section, try saving the file again. The error message should disappear, and you should be able to create the video background section in your Shopify theme.

Thanks for this.