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

Retired Boards Appdev Store Design
,
1

I can’t for the life of me figure out what the error is on my product-main.liquid file. Been going through it for almost 2 days, but I keep getting the error. Can anyone spot the error?

{% comment %} Define Useful Variables {% endcomment %}
{% assign ss = section.settings %}
{% assign sb = section.settings %}

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

  {% comment %} Product Meta {% endcomment %}
  
  
  
  
  

  
    {% comment %} Breadcrumbs {% endcomment %}
    {% if ss %}
      {% assign show_vendor = ss.show_vendor %}
      {%- render 'component_BreadCrumbs', class: 'product-main__breadcrumbs container', show_vendor: show_vendor -%}
    {% endif %}

    {% comment %} Gallery -- Mobile View {% endcomment %}
    

      {% if product.images == blank %}
        {{ 'product-1' | placeholder_svg_tag: 'product-main-gallery-sidescroll__main-item' }}
      {% elsif product.images.size == 1 %}
        {% assign single_image = product.images | first %}

        {% if ss.zoom %}
          {% assign first = false %}
          {% assign src=single_image | img_url: 'x1200', format: 'pjpg' %}
          {% assign zoom_src=single_image | img_url: 'x1200', format: 'pjpg' %}

          {%- render 'component_ImageZoom',
            class: 'product-main__single-image',
            first: first,
            src: src,
            alt: single_image.alt,
            zoom_src: zoom_src,
            target: '.zoom-target'
          -%}
          

        {% else %}
          
        {% endif %}

      {% else %}
        {% render 'product-main_gallery--sidescroll', product: product, prevent_loop: true, image_zoom: ss.zoom %}
      {% endif %}
    

    {% comment %} Wrapper {% endcomment %}
    
      {% comment %} Gallery {% endcomment %}
      

        {% if product.images == blank %}
          {{ 'product-1' | placeholder_svg_tag: 'product-main-gallery-scroll__item' }}
        {% else %}
          {% if feature %}
            {% render 'product-main_gallery--sidescroll', product: product, image_zoom: ss.zoom %}
          {% else %}
            {% render 'product-main_gallery--scroll', product: product, image_zoom: ss.zoom %}
          {% endif %}
        {% endif %}
      

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

    

  

{% if ss.show_recommendations %}
  {% assign use_product_recommendations = true %}

  
    {%
      render 'section-featured-products' with
      use_product_recommendations: use_product_recommendations,
      heading: ss.heading,
      text: ss.text
    %}
  

{% 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 -%}
2

Hello @tobi-emmanuel ,

I can spot a number of issues in the Liquid code you provided:

  • {% assign ss = section.settings %} and {% assign sb = section.settings %} both are assigned to the same variable, this is unnecessary and might cause confusion in later stages.
  • In this line of code: {%- render ‘component_BreadCrumbs’, class: ‘product-main__breadcrumbs container’, show_vendor: show_vendor -%} the show_vendor variable is not defined.
  • In this line of code:
    it seems that “ignores-container” class is there by mistake.
  • In this line of code: {{ single_image.alt | escape }} it seems that “image_url” filter is not available and the filter should be “img_url”
  • In this line of code: {% render ‘product-main_gallery–sidescroll’, product: product, prevent_loop: true, image_zoom: ss.zoom %} you are using “product-main_gallery–sidescroll” but it seems like it’s not defined in your codebase.

Please share the screenshot of the error you see so I can help you find the exact error.

3

Thanks @SocialAutoPost for looking into this

I have updated the the markup based on some of your suggestions, but the error still remains

  1. I have now removed the duplicate {% assign ss = section.settings %} and {% assign sb = section.settings %}
  2. You missed that show_vendor is defined just above the the render line so not an error
  3. ignores-container class was not a mistake, and class names should not come back as HTML markup errors
  4. Although image_url is a valid filter, I have updated to img_url
  5. product-main_gallery–sidescroll is indeed an existing snippet hence the use of ‘render’

Please find the error below and the updated code based on your comments. Would be grateful if you can see what i am missing.

Screenshot 2023-01-11 at 09.41.28.png
Screenshot 2023-01-11 at 09.41.28.png229×227 9.23 KB

{% 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 %}

	{% comment %} Product Meta {% endcomment %}
	
	
	
	
	
	
	
		{% comment %} Breadcrumbs {% endcomment %}
                {% assign show_vendor = section.settings.show_vendor %}
		{%- render 'component_BreadCrumbs', class: 'product-main__breadcrumbs container', show_vendor: show_vendor -%}

		{% comment %} Gallery -- Mobile View {% endcomment %}
		

			{% if product.images == blank %}
				{{ 'product-1' | placeholder_svg_tag: 'product-main-gallery-sidescroll__main-item' }}
			{% elsif product.images.size == 1 %}
				{% assign single_image = product.images | first %}

				{% if section.settings.zoom %}
					{% assign first = false %}
					{% assign src=single_image | img_url: 'x1200', format: 'pjpg' %}
					{% assign zoom_src=single_image | img_url: 'x1200', format: 'pjpg' %}

					{%- render 'component_ImageZoom', 
						class: 'product-main__single-image',
						first: first,
						src: src,
						alt: single_image.alt,
						zoom_src: zoom_src,
						target: '.zoom-target'
					 -%}
					

				{% else %}
					
				{% endif %}

			{% else %}
				{% render 'product-main_gallery--sidescroll', 
					product: product, 
					prevent_loop: true,
					image_zoom: section.settings.zoom
				%}
			{% endif %}
		

		
		{% comment %} Wrapper {% endcomment %}
		

			{% comment %} Gallery {% endcomment %}
			

				{% if product.images == blank %}
					{{ 'product-1' | placeholder_svg_tag: 'product-main-gallery-scroll__item' }}
				{% else %}
					{% if feature %}
						{% render 'product-main_gallery--sidescroll', product: product, image_zoom: section.settings.zoom %}
					{% else %}
						{% render 'product-main_gallery--scroll', product: product, image_zoom: section.settings.zoom %}
					{% endif %}

				{% endif %}
			
 

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

		

	

{% if section.settings.show_recommendations %}
	{% assign use_product_recommendations = true %}

	
		{% render 'section-featured-products' with 
			use_product_recommendations: use_product_recommendations,
			heading: section.settings.heading,
			text: section.settings.text
		%}
	

{% 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 -%}
4

Hello @tobi-emmanuel ,

Thank you for your prompt reply.

I was able to save this latest code on my demo theme. When do you see this HTML error?

5

@SocialAutoPost I see it when I go into theme customize