Urgent Help Needed: Error Code - Unable to Update File, Invalid Video Background JSON Preset

jjice
Visitor
1 0 4

What could be causing the error message "Unable to update the file: Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined" when attempting to create a new section for Video Background JSON? File name video-background.json. The code is attached. Thank you Kindly to someone who will answer.

{%- 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' %}
 
<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">
 
 
 
{%- if block.settings.video_link != blank -%}
 
<div class="fullscreen-video-wrap">
 
<video class="video-js" loop autoplay preload="none" muted playsinline
 
poster="https:{{ block.settings.video_image | img_url: 'master' }}">
 
<source src="{{ block.settings.video_link }}" type="video/mp4">
 
</video>
 
</div>
 
{% endif %}
 
 
 
 
<div class="videoBoxInfo">
 
{% if block.settings.title != blank %}
 
<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.title | escape }}
 
</h1>
 
{% endif %}
 
 
 
{%- style -%}
 
.videoBackground .imageBoxInfoDescription p {
 
color: {{ block.settings.color_text }}!important;
 
}
 
{%- endstyle -%}
 
 
 
{% if block.settings.text != blank %}
 
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.text }}
 
</div>
 
{% endif %}
 
 
 
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
 
<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
 
{{ block.settings.button_label | escape }}
 
</a>
 
{% endif %}
 
</div>
 
</div>
 
{% else %}
 
<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
 
 
 
 
 
 
<div class="imageBoxInfo">
 
{% if block.settings.title != blank %}
 
<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.title | escape }}
 
</h1>
 
{% endif %}
 
 
 
{%- style -%}
 
.videoBackground .imageBoxInfoDescription p {
 
color: {{ block.settings.color_text }}!important;
 
}
 
{%- endstyle -%}
 
 
 
{% if block.settings.text != blank %}
 
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.text }}
 
</div>
 
{% endif %}
 
 
 
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
 
<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
 
{{ block.settings.button_label | escape }}
 
</a>
 
{% endif %}
 
</div>
 
</div>
 
{% endif %}
 
{%- endfor -%}
 
 
 
{% else %}
 
<div class="placeholderNoblocks">
 
This section doesn’t currently include any content. Add content to this section using the sidebar.
 
    </div>
 
{%- endif -%}
 
 
 
<style>
 
.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;
  
margin: auto;
 
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: 10px 30px;
 
font-style: normal;
 
font-weight: normal;
 
letter-spacing: 0.06em;
 
white-space: normal;
 
font-size: 16px;
 
margin-top: 20px;
 
}
 
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
 
color: #FFF;
  
font-size: 65px;
 
line-height: 40px;
 
}
 
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
 
max-width: 500px;
 
margin: 0 auto;
 
}
 
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
  
font-size: 17px;
 
line-height: 28px;
 
}
 
.videoBackground .placeholderNoblocks {
 
text-align: center;
 
max-width: 500px;
 
margin: 0 auto;
 
}
 
    @media screen and (max-width: 767px) {
 
.main-content .videoBackground {
 
margin-top: -35px;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
z-index: 3;
 
}
 
.videoBackground .videoBox {
 
min-height: 300px;
 
height: 100%;
 
position: relative;
 
padding: 0;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
position: relative;
 
min-height: 300px;
 
z-index: -2;
 
}
 
.videoBackground .videoBoxInfo {
 
padding: 2px 20px;
 
width: 100%;
 
}
 
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
display: none;
 
}
 
    }
 
</style>
 
 
 
{% 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": "header",
 
"content": {
 
"en": "Text"
 
}
 
},
 
{
 
"type": "text",
 
"id": "title",
 
"label": {
 
"en": "Heading"
 
},
 
"default": "Video slide"
 
},
 
{
 
"type": "richtext",
 
"id": "text",
 
"label": {
 
"en": "Description"
 
},
 
"default": {
 
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
 
}
 
},
 
{
 
"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": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
 
}
 
},
 
{
 
"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 %}

 

 

Replies 13 (13)

YouWish
Shopify Partner
6 0 2

I'm having the same problem. I copied the code from a section that came with the Shopify theme that I'm using, in order to make my own section. The only part of the code that I changed was the name. I got the same error: 

  • Invalid preset "name of my section": cannot include blocks in preset because there are no blocks defined.

It's even stranger because I've already done this with two copies of a section and it worked perfectly...

Any solutions?

terrehelpdesk
Visitor
1 0 0

I've only started having this problem yesterday. Could there be a glitch in the website?

TheThisThat
Shopify Partner
61 3 17

I just duplicated a section and pasted it into a new file and got same error "cannot include blocks in preset because there are no blocks defined." I think there is a bug. 

a little of this and a little of that
YouWish
Shopify Partner
6 0 2

I'm still getting the same error. Can you help with this, Shopify?

TheThisThat
Shopify Partner
61 3 17

I just duplicated a section and pasted it into a new file and got same error "cannot include blocks in preset because there are no blocks defined." I think there is a bug. 

a little of this and a little of that

dev22
Shopify Partner
34 1 10

I am having this same issue

Added a section, copied code over from the original file to make some edits, changed the file name, hit save, and boom. Same error.

Would this be the theme I am using? (Avenue) Or Shopify?

YouWish
Shopify Partner
6 0 2

Hmm, I am also using Avenue theme. The issue is probably from them.

YouWish
Shopify Partner
6 0 2

Never mind. It's a Shopify issue because the problem is also on the Dawn theme...

htea
Shopify Partner
16 0 11

This is a Shopify issue. It's happening to me on all themes even though I know the code is fine.  Wow 5 days and they haven't solved it yet... that's bad

Dela12
Shopify Partner
4 0 2

Having the same problem here on my end. Nothing wrong with the code, just a problem with saving duplicated sections.

How can we get this sorted out asap?

ttitoo
Shopify Partner
1 0 0

Had the same issue, but finally resolved.
In my situation, I have multiple stores, and shopify-cli has a global context to persist the current store and I think I mixed them up.
If you have multiple store to dev, try this:
1. Confirm the current context of shopify, by "shopify theme info", that will tell you which store is selected
2. Change to your desire store by "shopify theme pull -s xxx" if it's not the store in previous step.
3. List all the themes of the store by "shopify theme list", you will find a "Development" at the bottom
4. Delete that theme by its id.
5. Restart the dev.

 

Now I realized the best practice is always specify the --store(-s) option to every shopify command to ensure you set the correct store.


shopify dev command has a "--environment" option, maybe it's another way to this question, not sure.

dev22
Shopify Partner
34 1 10

I am not using Shopify CLI. Just plain copy / paste

5tyr3n
Visitor
1 0 1

I'm going to wait this out, there is a lot of other people having the same problem.