HTML error found Broken HTML has been detected in your theme's sections/product-main.liquid file.
Thanks @SocialAutoPost for looking into this
I have updated the the markup based on some of your suggestions, but the error still remains
- I have now removed the duplicate {% assign ss = section.settings %} and {% assign sb = section.settings %}
- You missed that show_vendor is defined just above the the render line so not an error
- ignores-container class was not a mistake, and class names should not come back as HTML markup errors
- Although image_url is a valid filter, I have updated to img_url
- 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.
{% 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 -%}
