HTML Error Found on store (2 places) (random)

Highlighted
Excursionist
20 0 5

Very random error appeared today, and I am not sure what has changed to the code. I have not made any changes to these pages code. I also do not see a way to roll it back to an older version. Is anyone open to taking a quick peak at the code and seeing if you can see if there are any extra or missing HTML tags present? This has caused my website to not show certain things on the home page and does not allow for the quick view/preview button to operate normally.

 

THANK YOU!!!

ERROR 1:

Screen Shot 2020-07-13 at 8.54.38 PM.png

 

{%- assign per_row = section.settings.per_row -%}
{%- assign product_limit = per_row | times: section.settings.rows -%}
{%- assign collection = collections[section.settings.home_featured_products] -%}

{% if section.settings.divider %}<div class="section--divider">{% endif %}

<div
id="CollectionSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="collection-template">
{% if section.settings.title != blank %}
<div class="page-width">
<div class="section-header{% if section.settings.view_all %}{% unless settings.type_headers_align_text %} section-header--with-link{% endunless %}{% endif %}">
<h2 class="section-header__title">
{{ section.settings.title }}
</h2>
{% if section.settings.view_all and section.settings.rows == 1 %}
<a href="{{ collections[section.settings.home_featured_products].url }}" class="btn btn--secondary btn--small section-header__link">{{ 'collections.general.all_of_collection' | t }}</a>
{% endif %}
</div>
</div>
{% endif %}

<div class="page-width {% if section.settings.mobile_scrollable %}page-width--flush-small{% endif %}">
<div {% if section.settings.mobile_scrollable %}class="grid-overflow-wrapper"{% endif %}>
<div class="grid grid--uniform" {% if section.settings.mobile_scrollable %}data-aos="overflow__animation"{% endif %}>
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

{% case per_row %}
{% when 1 %}
{%- assign grid_item_width = '' -%}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

{% if section.settings.home_featured_products == blank or collections[section.settings.home_featured_products].empty? or collections[section.settings.home_featured_products].products_count == 0 %}

{% unless emptyState %}
{%- assign emptyState = true -%}
{% endunless %}

<div class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..product_limit) %}
<div class="grid__item grid-product {{ grid_item_width }}" data-aos="row-of-{{ per_row }}">
<div class="grid-product__content">
<a href="{{ product.url | within: collection }}" class="grid-product__link {% if sold_out %} grid-product__link--disabled{% endif %}">
<div class="grid-product__image-mask">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
<div class="image-wrap">{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}</div>
</div>
<div class="grid-product__meta">
<div class="grid-product__title">{{ 'home_page.onboarding.product_title' | t }}</div>
<div class="grid-product__price">$29</div>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>

{% else %}

{% for product in collections[section.settings.home_featured_products].products limit: product_limit %}
{% include 'product-grid-item' %}
{% endfor %}

{% if section.settings.view_all %}

{% if section.settings.rows > 1 %}
<div class="grid__item text-center {% if section.settings.mobile_scrollable %}small--hide{% endif %}">
<a href="{{ collections[section.settings.home_featured_products].url }}" class="btn">{{ 'collections.general.all_of_collection' | t }}</a>
</div>
{% endif %}

{% if section.settings.mobile_scrollable %}
<div class="grid__item grid__item--view-all text-center {{ grid_item_width }} medium-up--hide">
<a href="{{ collections[section.settings.home_featured_products].url }}" class="grid-product__see-all">
{{ 'collections.general.view_all_products_html' | t: count: collection.products_count }}
</a>
</div>
{% endif %}

{% endif %}

{% endif %}
</div>
</div>
</div>
</div>

{% if settings.quick_shop_enable %}
{% for product in collections[section.settings.home_featured_products].products limit: product_limit %}
{% include 'quick-shop-modal' %}
{% endfor %}
{% endif %}

{% if section.settings.divider %}</div>{% endif %}


{% schema %}
{

"name": "Featured collection",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "collection",
"id": "home_featured_products",
"label": "Collection"
},
{
"type": "range",
"id": "per_row",
"label": "Products per row",
"default": 4,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "rows",
"label": "Rows of products",
"default": 1,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "checkbox",
"id": "mobile_scrollable",
"label": "Enable swipe on mobile",
"default": true
},
{
"type": "checkbox",
"id": "view_all",
"label": "Show 'View all' link",
"default": true
},
{
"type": "checkbox",
"id": "divider",
"label": "Show section divider",
"default": false
}
],
"presets": [{
"name": "Featured collection",
"category": "Collection"
}],
"blocks" : []
}
{% endschema %}

 

 

ERROR 2:

 

Screen Shot 2020-07-13 at 8.58.03 PM.png

 

{% include 'product-template',
description_style: section.settings.description_style,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
section_id: product.id,
social: section.settings.social_enable,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style
%}

{% if settings.enable_product_reviews and settings.reviews_layout == 'full' %}
<hr id="Reviews-{{ product.id }}" class="hr--clear">
<div class="index-section product-reviews product-reviews--full">
<div class="page-width">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</div>
{% endif %}

{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "select",
"id": "description_style",
"label": "Description position",
"default": "default",
"options": [
{
"value": "default",
"label": "Next to media"
},
{
"value": "full",
"label": "Below media"
}
]
},
{
"type": "checkbox",
"id": "social_enable",
"label": "Enable social sharing",
"default": true
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_position",
"label": "Position",
"default": "right",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnail position",
"default": "beside",
"options": [
{
"value": "beside",
"label": "Next to media"
},
{
"value": "below",
"label": "Below media"
}
]
},
{
"type": "checkbox",
"id": "thumbnail_arrows",
"label": "Show thumbnail arrows"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": true
},
{
"type": "select",
"id": "product_video_style",
"label": "Video style",
"default": "muted",
"options": [
{
"value": "muted",
"label": "Video without sound"
},
{
"value": "unmuted",
"label": "Video with sound"
}
],
"info": "Video with sound will not autoplay"
}
]
}
{% endschema %}

 

 

---------

 

{%- unless thumbnail_position -%}
{%- assign thumbnail_position = 'beside' -%}
{%- endunless -%}

{%- unless description_style -%}
{%- assign description_style = 'full' -%}
{%- endunless -%}

{%- assign product_img_structure = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="ProductSection-{{ section_id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-section-type="product-template"
data-product-handle="{{ product.handle }}"
data-product-url="{{ product.url | within: collection }}"
data-aspect-ratio="{{ 100 | divided_by: product.featured_media.aspect_ratio }}"
data-img-url="{{ product_img_structure }}"
{% if settings.product_zoom_enable %}
data-image-zoom="true"
{% endif %}
{% if settings.inventory_enable %}
data-inventory="true"
{% endif %}
{% if settings.inventory_transfers_enable %}
data-incoming-inventory="true"
{% endif %}
{% unless isModal %}
data-enable-history-state="true"
{% endunless %}>

{%- include 'product-template-variables' -%}

<div class="page-content page-content--product">
<div class="page-width">

<div class="grid{% unless image_position == 'left' %} grid--product-images-right{% endunless %}">
{%- if image_position == 'left' -%}
<div class="grid__item {{ product_image_width }}">
{% include 'product-images',
section_id: section_id,
isModal: isModal,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
%}
</div>
{%- endif -%}

<div class="grid__item {{ product_description_width }}">

<div class="product-single__meta">
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- include 'breadcrumbs' -%}
{%- endif -%}

{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{%- assign vendor_handle = product.vendor | handleize -%}
{%- if collections[vendor_handle] != empty -%}
<a href="{{ routes.collections_url }}/{{ collections[vendor_handle].handle }}">
{{ collections[vendor_handle].title }}
</a>
{%- else -%}
{{ product.vendor | link_to_vendor }}
{%- endif -%}
</div>
{%- endif -%}

{%- if isModal -%}
<p class="h2 product-single__title">
{{ product.title }}
</p>
{% else %}

<h1 class="h2 product-single__title">
{{ product.title }}
</h1>
{%- endif -%}
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-profile' %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}


{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
{%- if isModal -%}
{%- assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id -%}
{% else %}
{%- assign review_link = '#Reviews-' | append: product.id -%}
{%- endif -%}
{% include 'product-additional-content', section_id: section_id %}

<a href="{{ review_link }}" class="product-single__review-link">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{%- endif -%}

{%- if settings.sku_enable -%}
<p id="Sku-{{ section_id }}" class="product-single__sku">
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}

<br>

{%- assign hide_sale_price = true -%}
{%- if product.compare_at_price_max > product.price -%}
{%- if current_variant.compare_at_price > current_variant.price -%}
{%- assign hide_sale_price = false -%}
{%- endif -%}
<span
id="PriceA11y-{{ section_id }}"
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}">
{{ 'products.general.regular_price' | t }}
</span>
<span class="product__price-wrap-{{ section_id }}{% if hide_sale_price %} hide{% endif %}">

</span>
<span id="ComparePriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span id="ComparePrice-{{ section_id }}" class="product__price product__price--compare">
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
</span>


<span id="ProductPrice-{{ section_id }}"
class="product__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}">
{{ current_variant.price | money }}
</span>

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{% endcapture %}
{%- else -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{% endcapture %}
{%- endif -%}
<span id="SavePrice-{{ section_id }}" class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
</span>
{%- endif -%}

<div class="product__unit-price product__unit-price--spacing product__unit-price-wrapper--{{ section_id }}{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
<span class="product__unit-base--{{ section_id }}">
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<span class="product__unit-price--{{ section_id }}">{{ current_variant.unit_price | money }}</span>/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte small--text-center">
<small>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</small>
</div>


{%- endif -%}

{%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

<script>
// Store inventory quantities in JS because they're no longer
// available directly in JS when a variant changes.
// Have an object that holds all potential products so it works
// with quick view or with multiple featured products.
window.inventories = window.inventories || {};
window.inventories['{{section_id}}'] = {};
{% for variant in variants_with_inventory_tracking %}
window.inventories['{{section_id}}'][{{variant.id}}] = {
'quantity': {{ variant.inventory_quantity | default: 0 }},
'incoming': {{ variant.incoming | default: false | json }},
'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
};
{% endfor %}
</script>

{% comment %}
If loaded in quick view, it might be from a JS-loaded function
that loads recommended products. If that's the case, the above
JS will not set the variant inventory. Add it to an accessible
data div to read later instead.
{% endcomment %}
{%- if isModal -%}
<div
data-section-id="{{ section_id }}"
class="hide js-product-inventory-data"
aria-hidden="true"
>
{%- for variant in variants_with_inventory_tracking -%}
<div
class="js-variant-inventory-data"
data-id="{{ variant.id }}"
data-quantity="{{ variant.inventory_quantity | default: 0 }}"
data-incoming="{{ variant.incoming | default: false | json }}"
data-date="{{ variant.next_incoming_date | date: format: 'date' | json }}"
>
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- endif -%}

<hr class="hr--medium">

{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{% include 'product-form', section_id: section_id %}
{%- else -%}
<div
id="ProductFormHolder-{{ section_id }}"
class="product-form-holder"
data-url="{{ product.url }}"
data-template="{{ product.template_suffix }}"></div>
{%- endunless -%}

{%- if settings.trust_image != blank -%}
<div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540]"
data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
</noscript>
</div>
</div>
{%- endif -%}

{%- unless description_style == 'full' -%}
<div class="product-single__description rte">
{{ product.description }}
</div>

{% include 'product-additional-content', section_id: section_id %}
{%- endunless -%}

{%- if social -%}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{%- endif -%}
</div>
</div>

{%- unless image_position == 'left' -%}
<div class="grid__item {{ product_image_width }}">
{% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
</div>
{%- endunless -%}


{%- if description_style == 'full' -%}
<div class="product-single__description-full rte">
{{ product.description }}
</div>


{% include 'product-additional-content', section_id: section_id %}
{%- endif -%}
</div>
</div>
</div>

{% include 'cross-sell' %}

<hr class="hr--medium">

 

0 Likes
Highlighted
Excursionist
20 0 5

Has anyone come across this before in their store?

0 Likes
Highlighted
Excursionist
20 0 5

 

*BUMP* 

0 Likes
Highlighted
Tourist
12 0 2

We come across this from time to time on clients' stores. It's usually an unclosed HTML tag. For exmple:

 

<ul>
  <li>
</ul>

 

Would cause this error, where it should read:

 

<ul>
  <li></li>
</ul>

 

 Most likely there is an unclosed tag somewhere in that HTML file.

It might be the last tag in the file (there could be more). Change

"<hr class="hr--medium">"

to

"<hr class="hr--medium" />"

and see if that does the trick.

1 Like