HEY, I could need some help i keep getting this error after trying to safe this custom code:
I went to >Section> created animatedsection.liquid > and keep getting this error "
Unable to update the file
- Liquid syntax error (line 380): Unknown tag ‘endschema’ "
THE CODE IS:
{% assign firstImage = section.settings.img_1 %}
{% assign secondImage = section.settings.img_2 %}
{% if section.settings.slide_image %}
![{{ section.settings.img_1.alt }}]()
{% else %}
{% if section.settings.img_1 !=blank %}
![{{ section.settings.img_1.alt }}]()
{% endif %}
{% if section.settings.img_2 !=blank %}
<img class="secondImage" alt="{{ section.settings.img_2.alt }}"
srcset="{% if firstImage.width >= 493 %} {{ firstImage| img_url:'493x' }} 493w,
{% endif %}
{% if secondImage.width >= 600 %}{{ secondImage| img_url: '600x' }} 600w, {%
endif %}
{% if secondImage.width >= 713 %}{{ secondImage| img_url: '713x' }} 713w, {%
endif %}
{% if secondImage.width >= 823 %}{{ secondImage| img_url: '823x' }} 823w, {%
endif %}
{% if secondImage.width >= 990 %}{{ secondImage| img_url: '990x' }} 990w, {%
endif %}
{% if secondImage.width >= 1100%}{{ secondImage| img_url: '1100x' }} 1100w, {%
endif %}
{% if secondImage.width >= 1206 %}{{ secondImage| img_url: '1206x' }} 1206w, {%
endif %}
{% if secondImage.width >= 1346 %}{{ secondImage| img_url: '1346x' }} 1346w, {%
endif %}
{% if secondImage.width >= 1426 %}{{ secondImage| img_url: '1426x' }} 1426w, {%
endif %}
{% if secondImage.width >= 1646 %}{{ secondImage| img_url: '1646x' }} 1646w, {%
endif %}
{% if secondImage.width >= 1946 %}{{ secondImage| img_url: '1946x' }} 1946w, {%
endif %}
{{ secondImage | img_url: 'master' }} {{ secondImage }} w"
loading="lazy"
width="973"
{% endif %}
{% endif %}
{% if secion.settings.title != blank %}
{{ section.settings.title }}
{% endif
%}
{{ section.settings.description }}
{% if section.settings.button_link and section.settings.button != blank %}
{{ section.settings.button}}
{% endif %}
.animatedContainer {
width:100%;
padding:5% 10%;
display: flex;
gap: 40px
position: realive;
justify-content:space-between;
align-items: center;
background: {{ section.settings.section_bg}};
}
.imagesContainer {
display: flex;
align-items:center;
flex: 0 1 50%;
margin-left: -15 rem
margin-bottom:5 rem
}
.imagesContainer > a > img {
width: 100%;
}
.imagesContainer .slideLink {
z-index: 1;
}
.imagesContainer .firstLink {
z-index: 1;
flex: 0 1 50%;
transform: translate (50px, 50px);
}
.imagesContainer .secondLink {
flex: 0 1 50%;
z-index: 1;
}
.textContainer {
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 43%;
flex: 0 1 43%;
align-items: center;
}
.textContainer h1 {
font-sytle: normal;
font-weight: 700;
margin: 0;
}
.textContainer p {
text-align: center;
}
.textContainer a {
text-decoration: none;
padding:10x 20x;
border:2 px solid {{section.settings.selection_text}};
display: inline-block;
width: max-content;
border-radius: 0 rem;
}
.button-- primary {
color: white;
blackground: {{section.settings.section_text}};
}
.button--secondary {
color:{{section.settings.section_text}};
}
.slide--left {
flex-direction: row-reverse;
}
.slide--right {
flex-direction: row;
}
.section-animation .slide--left {
transiton : margin- left is cubic-bezier(.215,.61,.355,1);
animation: slideFromLeft Is cubic-bezier(.215,.61,. 355,1);
}
.section-animation .slide--right {
transiton : margin- left is cubic- bezier (.215,.61,.355,1);
animation: slideFromRight Is cubic-bezier(.215,.61,. 355,1);
}
.section-animation. firstLink{
transition: opacity .5s ease, width 1s ease, transform .5s cubic-bezier (2., .06,. 05, .95);
animation: fade-in .6s ease, first-image .6s cubic-bezier(.2, . 06, .05, .95);
}
.section-animation. secondLink{
transition: opacity .5s ease, width 1s ease, transform .5s cubic-bezier (2., .06,. 05, .95);
animation: fade-in .6s ease, second-image .6s cubic-bezier(.2, . 06, .05 .95);
}
.section-animation .textContainer {
transition: opactiy .9s cubic- bezier (.04, 0, .2, 1), transform .9s cubic-
bezier (.04, 0, .2, 1);
animation: move-up .8s ease;
}
@keyframes slideFromLeft {
0% {
opacity: 0;
margin-left: 5%;
}
100% {
opacity: 1;
margin- left: 0;
}
}
@keyframes slideFromRight{
0% {
opacity: 0;
margin-left: -5%;
}
100%{
opacity: 1 ;
margin-left:0 ;
}
}
@keyframes first-image {
0% {
transform: translate(-50px, 50px);
}
100%{
transform: translate(50px, 50px);
}
}
@keyframes second-image {
0% {
transform: translateX (50px);
}
100%{
transform: translate (0);
}
}
@keyframes fade-in{
0% {
opacity: 0;
width. 110%;
}
100% { opacity: 1;
width: 100%;}
}
}
@keyframes move-up {
0% {
opacity: 0;
transform: translateY (100px);
}
100% {
opacity: 1;
transform: translateY (0px);
}
}
@media only screen and (max-width: 900px) {
.animatedContainer {
flex-direction: column !important;
padding: 5% 8%;
}
.imagesContainer {
width: 100%;
}
.textContainer {
width: 100%;
padding: 0 5%;
}
}
“settings”: [
{
“type”:“select”,
“id”: “placement”,
“default”: “row”,
“label”: “Placement of the items”
“options”: [
{
“value”: “row-reverse”
“label”: “Image to right”
},
{
“value”: “row”,
“label”: “Image to left”
}
]
},
{
“type”: “image_picker”,
“id”: “img_1”,
“label”: “First image”
},
{
“type”:“url”,
“id”: “img_1_link”,
“label”: " First image link"
},
{
“type”:“image_picker”,
“id”: “img_2_link”,
“label”: " Second image"
{
“type”: “url”,
“id”: “img_2_link”,
“label”: “Seond image link”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”
},
{
“type:” “richtext”,
“id”: “description”,
“label”: “Description”
},
{
“type”: " color",
“id”: “section_bg”,
“default”: “#FFFFFF”,
“label”:" Section background"
},
{
“type”: “color”
“id”: “section_text”,
“default”: “#000”,
“label”: “section text color”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “Button link”
},
{
“type”: “text”,
“id”: “button”,
“label”: “Button label”
},
{
“type”: “select”
“id”: “button_style”,
“default”: “button–primary”,
“label”: “Button style”,
“options”: [
{
“value”: “button–primary”,
“label”: “Primary button”
},
{
“value”: “button–secondary”,
“label”: “Secondary button”
}
]
}
],
“presets”:[
{
“name”: “Animated Section”
}
]
}
<div class="animatedContainer" id="animated--{{ section.id }}" style=background:
{{ section.setting.section_bg }}; flex-direction:{{ section.settings.placement}}
">
{% assign firstImage = section.settings.img_1 %}
{% assign secondImage = section.settings.img_2 %}
{% if section.settings.slide_image %}
<a {% if section.settings.img_1_link !=blank %} href="
{{ section.settings.img_1_link }}" {% endif %}
class="slideLink {% if section.settings.placement == ‘row-reverse’ %}"slide–
left {% else %} slide–right {% endif %}
style= “width: 100%”>
<img class="slideimage "
style=“width: 100%” alt=“{{ section.settings.img_1.alt }}”
srcset="{% if firstImage.width >= 493 %} {{ firstImage | img_url: ‘493x’}} 493w,
{% endif %}
{% if firstImage.width >= 600 %}{{ firstImage | img_url: ‘600x’ }} 600w,{% endif
%}
{% if firstImage.width >= 713 %}{{ firstImage | img_url: ‘713x’ }} 713w,{% endif
%}
{% if firstImage.width >= 823 %}{{ firstImage | img_url: ‘823x’ }} 823w,{% endif
%}
{% if firstImage.width >= 990 %}{{ firstImage | img_url: ‘990x’ }} 990w,{% endif
%}
{% if firstImage.width >= 1100 %}{{ firstImage | img_url: ‘1100x’ }} 1100w,{% endif
%}
{% if firstImage.width >= 1206 %}{{ firstImage | img_url: ‘1206x’ }} 1206w,{% endif
%}
{% if firstImage.width >= 1346 %}{{ firstImage | img_url: ‘1346x’ }} 1346w,{% endif
%}
{% if firstImage.width >= 1426 %}{{ firstImage | img_url: ‘1426x’ }} 1426w,{% endif
%}
{% if firstImage.width >= 1646 %}{{ firstImage | img_url: ‘1646x’ }} 1646w,{% endif
%}
{% if firstImage.width >= 1946 %}{{ firstImage | img_url: ‘1946x’ }} 1946w,{% endif
%}
{{ firstImage | img_url: ‘master’}} {{ firstImage }} w"
src=“{{ firstImage | img_url: ‘1946x’ }}”
loading=“lazy”
width=“973”>
{% else %}
{% if section.settings.img_1 !=blank %}
<a {% if section.settings.img_1_link !=blank %} href="
{{ section.settings.img_1_link}}" {% endif %} class=“firstLink”>
<img class=“firstImage” alt=“{{ section.settings.img_1.alt }}”
srcset="{% if firstImage.width >= 493 %}{{ firstImage| img_url:‘493’ }} 493w,
{% endif %}
{% if firstImage.width >= 600 %}{{ firstImage | img_url: ‘600x’ }} 600w,{% endif
%}
{% if firstImage.width >= 713 %}{{ firstImage | img_url: ‘713x’ }} 713w,{% endif
%}
{% if firstImage.width >= 823 %}{{ firstImage | img_url: ‘823x’ }} 823w,{% endif
%}
{% if firstImage.width >= 990 %}{{ firstImage | img_url: ‘990x’ }} 990w,{% endif
%}
{% if firstImage.width >= 1100 %}{{ firstImage | img_url: ‘1100x’ }} 1100w,{% endif
%}
{% if firstImage.width >= 1206 %}{{ firstImage | img_url: ‘1206x’ }} 1206w,{% endif
%}
{% if firstImage.width >= 1346 %}{{ firstImage | img_url: ‘1346x’ }} 1346w,{% endif
%}
{% if firstImage.width >= 1426 %}{{ firstImage | img_url: ‘1426x’ }} 1426w,{% endif
%}
{% if firstImage.width >= 1646 %}{{ firstImage | img_url: ‘1646x’ }} 1646w,{% endif
%}
{% if firstImage.width >= 1946 %}{{ firstImage | img_url: ‘1946x’ }} 1946w,{% endif
%}
{{ firstImage | img_url: ‘master’}} {{ firstImage }} w"
src=“{{ firstImage | img_url: ‘1946x’ }}”
loading=“lazy”
width=“973”>
{% endif %}
{% if section.settings.img_2 !=blank %}
<a {% if section.settings.img_2_link !=blank %} href="
{{ section.settings.img_2_link}}" {% endif %} class=“secondLink”>
<img class=“secondImage” alt=“{{ section.settings.img_2.alt }}”
srcset="{% if firstImage.width >= 493 %} {{ firstImage| img_url:‘493x’ }} 493w,
{% endif %}
{% if secondImage.width >= 600 %}{{ secondImage| img_url: ‘600x’ }} 600w, {%
endif %}
{% if secondImage.width >= 713 %}{{ secondImage| img_url: ‘713x’ }} 713w, {%
endif %}
{% if secondImage.width >= 823 %}{{ secondImage| img_url: ‘823x’ }} 823w, {%
endif %}
{% if secondImage.width >= 990 %}{{ secondImage| img_url: ‘990x’ }} 990w, {%
endif %}
{% if secondImage.width >= 1100%}{{ secondImage| img_url: ‘1100x’ }} 1100w, {%
endif %}
{% if secondImage.width >= 1206 %}{{ secondImage| img_url: ‘1206x’ }} 1206w, {%
endif %}
{% if secondImage.width >= 1346 %}{{ secondImage| img_url: ‘1346x’ }} 1346w, {%
endif %}
{% if secondImage.width >= 1426 %}{{ secondImage| img_url: ‘1426x’ }} 1426w, {%
endif %}
{% if secondImage.width >= 1646 %}{{ secondImage| img_url: ‘1646x’ }} 1646w, {%
endif %}
{% if secondImage.width >= 1946 %}{{ secondImage| img_url: ‘1946x’ }} 1946w, {%
endif %}
{{ secondImage | img_url: ‘master’ }} {{ secondImage }} w"
loading=“lazy”
width=“973”
{% endif %}
{% endif %}
{% if secion.settings.title != blank %} <h1 style="color:
{{section.settings.section_text}};"> {{ section.settings.title }} {% endif
%}
{{ section.settings.description }}
{% if section.settings.button_link and section.settings.button != blank %}
<a href=“{{ section.settings.button_link }}” class="
{{section.settings.button_style }}"> {{ section.settings.button}}
{% endif %}
.animatedContainer {
width:100%;
padding:5% 10%;
display: flex;
gap: 40px
position: realive;
justify-content:space-between;
align-items: center;
background: {{ section.settings.section_bg}};
}
.imagesContainer {
display: flex;
align-items:center;
flex: 0 1 50%;
margin-left: -15 rem
margin-bottom:5 rem
}
.imagesContainer > a > img {
width: 100%;
}
.imagesContainer .slideLink {
z-index: 1;
}
.imagesContainer .firstLink {
z-index: 1;
flex: 0 1 50%;
transform: translate (50px, 50px);
}
.imagesContainer .secondLink {
flex: 0 1 50%;
z-index: 1;
}
.textContainer {
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 43%;
flex: 0 1 43%;
align-items: center;
}
.textContainer h1 {
font-sytle: normal;
font-weight: 700;
margin: 0;
}
.textContainer p {
text-align: center;
}
.textContainer a {
text-decoration: none;
padding:10x 20x;
border:2 px solid {{section.settings.selection_text}};
display: inline-block;
width: max-content;
border-radius: 0 rem;
}
.button-- primary {
color: white;
blackground: {{section.settings.section_text}};
}
.button--secondary {
color:{{section.settings.section_text}};
}
.slide--left {
flex-direction: row-reverse;
}
.slide--right {
flex-direction: row;
}
.section-animation .slide--left {
transiton : margin- left is cubic-bezier(.215,.61,.355,1);
animation: slideFromLeft Is cubic-bezier(.215,.61,. 355,1);
}
.section-animation .slide--right {
transiton : margin- left is cubic- bezier (.215,.61,.355,1);
animation: slideFromRight Is cubic-bezier(.215,.61,. 355,1);
}
.section-animation. firstLink{
transition: opacity .5s ease, width 1s ease, transform .5s cubic-bezier (2., .06,. 05, .95);
animation: fade-in .6s ease, first-image .6s cubic-bezier(.2, . 06, .05, .95);
}
.section-animation. secondLink{
transition: opacity .5s ease, width 1s ease, transform .5s cubic-bezier (2., .06,. 05, .95);
animation: fade-in .6s ease, second-image .6s cubic-bezier(.2, . 06, .05 .95);
}
.section-animation .textContainer {
transition: opactiy .9s cubic- bezier (.04, 0, .2, 1), transform .9s cubic-
bezier (.04, 0, .2, 1);
animation: move-up .8s ease;
}
@keyframes slideFromLeft {
0% {
opacity: 0;
margin-left: 5%;
}
100% {
opacity: 1;
margin- left: 0;
}
}
@keyframes slideFromRight{
0% {
opacity: 0;
margin-left: -5%;
}
100%{
opacity: 1 ;
margin-left:0 ;
}
}
@keyframes first-image {
0% {
transform: translate(-50px, 50px);
}
100%{
transform: translate(50px, 50px);
}
}
@keyframes second-image {
0% {
transform: translateX (50px);
}
100%{
transform: translate (0);
}
}
@keyframes fade-in{
0% {
opacity: 0;
width. 110%;
}
100% { opacity: 1;
width: 100%;}
}
}
@keyframes move-up {
0% {
opacity: 0;
transform: translateY (100px);
}
100% {
opacity: 1;
transform: translateY (0px);
}
}
@media only screen and (max-width: 900px) {
.animatedContainer {
flex-direction: column !important;
padding: 5% 8%;
}
.imagesContainer {
width: 100%;
}
.textContainer {
width: 100%;
padding: 0 5%;
}
}
"settings": [
{
"type":"select",
"id": "placement",
"default": "row",
"label": "Placement of the items"
"options": [
{
"value": "row-reverse"
"label": "Image to right"
},
{
"value": "row",
"label": "Image to left"
}
]
},
{
"type": "image_picker",
"id": "img_1",
"label": "First image"
},
{
"type":"url",
"id": "img_1_link",
"label": " First image link"
},
{
"type":"image_picker",
"id": "img_2_link",
"label": " Second image"
{
"type": "url",
"id": "img_2_link",
"label": "Seond image link"
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type:" "richtext",
"id": "description",
"label": "Description"
},
{
"type": " color",
"id": "section_bg",
"default": "#FFFFFF",
"label":" Section background"
},
{
"type": "color"
"id": "section_text",
"default": "#000",
"label": "section text color"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "text",
"id": "button",
"label": "Button label"
},
{
"type": "select"
"id": "button_style",
"default": "button--primary",
"label": "Button style",
"options": [
{
"value": "button--primary",
"label": "Primary button"
},
{
"value": "button--secondary",
"label": "Secondary button"
}
]
}
],
"presets":[
{
"name": "Animated Section"
}
]
}
{%endschema%}