Parser error "Invalid Tag: 'liquid'"

[Dan9527]

The text that needs to be parsed is as follows:

{% comment %}
Renders a product card

Accepts:

• card_product: {Object} Product Liquid object (optional)
• media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
• show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
• show_vendor: {Boolean} Show the product vendor. Default: false
• show_rating: {Boolean} Show the product rating. Default: false
• extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
• lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
• show_quick_add: {Boolean} Show the quick add button.
• section_id: {String} The ID of the section that contains this card.
• horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
• horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

          {%- if card_product.media[1] != null and show_secondary_image -%}
            <img
              srcset="
                {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
              "
              src="{{ card_product.media[1] | image_url: width: 533 }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
              alt=""
              class="motion-reduce"
              loading="lazy"
              width="{{ card_product.media[1].width }}"
              height="{{ card_product.media[1].height }}"
            >
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}
    <div class="card__content">
      <div class="card__information">
        <h3
          class="card__heading"
          {% if card_product.featured_media == null and settings.card_style == 'standard' %}
            id="title-{{ section_id }}-{{ card_product.id }}"
          {% endif %}
        >
          <a
            href="{{ card_product.url }}"
            id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
            class="full-unstyled-link"
            aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
          >
            {{ card_product.title | escape }}
          </a>
        </h3>
      </div>
      <div class="card__badge {{ settings.badge_position }}">
        {%- if card_product.available == false -%}
          <span
            id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
            class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
          >
            {{- 'products.product.sold_out' | t -}}
          </span>
        {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
          <span
            id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
            class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
          >
            {{- 'products.product.on_sale' | t -}}
          </span>
        {%- endif -%}
      </div>
    </div>
  </div>
  <div class="card__content">
    <div class="card__information">
      <h3
        class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
        {% if card_product.featured_media or settings.card_style == 'card' %}
          id="title-{{ section_id }}-{{ card_product.id }}"
        {% endif %}
      >
        <a
          href="{{ card_product.url }}"
          id="CardLink-{{ section_id }}-{{ card_product.id }}"
          class="full-unstyled-link"
          aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
        >
          {{ card_product.title | escape }}
        </a>
      </h3>
      <div class="card-information">
        {%- if show_vendor -%}
          <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
          <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
        {%- endif -%}

        

<div class="AirReviews-Widget AirReviews-Widget--Stars" style="margin-top:0.7rem" data-review-avg="{{ card_product.metafields.air_reviews_product.review_avg }}" data-review-count="{{ card_product.metafields.air_reviews_product.review_count }}"></div>

{{ block.settings.description | escape }}

        {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
          {% liquid
            assign rating_decimal = 0
            assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
            if decimal >= 0.3 and decimal <= 0.7
              assign rating_decimal = 0.5
            elsif decimal > 0.7
              assign rating_decimal = 1
            endif
          %}
          <div
            class="rating"
            role="img"
            aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}"
          >
            <span
              aria-hidden="true"
              class="rating-star color-icon-{{ settings.accent_icons }}"
              style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
            ></span>
          </div>
          <p class="rating-text caption">
            <span aria-hidden="true">
              {{- card_product.metafields.reviews.rating.value }} /
              {{ card_product.metafields.reviews.rating.value.scale_max -}}
            </span>
          </p>
          <p class="rating-count caption">
            <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
            <span class="visually-hidden">
              {{- card_product.metafields.reviews.rating_count }}
              {{ 'accessibility.total_reviews' | t -}}
            </span>
          </p>
        {%- endif -%}

        {% render 'price', product: card_product, price_class: '' %}
      </div>
    </div>
    {%- if show_quick_add -%}
      <div class="quick-add no-js-hidden">
        {%- liquid
          assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
          assign qty_rules = false
          if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
            assign qty_rules = true
          endif
        -%}
        {%- if card_product.variants.size > 1 or qty_rules -%}
          <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
            <button
              id="{{ product_form_id }}-submit"
              type="submit"
              name="add"
              class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
              aria-haspopup="dialog"
              aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
              data-product-url="{{ card_product.url }}"
            >
              {{ 'products.product.choose_options' | t }}
              {%- if horizontal_quick_add -%}
                <span class="icon-wrap">{% render 'icon-arrow' %}</span>
              {%- endif -%}
              <div class="loading-overlay__spinner hidden">
                <svg
                  aria-hidden="true"
                  focusable="false"
                  class="spinner"
                  viewBox="0 0 66 66"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </button>
          </modal-opener>
          <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
            <div
              role="dialog"
              aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
              aria-modal="true"
              class="quick-add-modal__content global-settings-popup"
              tabindex="-1"
            >
              <button
                id="ModalClose-{{ card_product.id }}"
                type="button"
                class="quick-add-modal__toggle"
                aria-label="{{ 'accessibility.close' | t }}"
              >
                {% render 'icon-close' %}
              </button>
              <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
            </div>
          </quick-add-modal>
        {%- else -%}
          <product-form>
            {%- form 'product',
              card_product,
              id: product_form_id,
              class: 'form',
              novalidate: 'novalidate',
              data-type: 'add-to-cart-form'
            -%}
              <input
                type="hidden"
                name="id"
                value="{{ card_product.selected_or_first_available_variant.id }}"
                disabled
              >
              <button
                id="{{ product_form_id }}-submit"
                type="submit"
                name="add"
                class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                aria-haspopup="dialog"
                aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                aria-live="polite"
                data-sold-out-message="true"
                {% if card_product.selected_or_first_available_variant.available == false %}
                  disabled
                {% endif %}
              >
                <span>
                  {%- if card_product.selected_or_first_available_variant.available -%}
                    {{ 'products.product.add_to_cart' | t }}
                  {%- else -%}
                    {{ 'products.product.sold_out' | t }}
                  {%- endif -%}
                </span>
                <span class="sold-out-message hidden">
                  {{ 'products.product.sold_out' | t }}
                </span>
                {%- if horizontal_quick_add -%}
                  <span class="icon-wrap">{% render 'icon-plus' %}</span>
                {%- endif -%}
                <div class="loading-overlay__spinner hidden">
                  <svg
                    aria-hidden="true"
                    focusable="false"
                    class="spinner"
                    viewBox="0 0 66 66"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                  </svg>
                </div>
              </button>
            {%- endform -%}
          </product-form>
        {%- endif -%}
      </div>
    {%- endif -%}
    <div class="card__badge {{ settings.badge_position }}">
      {%- if card_product.available == false -%}
        <span
          id="Badge-{{ section_id }}-{{ card_product.id }}"
          class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
        >
          {{- 'products.product.sold_out' | t -}}
        </span>
      {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
        <span
          id="Badge-{{ section_id }}-{{ card_product.id }}"
          class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
        >
          {{- 'products.product.on_sale' | t -}}
        </span>
      {%- endif -%}
    </div>
  </div>
</div>

{%- else -%}

{{ 'onboarding.product_title' | t }}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{{ 'products.product.vendor' | t }}

{%- endif -%} {% render 'price' %}

{%- endif -%}

My question is, is it not possible to parse the Liquid tag in this Shopify official theme liquid file?

[Dan9527]

It's on line 24, index 6, seems like the "{%- liquid" tag

[bkiers]

Hi @Dan9527! The liquid tag isn't implemented (yet). Tracked here: #273