HTML error when I add Dynamic Checkout button to product template. Not sure why, Help!

[tobi-emmanuel]

When and ONLY WHEN  I add dynamic checkout buttons to the product template, I get this error

HTML error found. Broken HTML has been detected in your theme's sections/product-main.liquid file.

 

  

Content of sections/product-main.liquid is below:

{% comment %}  
-----------------------------------------------------------------------------
Section: Product Main
Contains the following snippets: Product gallery, Product details, Product form
-----------------------------------------------------------------------------
{% endcomment %}

{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign featured_image = selected_variant.featured_image | default: product.featured_image %}

<div class="product-main {% if feature %}feature{% endif %}" itemscope itemtype="http://schema.org/Product">
	{% comment %} Product Meta {% endcomment %}
	<meta itemprop="name" content="{{ product.title }}{% unless product.has_only_default_variant %} - {{ selected_variant.title }}{% endunless %}">
	<meta itemprop="url" content="{{ shop.url | escape }}{{ selected_variant.url }}">
	<meta itemprop="brand" content="{{ product.vendor | escape }}">
	<meta itemprop="image" content="{{ featured_image | img_url: '600x600' }}">
	<meta itemprop="description" content="{{ product.description | strip_html | escape }}">
	
	<div class="product-main__container">
		{% comment %} Breadcrumbs {% endcomment %}
		{%- render 'component_BreadCrumbs', class: 'product-main__breadcrumbs container', show_vendor: section.settings.show_vendor -%}

		{% comment %} Gallery -- Mobile View {% endcomment %}
		{% render 'product-main_gallery', product: product, breakpoint: 'mobile', scetion: section %}
		
		{% comment %} Wrapper {% endcomment %}
		<div class="product-main__wrapper container">

			{% comment %} Gallery {% endcomment %}
			{% render 'product-main_gallery', product: product, section: section, feature: feature %} 

			{% comment %} Details {% endcomment %}
			{% render 'product-main_details' with product: product, feature: feature, section: section %} 
		</div>
	</div>
</div>

{% if section.settings.show_recommendations %}
	<div class="product-main__recommendations">
		{% render 'section-featured-products' with 
			use_product_recommendations: true,
			heading: section.settings.heading,
			text: section.settings.text
		%}
	</div>
{% endif %}
 
{%- schema -%}
{
    "name": "Product main",
    "settings": [
        {
            "type": "header",
            "content": "Product details"
        },
        {
            "type": "checkbox",
            "label": "Show product vendor",
            "default": true,
            "id": "show_vendor"
        },
        {
            "type": "checkbox",
            "label": "Show image zoom",
            "default": true,
            "id": "zoom"
        },
        {
            "type": "header",
            "content": "Product recommendations"
        },
        {
            "type": "checkbox",
            "label": "Show product recommendations",
            "default": true,
            "id": "show_recommendations",
            "info": "[Learn more about Shopify Recommendations](https://shopify.dev/themes/product-merchandising/recommendations)"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "Heading",
            "default": "You may also like"
        },
        {
            "type": "text",
            "id": "text",
            "label": "Text"
        }
    ],
    "blocks": [
        {
            "type": "@app"
        }
    ],
    "presets": [
        {
            "category": "Product",
            "name": "Product main"
        }
    ],
    "templates": [
        "product"
    ],
    "class": "SALVO_SECTION SALVO_SECTION-product-main"
}
{%- endschema -%}