Help, I need to fix code error 'Attempting to close HtmlElement 'body' before HtmlElement 'style'...

SassInnes · ‎11-22-2024

Can anyone help me tidy up an code error I'm getting in the theme.liquid of the site I'm building?

It's at the bottom and saying 'Attempting to close HtmlElement 'body' before HtmlElement 'style' was closed.

Screenshots attached. URL is https://flippin-tables-rubs.myshopify.com/

password skahmo

anupam1607 · ‎11-23-2024

This error typically occurs when the HTML structure in your theme.liquid file is not correctly nested, i.e., a </body> tag is closed before a </style> tag that should have been closed earlier. This breaks the HTML structure and can cause issues in rendering the page.

Here’s how the bottom of your theme.liquid file should look:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Shopify Store</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Store</h1>
    <!-- Other content -->
</body>
</html>

Also Search for Unintended Code Injection: If you're dynamically injecting code via Liquid, ensure no unclosed <style> tags are added.

{% if some_condition %}
    <style>
        .custom-class {
            color: red;
        }
    </style>
{% endif %}

It will cause the error if you have below coding structure.

<body>
    <style>
        /* Styles here */
</body>
</style>

Fix the Code Ensure the <style> tag or any other tag which is properly closed before closing the <body> tag.

Buy me a coffee.☕
- Was your question answered? Mark it as an Accepted Solution. ❤️
- Don't forget to give me Thumbs Up.
- Store, Product and Collection Modifications | Apps and Sales Channel | Animation
- Lets connect anupammistry1607@gmail.com 

View solution in original post

anupam1607 · ‎11-23-2024

Hey @SassInnes

This error typically occurs when the HTML structure in your theme.liquid file is not correctly nested, i.e., a </body> tag is closed before a </style> tag that should have been closed earlier. This breaks the HTML structure and can cause issues in rendering the page.

Here’s how the bottom of your theme.liquid file should look:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Shopify Store</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Store</h1>
    <!-- Other content -->
</body>
</html>

Also Search for Unintended Code Injection: If you're dynamically injecting code via Liquid, ensure no unclosed <style> tags are added.

{% if some_condition %}
    <style>
        .custom-class {
            color: red;
        }
    </style>
{% endif %}

It will cause the error if you have below coding structure.

<body>
    <style>
        /* Styles here */
</body>
</style>

Fix the Code Ensure the <style> tag or any other tag which is properly closed before closing the <body> tag.

Buy me a coffee.☕
- Was your question answered? Mark it as an Accepted Solution. ❤️
- Don't forget to give me Thumbs Up.
- Store, Product and Collection Modifications | Apps and Sales Channel | Animation
- Lets connect anupammistry1607@gmail.com 

SassInnes · ‎11-23-2024

thank you! that worked 🙂

Help, I need to fix code error 'Attempting to close HtmlElement 'body' before HtmlElement 'style'...

Help, I need to fix code error 'Attempting to close HtmlElement 'body' before HtmlElement 'style'...

Community Blog Articles