Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

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

tobi-emmanuel
Shopify Partner
10 0 5

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

<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 %}
    {% 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 %}
    <div class="product-main__gallery product-main__gallery--mobile ignores-container">
      {% 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'
          -%}
          <div class="zoom-target"></div>
        {% else %}
          <img
            src="{{ single_image | image_url | escape }}"
            alt="{{ single_image.alt | escape }}"
            class="product-main__single-image"
          >
        {% endif %}

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

    {% comment %} Wrapper {% endcomment %}
    <div class="product-main__wrapper container">
      {% comment %} Gallery {% endcomment %}
      <div class="product-main__gallery product-main__gallery--desktop">
        {% 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 %}
      </div>

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

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

  <div class="product-main__recommendations">
    {%
      render 'section-featured-products' with
      use_product_recommendations: use_product_recommendations,
      heading: ss.heading,
      text: ss.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 -%}

 

 

 

 

Replies 4 (4)

SocialAutoPost
Shopify Partner
434 59 107

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: <div class="product-main__gallery product-main__gallery--mobile ignores-container"> it seems that "ignores-container" class is there by mistake.
  • In this line of code: <img src="{{ single_image | image_url | escape }}" alt="{{ single_image.alt | escape }}" class="product-main__single-image"> 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. 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
tobi-emmanuel
Shopify Partner
10 0 5

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

 

 

 

{% 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 %}
                {% assign show_vendor = section.settings.show_vendor %}
		{%- render 'component_BreadCrumbs', class: 'product-main__breadcrumbs container', show_vendor: show_vendor -%}

		{% comment %} Gallery -- Mobile View {% endcomment %}
		<div class="product-main__gallery product-main__gallery--mobile ignores-container">
			{% 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'
					 -%}
					<div class="zoom-target"></div>
				{% else %}
					<img
						src="{{ single_image | img_url: 'x1200' | escape }}" 
						alt="{{ single_image.alt | escape }}"
						class="product-main__single-image"
					>
				{% endif %}

			{% else %}
				{% render 'product-main_gallery--sidescroll', 
					product: product, 
					prevent_loop: true,
					image_zoom: section.settings.zoom
				%}
			{% endif %}
		</div>
		
		{% comment %} Wrapper {% endcomment %}
		<div class="product-main__wrapper container">

			{% comment %} Gallery {% endcomment %}
			<div class="product-main__gallery product-main__gallery--desktop">
				{% 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 %}
			</div> 

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

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

	<div class="product-main__recommendations">
		{% render 'section-featured-products' with 
			use_product_recommendations: use_product_recommendations,
			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 -%}

 

 

SocialAutoPost
Shopify Partner
434 59 107

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?

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
tobi-emmanuel
Shopify Partner
10 0 5

@SocialAutoPost I see it when I go into theme customize