Re: HTML Error notification - Please help!

HTML Error notification - Please help!

BonFeet
Tourist
22 0 2

Hi!

I was entering some info in my pages and wanted to change some things in the theme editor where I receive a notification in the theme editor that there is damaged HTML code detected in the sections/page.liquid can someone tell me what the error is and where and how to fix it? I am not very familiar with coding so i greatly appreciate any help you can give me. Please see below the code i copied and pasted..

Many thanks!!//Lise

 

{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
<h2 class="page-title {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.page.title != blank -%}
{{ section.settings.page.title | escape }}
{%- else -%}
{{ 'sections.page.title' | t }}
{%- endif -%}
</h2>
<div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.page.content != blank -%}
{{ section.settings.page.content }}
{%- else -%}
<div class="page-placeholder-wrapper placeholder">
{{ 'page' | placeholder_svg_tag: 'page-placeholder' }}
</div>
{%- endif -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.page.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "page",
"id": "page",
"label": "t:sections.page.settings.page.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.page.presets.name"
}
]
}
{% endschema %}

Replies 11 (11)

ChiragPatel2911
Shopify Partner
57 10 8

@BonFeet 

 

If possible can you please share a screenshot of the error?

I use your same code in my dawn theme and there is not error occurred in my demo store. https://prnt.sc/LX8BNM2GGrYx

 

https://prnt.sc/OWHX0eJXqwJU

 

If possible please share the screenshot of the error so I can identity it.

 

Best Regards,
Chirag Patel (COO - Cirkle Studio PVT LTD)
chirag@cirklestudio.co
BonFeet
Tourist
22 0 2

Screenshot 2025-02-05 at 16.06.00.png

Screenshot 2025-02-05 at 16.06.00.png

BonFeet
Tourist
22 0 2

It was fixed with the help of shopify. it was an issue with description of the collection and a page that was linked to the theme that were conflicting.

LizHoang
Shopify Partner
1251 159 195

Hi @BonFeet 

 

Would you mind sharing with us the screenshot of the error to check further? 

 

For the code, you can try this code to see if the issue is resolved. I have made some some improvements for clarity and potential fixing of syntax issues:

 

{{ 'section-main-page.css' | asset_url | stylesheet_tag }}  

{%- style -%}  
.section-{{ section.id }}-padding {  
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;  
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;  
}  

@media screen and (min-width: 750px) {  
    .section-{{ section.id }}-padding {  
        padding-top: {{ section.settings.padding_top }}px;  
        padding-bottom: {{ section.settings.padding_bottom }}px;  
    }  
}  
{%- endstyle -%}  

<div class="color-{{ section.settings.color_scheme }} gradient">  
    <div class="page-width page-width--narrow section-{{ section.id }}-padding">  
        <h2 class="page-title {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">  
            {%- if section.settings.page.title != blank -%}  
                {{ section.settings.page.title | escape }}  
            {%- else -%}  
                {{ 'sections.page.title' | t }}  
            {%- endif -%}  
        </h2>  
        <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">  
            {%- if section.settings.page.content != blank -%}  
                {{ section.settings.page.content }}  
            {%- else -%}  
                <div class="page-placeholder-wrapper placeholder">  
                    {{ 'page' | placeholder_svg_tag: 'page-placeholder' }}  
                </div>  
            {%- endif -%}  
        </div>  
    </div>  
</div>  

{% schema %}  
{  
    "name": "t:sections.page.name",  
    "tag": "section",  
    "class": "section",  
    "disabled_on": {  
        "groups": ["header", "footer"]  
    },  
    "settings": [  
        {  
            "type": "page",  
            "id": "page",  
            "label": "t:sections.page.settings.page.label"  
        },  
        {  
            "type": "select",  
            "id": "heading_size",  
            "options": [  
                {  
                    "value": "h2",  
                    "label": "t:sections.all.heading_size.options__1.label"  
                },  
                {  
                    "value": "h1",  
                    "label": "t:sections.all.heading_size.options__2.label"  
                },  
                {  
                    "value": "h0",  
                    "label": "t:sections.all.heading_size.options__3.label"  
                },  
                {  
                    "value": "hxl",  
                    "label": "t:sections.all.heading_size.options__4.label"  
                },  
                {  
                    "value": "hxxl",  
                    "label": "t:sections.all.heading_size.options__5.label"  
                }  
            ],  
            "default": "h1",  
            "label": "t:sections.all.heading_size.label"  
        },  
        {  
            "type": "color_scheme",  
            "id": "color_scheme",  
            "label": "t:sections.all.colors.label",  
            "default": "scheme-1"  
        },  
        {  
            "type": "header",  
            "content": "t:sections.all.padding.section_padding_heading"  
        },  
        {  
            "type": "range",  
            "id": "padding_top",  
            "min": 0,  
            "max": 100,  
            "step": 4,  
            "unit": "px",  
            "label": "t:sections.all.padding.padding_top",  
            "default": 36  
        },  
        {  
            "type": "range",  
            "id": "padding_bottom",  
            "min": 0,  
            "max": 100,  
            "step": 4,  
            "unit": "px",  
            "label": "t:sections.all.padding.padding_bottom",  
            "default": 36  
        }  
    ],  
    "presets": [  
        {  
            "name": "t:sections.page.presets.name"  
        }  
    ]  
}  
{% endschema %}  

 

I hope it helps. 

 

Best regards, 

 

Liz

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program
BonFeet
Tourist
22 0 2

Screenshot 2025-02-05 at 16.06.00.png

BonFeet
Tourist
22 0 2

Hi Liz, 

 

Thanks for your code, i have replaced the code in the theme for your code, but i still get the same error. I have sent you a screenshot of the error displayed earlier. Hope you can help!

Many thanks!

BonFeet
Tourist
22 0 2

Hi Liz, 

I copied the code from an earlier copy of the theme that did not display the error. Can you see if there is any difference? Maybe I can copy this code into the theme that is published now?

 

Thanks!

 

{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
<h2 class="page-title {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.page.title != blank -%}
{{ section.settings.page.title | escape }}
{%- else -%}
{{ 'sections.page.title' | t }}
{%- endif -%}
</h2>
<div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.page.content != blank -%}
{{ section.settings.page.content }}
{%- else -%}
<div class="page-placeholder-wrapper placeholder">
{{ 'page' | placeholder_svg_tag: 'page-placeholder' }}
</div>
{%- endif -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.page.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "page",
"id": "page",
"label": "t:sections.page.settings.page.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.page.presets.name"
}
]
}
{% endschema %}

mohan610
Shopify Partner
32 3 5

 

<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
<h2 class="page-title {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.page.title != blank -%}
{{ section.settings.page.title | escape }}
{%- else -%}
{{ 'sections.page.title' | t }}
{%- endif -%}
</h2>
<div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.page.content != blank -%}
{{ section.settings.page.content }}
{%- else -%}
<div class="page-placeholder-wrapper placeholder">
{{ 'page' | placeholder_svg_tag: 'page-placeholder' }}
</div>
{%- endif -%}
</div>
</div>
</div>



Please review the code, and use format liquid option at top right corner on code editor. Make sure all the HTML tag are closed properly.

➜ Solved it? Hit Like and Accept solution!
➜ Optimize/Customize your Store with Volume/Tier Discount
➜ Need a Shopify developer? Hire me at Upwork OR Everythinginhand

DaisyVo
Shopify Partner
4385 486 579

Hi @BonFeet 

 

Please share error image

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
BonFeet
Tourist
22 0 2

Screenshot 2025-02-05 at 16.06.00.png

DaisyVo
Shopify Partner
4385 486 579

Hi @BonFeet 

 

Have you updated your theme recently?

Sometimes theme updates will cause errors

 

Or right before the error occurred, do you remember what you edited?

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution