Add snippets/product-grid-item-3-sib-bottom-price.liquid

snippets/product-grid-item-3-sib-bottom-price.liquid

@@ -0,0 +1,683 @@
+{% comment %}
+    Renders list of products in grid layout
+
+    Accepts:
+    - product: {Object} product (required)
+    - animation_delay: {Int} animation timing for load
+    - last_element: {Boolean} True when custom image is taking up the first slot for the collection
+                              and the loop is on the last element for the page.
+    - index: element index in the loop
+    - block_index: index of the block in Tab collections section
+    - sizes: Image sizes
+
+    Usage:
+    {% render 'product-grid-item', product: product, index: index, sizes: image_sizes %}
+{% endcomment %}
+
+{%- liquid
+  assign animation_delay = animation_delay | default: 0
+  assign aos_delay_default = animation_delay | times: 100
+  assign aos_delay = aos_delay | default: aos_delay_default
+  assign aos_duration = 800
+  assign layout_desktop = section.settings.layout_desktop
+  assign layout_mobile = section.settings.layout_mobile
+  assign min_defer_index = 8
+  assign defer = false
+  assign index = index | default: 1
+
+  if index > min_defer_index
+    if layout_desktop == 'slider' or layout_mobile == 'slider'
+      assign defer = true
+    endif
+  endif
+
+
+  assign columns_desktop = section.settings.grid | plus: 0
+  assign columns_medium = 2
+  assign columns_small = 2
+  assign columns_mobile = section.settings.grid_mobile | plus: 0
+
+  if columns_desktop == 0
+    assign columns_desktop = 4
+  endif
+
+  if columns_mobile == 0
+    assign columns_mobile = 1
+  endif
+
+  if columns_desktop == 2 or columns_desktop == 4
+    assign columns_medium = 2
+  endif
+
+  if settings.product_grid_center
+    assign alignment_class = 'product-item--centered'
+  else
+    assign alignment_class = 'product-item--left'
+  endif
+
+  assign overlay_text_class = 'product-item--outer-text'
+  if settings.overlay_text
+    assign overlay_text_class = 'product-item--overlay-text'
+  endif
+
+  assign quickview_class = ''
+  if settings.quickview_enable and product.first_available_variant
+    assign quickview_class = 'product-item--has-quickbuy'
+  endif
+
+  assign has_siblings = false
+  if settings.show_siblings and product.metafields.theme.siblings.value != blank and product.metafields.theme.siblings.type == 'single_line_text_field'
+    assign has_siblings = true
+  endif
+
+  if settings.show_siblings and product.metafields.theme.sibling_products != blank and product.metafields.theme.sibling_products.type == 'list.product_reference'
+    assign has_siblings = true
+  endif
+
+  if sizes == blank
+    if section.settings.width == 'wrapper'
+      if settings.grid_style == 'compact'
+        assign sizes = '(min-width: 1400px) calc(80vw / ' | append: columns_desktop | append: '), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: '), (min-width: 480px) calc(100vw / ' | append: columns_small | append: '), calc(100vw / ' | append: columns_mobile | append: ')'
+      else
+        assign sizes = '(min-width: 1400px) calc((80vw - 64px) / ' | append: columns_desktop | append: ' - 32px), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: ' - 22px), (min-width: 480px) calc(100vw / ' | append: columns_small | append: ' - 16px), calc(100vw / ' | append: columns_mobile | append: ')'
+      endif
+    else
+      if settings.grid_style == 'compact'
+        assign sizes = '(min-width: 1400px) calc(100vw / ' | append: columns_desktop | append: '), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: '), (min-width: 480px) calc(100vw / ' | append: columns_small | append: '), calc(100vw / ' | append: columns_mobile | append: ')'
+      else
+        assign sizes = '(min-width: 1400px) calc(100vw / ' | append: columns_desktop | append: ' - 32px), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: ' - 22px), (min-width: 480px) calc(100vw / ' | append: columns_small | append: ' - 16px), calc(100vw / ' | append: columns_mobile | append: ')'
+      endif
+    endif
+  endif
+
+  assign widths = '136, 160, 180, 220, 254, 284, 292, 320, 480, 528, 640, 720, 960, 1080, 1296, 1512, 1728, 1950'
+  assign aspect_ratio = 1 | divided_by: settings.product_grid_aspect_ratio
+
+  assign loading = 'eager'
+  if columns_desktop <= 3
+    assign eager_images_limit = columns_desktop
+  else
+    assign eager_images_limit = columns_desktop | times: 2
+  endif
+
+  if layout_desktop == 'slider' and index > 3
+    assign loading = 'lazy'
+  elsif index > eager_images_limit
+    assign loading = 'lazy'
+  endif
+
+  if block_index > 1
+    assign loading = 'lazy'
+  endif
+-%}
+
+{%- if settings.color_swatches -%}
+  {%- assign has_colors = false -%}
+
+  {%- capture swatches -%}
+    {%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%}
+
+    {%- assign swatch_labels = swatch_translation | append: ',' | split: ',' -%}
+    {%- for label in swatch_labels -%}
+      {%- assign sanitized_label = label | lstrip | rstrip -%}
+      {%- if product.options_by_name[sanitized_label].values.size > 0 -%}
+        {%- assign has_colors = true -%}
+        {%- capture swatch_values -%}
+          {%- for value in product.options_by_name[sanitized_label].values -%}
+            {{- value -}}: {{- value | handle -}}
+            {%- unless forloop.last -%}, {%- endunless -%}
+          {%- endfor -%}
+        {%- endcapture -%}
+
+        <form class="radio__fieldset radio__fieldset--swatches radio__fieldset--pgi" data-grid-swatch-form data-fieldset>
+          <grid-swatch class="selector-wrapper__scrollbar" data-scrollbar data-swatch-handle="{{ product.handle }}" data-swatch-label="{{ label }}" data-swatch-values="{{ swatch_values | strip_html | escape }}"></grid-swatch>
+
+          <div class="selector-wrapper__actions">
+            <button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--prev is-hidden" data-scrollbar-arrow-prev>
+              {%- render 'icon-nav-arrow-left' -%}
+              <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
+            </button>
+
+            <button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--next is-hidden" data-scrollbar-arrow-next>
+              {% render 'icon-nav-arrow-right' %}
+              <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
+            </button>
+          </div>
+        </form>
+
+        {%- break -%}
+      {%- endif -%}
+    {%- endfor -%}
+  {%- endcapture -%}
+{%- endif -%}
+
+{%- liquid
+  assign double_img = false
+  if product.media[1].preview_image and settings.image_hover_enable
+    assign double_img = true
+  endif
+
+  assign current_variant = product.first_available_variant
+  assign product_url = product.url
+
+  capture item_unique
+    echo 'product-item--' | append: section.id | append: '-' | append: product.id
+  endcapture
+
+  assign aos_anchor_default = item_unique | prepend: '#'
+  assign aos_anchor = aos_anchor | default: aos_anchor_default
+-%}
+
+{%- if has_siblings -%}
+  {%- liquid
+    assign sibling_products = product.metafields.theme.sibling_products.value | default: collections[product.metafields.theme.siblings.value].products
+    assign count = product.metafields.theme.sibling_products.value.count | default: collections[product.metafields.theme.siblings.value].products.size
+    assign count_string_one = 'collections.general.colors_with_count.one' | t
+    assign count_string_other = 'collections.general.colors_with_count.other' | t
+  -%}
+
+  {%- if sibling_products != blank -%}
+    {%- capture siblings_html -%}
+      <product-siblings class="product-item__siblings product-item__swatches__holder product-item__swatches__holder--{{ settings.swatch_style }}">
+        <div class="radio__fieldset radio__fieldset--swatches radio__fieldset--pgi" data-sibling-fieldset>
+          <div class="selector-wrapper__scrollbar" data-sibling-inner data-scrollbar>
+            {%- for sib_product in sibling_products limit: 50 -%}
+              {%- liquid
+                assign current_class = ''
+                if sib_product.handle == product.handle
+                  assign current_class = ' sibling__link--current'
+                endif
+
+
+                assign sib_product_price_raw = sib_product.price
+                assign sib_product_compare_at_price_raw = sib_product.compare_at_price
+
+                assign sib_product_price_raw = sib_product.metafields.app--168074346497.min_auto_discounted_price.value | default: sib_product.price
+
+                if sib_product.metafields.app--168074346497.discount_percentage.value > 0.01
+                  assign deducted_percentage = 1.0 | minus: sib_product.metafields.app--168074346497.discount_percentage.value
+
+                  assign sib_product_price_raw = sib_product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
+                endif
+
+                if sib_product_price_raw < sib_product.price
+                  assign sib_product_compare_at_price_raw = sib_product.price
+
+                  if sib_product.compare_at_price > sib_product_compare_at_price_raw
+                    assign sib_product_compare_at_price_raw = sib_product.compare_at_price
+                  endif
+                endif
+
+                if settings.currency_code_enable
+                  assign sib_product_price = sib_product_price_raw | money_with_currency
+                else
+                  assign sib_product_price = sib_product_price_raw | money
+                endif
+
+                if sib_product_compare_at_price_raw > sib_product_price_raw
+                  if settings.currency_code_enable
+                    assign sib_product_compare_at_price = sib_product_compare_at_price_raw | money_with_currency
+                  else
+                    assign sib_product_compare_at_price = sib_product_compare_at_price_raw | money
+                  endif
+                endif
+
+                if sib_product.price == 0 and sib_product.price_varies == false
+                  assign sib_product_price = 'general.money.free' | t
+                endif
+
+                assign sib_cutline = sib_product.metafields.theme.cutline | strip_html | default: sib_product.title | strip_html
+                assign sib_color = sib_product.metafields.theme.sibling_color.value | default: sib_product.metafields.theme.sibling_colour.value | default: sib_product.metafields.theme.siblings_color.value | default: sib_product.metafields.theme.siblings_colour.value | default: sib_product.metafields.theme.siblings_colors.value | default: sib_product.metafields.theme.siblings_colours.value
+                assign swatch_color = sib_color | handle
+              -%}
+
+              <div class="swatches swatch__button swatch__button--{{ settings.swatch_style }} swatch-{{ swatch_color }}"
+                style="
+                  --animation-delay: {{ forloop.index0 | times: 50 }}ms;
+                  --swatch: var(--{{ swatch_color }});
+                "
+                data-tooltip="{{ sib_color }}"
+                data-sibling-link="{{ sib_product.url }}"
+                data-sibling-price="{{ sib_product_price | strip_html }}"
+                data-sibling-compare-at-price="{{ sib_product_compare_at_price | strip_html }}"
+                data-sibling-cutline="{{ sib_cutline }}"
+                data-sibling-image="{{ sib_product.featured_media.preview_image.src | image_url }}"
+                tabindex="0">
+                <div class="sibling__link{{ current_class }}">
+                  {%- if settings.sibling_style == 'image' -%}
+                    {%- liquid
+                      case settings.swatch_size
+                        when 'regular'
+                          assign sibling_width = 1.15 | times: settings.type_body_size | divided_by: 100.0 | times: 16 | round
+                        when 'large'
+                          assign sibling_width = 2.3 | times: settings.type_body_size | divided_by: 100.0 | times: 16 | round
+                      endcase
+
+                      assign sibling_sizes = sibling_width | append: 'px'
+                      assign sibling_width_15x = sibling_width | times: 1.5
+                      assign sibling_width_2x = sibling_width | times: 2
+                      assign sibling_widths = sibling_width | append: ', ' | append: sibling_width_15x | append: ', ' | append: sibling_width_2x
+                    -%}
+
+                    <deferred-image>
+                      <template>
+                        {%- render 'image', image: sib_product.featured_media.preview_image, width: sibling_width_2x, height: sibling_width_2x, widths: sibling_widths, sizes: sibling_sizes, aspect_ratio: 1 -%}
+                      </template>
+                    </deferred-image>
+                  {%- endif -%}
+                </div>
+              </div>
+            {%- endfor -%}
+          </div>
+
+          <div class="selector-wrapper__actions">
+            <button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--prev is-hidden" data-scrollbar-arrow-prev>
+              {%- render 'icon-nav-arrow-left' -%}
+              <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
+            </button>
+
+            <button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--next is-hidden" data-scrollbar-arrow-next>
+              {% render 'icon-nav-arrow-right' %}
+              <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
+            </button>
+          </div>
+        </div>
+
+        <span class="product-item__swatches__count">
+          <span data-sibling-count>{{ count }} {{ count | pluralize: count_string_one, count_string_other }}</span>
+        </span>
+      </product-siblings>
+    {%- endcapture -%}
+  {%- endif -%}
+{%- endif -%}
+
+{%- capture over_image_content -%}
+  {%- liquid
+    assign product_tags = product.tags | join: ',' | append: ','
+    assign preorder = false
+    assign is_preorder_meta = false
+    assign on_sale = false
+    assign sold_out = false
+    assign badge = ''
+
+    if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field'
+      assign badge = product.metafields.theme.badge.value
+    endif
+
+    if badge == '' and product_tags contains '_badge_'
+      assign badge = product_tags | split: '_badge_'
+      assign badge = badge[1] | split: ',' | first | replace: '_', ' '
+    endif
+
+    if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true
+      assign is_preorder_meta = true
+    endif
+
+    if product_tags contains '_preorder' or is_preorder_meta
+      assign preorder = true
+    endif
+
+    if product.compare_at_price > product.price and settings.sale_tags_enable
+      assign on_sale = true
+    endif
+
+    unless product.available
+      assign sold_out = true
+    endunless
+  -%}
+
+  {%- if badge != '' -%}
+    <span class="badge-box"
+      data-aos="fade"
+      data-aos-delay="{{ aos_delay }}"
+      data-aos-duration="{{ aos_duration }}"
+      data-aos-anchor="{{ aos_anchor }}">{{ badge }}</span>
+  {%- elsif preorder and sold_out == false -%}
+    <span class="preorder-box"
+      data-aos="fade"
+      data-aos-delay="{{ aos_delay }}"
+      data-aos-duration="{{ aos_duration }}"
+      data-aos-anchor="{{ aos_anchor }}">{{ 'products.product.pre_order' | t }}</span>
+  {%- elsif on_sale and sold_out == false -%}
+    <span class="sale-box"
+      data-aos="fade"
+      data-aos-delay="{{ aos_delay }}"
+      data-aos-duration="{{ aos_duration }}"
+      data-aos-anchor="{{ aos_anchor }}">{{ 'products.product.on_sale' | t }}</span>
+  {%- endif -%}
+
+  {%- if settings.quickview_enable and current_variant -%}
+    {%- liquid
+      assign is_preorder_meta_exist = false
+      assign is_preorder_tag_exist = false
+      assign sibling_property_name = 'general.siblings.label' | t | strip_html | escape
+      assign sibling_property_value = ''
+
+      if siblings_html != blank and product.variants.size == 1
+        assign title_down = product.title | downcase
+        assign sibling = product.metafields.theme.sibling_color.value | default: product.metafields.theme.sibling_colour.value | default: product.metafields.theme.siblings_color.value | default: product.metafields.theme.siblings_colour.value | default: product.metafields.theme.siblings_colors.value | default: product.metafields.theme.siblings_colours.value
+        assign sibling_down = sibling | downcase
+        unless title_down contains sibling_down
+          assign sibling_property_value = sibling | strip_html | escape
+        endunless
+      endif
+
+      if current_variant.available and product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true
+        assign is_preorder_meta_exist = true
+      endif
+
+      if current_variant.available and product.tags contains '_preorder'
+        assign is_preorder_tag_exist = true
+      endif
+
+      if is_preorder_meta_exist or is_preorder_tag_exist
+        assign preorder_name = 'products.product.sale_type' | t | strip_html | escape
+        assign preorder_value = 'products.product.pre_order' | t | strip_html | escape
+      endif
+
+      assign unique = section.id | append: '-' | append: product.id
+    -%}
+
+    <quick-add-product>
+      <div class="quick-add__holder" data-quick-add-holder="{{ product.id }}">
+        {%- if product.variants.size == 1 -%}
+          {%- assign product_form_id = 'ProductForm--' | append: unique -%}
+          {%- form 'product', product, id: product_form_id -%}
+            <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+
+            {%- if sibling_property_value != blank -%}
+              <input
+                type="hidden"
+                name="properties[{{ sibling_property_name }}]"
+                value="{{ sibling_property_value }}">
+            {%- endif -%}
+
+            {%- if preorder_value != blank -%}
+              <input
+                type="hidden"
+                name="properties[{{ preorder_name }}]"
+                value="{{ preorder_value }}">
+            {%- endif -%}
+
+            <button class="quick-add__button caps"
+              type="submit"
+              name="add"
+              aria-label="{{ 'products.general.quick_add' | t }}"
+              data-add-to-cart
+            >
+              <span class="btn__text">{{ 'products.general.quick_add' | t }}</span>
+              <span class="btn__plus"></span>
+              <span class="btn__added">&nbsp;</span>
+              <span class="btn__loader">
+                <svg height="18" width="18" class="svg-loader">
+                  <circle r="7" cx="9" cy="9" />
+                  <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
+                </svg>
+              </span>
+              <span class="btn__error" data-message-error>&nbsp;</span>
+            </button>
+          {%- endform -%}
+        {%- else -%}
+          <button class="quick-add__button caps"
+            type="button"
+            aria-label="{{ 'products.general.quick_add' | t }}"
+            data-quick-add-btn
+            data-quick-add-modal-handle="{{ product.handle }}"
+          >
+            <span class="btn__text">{{ 'products.general.quick_add' | t }}</span>
+            <span class="btn__plus"></span>
+            <span class="btn__added">&nbsp;</span>
+            <span class="btn__loader">
+              <svg height="18" width="18" class="svg-loader">
+                <circle r="7" cx="9" cy="9" />
+                <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
+              </svg>
+            </span>
+          </button>
+        {%- endif -%}
+
+        {%- unless product.has_only_default_variant -%}
+          {%- render 'product-quick-add-modal-template', product_id: product.id, unique: unique -%}
+        {%- endunless -%}
+      </div>
+    </quick-add-product>
+  {%- endif -%}
+{%- endcapture -%}
+
+{%- liquid
+  capture product_item_cutline
+    if settings.show_cutline and product.metafields.theme.cutline != blank and product.metafields.theme.cutline.type == 'single_line_text_field'
+      assign product_title_downcase = product.title | strip_html | escape | downcase
+      assign cutline_downcase = product.metafields.theme.cutline.value | downcase
+
+      unless product_title_downcase contains cutline_downcase
+        echo product.metafields.theme.cutline.value
+      endunless
+    endif
+  endcapture
+-%}
+
+{%- capture image_animations -%}
+  data-aos="img-in"
+  data-aos-delay="{{ aos_delay }}"
+  data-aos-duration="{{ aos_duration }}"
+  data-aos-anchor="{{ aos_anchor }}"
+  data-aos-easing="ease-out-quart"
+{%- endcapture -%}
+
+<div class="grid-item product-item {{ alignment_class }} {{ overlay_text_class }} {{ quickview_class }}"
+  id="{{ item_unique }}"
+  style="--swatch-size: var(--swatch-size-filters);"
+  data-grid-item
+>
+  <div class="product-item__image{% if double_img %} double__image{% endif %}" data-product-image>
+    <a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-product-link="{{ product_url }}">
+      {%- if product.media.size > 0 -%}
+        <div class="product-item__bg" data-product-image-default>
+          {%- liquid
+            assign fetchpriority = 'auto'
+            assign preload = false
+            if index <= eager_images_limit
+              assign fetchpriority = 'high'
+              assign preload = true
+            endif
+
+            capture featured_image
+              render 'image' image: product.featured_media.preview_image, aspect_ratio: aspect_ratio, sizes: sizes, widths: widths, loading: loading, fetchpriority: fetchpriority, preload: preload, attributes: image_animations, cover: true
+            endcapture
+          -%}
+
+          {%- if defer -%}
+            <deferred-image>
+              <template>
+                {{ featured_image }}
+              </template>
+            </deferred-image>
+          {%- else -%}
+            {{ featured_image }}
+          {%- endif -%}
+
+          {%- if settings.color_swatches and current_variant -%}
+            {%- assign image_inner_empty = true -%}
+            {%- for variant in product.variants -%}
+              {%- if variant.featured_image != blank -%}
+                {%- assign image_inner_empty = false -%}
+                {%- assign variant_title = variant.title | replace: '"', "'" -%}
+                <deferred-image class="product-item__bg__inner" data-variant-title="{{ variant_title }}">
+                  <template>
+                    {%- render 'image' image: variant.featured_image, aspect_ratio: aspect_ratio, sizes: sizes, widths: widths, cover: true -%}
+                  </template>
+                </deferred-image>
+              {%- endif -%}
+            {%- endfor -%}
+            {%- if image_inner_empty -%}
+              &nbsp;
+            {%- endif -%}
+          {%- else -%}
+            &nbsp;
+          {%- endif -%}
+        </div>
+
+        {%- if double_img -%}
+          {%- assign media = product.media[1] -%}
+          {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
+            <deferred-media class="product-item__bg__under deferred-media">
+              <template>
+                {%- liquid
+                  case media.media_type
+                    when 'video'
+                      echo media | media_tag: image_size: '1024x1024', class: 'media-video', autoplay: true, loop: true, controls: false, preload: 'none', muted: true
+                    when 'external_video'
+                      if media.host == 'youtube'
+                        echo media | external_video_url: autoplay: true, playsinline: true, loop: true, playlist: media.external_id, controls: false, mute: true, showinfo: false | external_video_tag: loading: 'lazy', data-host: media.host
+                      else
+                        echo media | external_video_url: autoplay: true, playsinline: true, loop: true, controls: false, muted: true | external_video_tag: data-host: media.host
+                      endif
+                  endcase
+                -%}
+              </template>
+            </deferred-media>
+          {%- else -%}
+            <deferred-image class="product-item__bg__under">
+              <template>
+                {%- render 'image' image: product.media[1].preview_image, aspect_ratio: aspect_ratio, sizes: sizes, widths: widths, cover: true -%}
+              </template>
+            </deferred-image>
+          {%- endif -%}
+        {%- endif -%}
+      {%- else -%}
+        {%- comment -%} Show Empty image if product has no media {%- endcomment -%}
+        <div class="product-item__bg image--empty" data-product-image-default></div>
+      {%- endif -%}
+
+      {%- if has_siblings -%}
+        <div class="product-item__bg__sibling" data-product-image-sibling></div>
+      {%- endif -%}
+    </a>
+
+    {{ over_image_content }}
+  </div>
+
+  <div class="product-information" data-product-information>
+    <div class="product-item__info">
+      <a class="product-link" href="{{ product_url }}" data-product-link="{{ product_url }}">
+        {%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
+          <div class="product-item__stars">
+            {% render 'product-rating', product: product %}
+          </div>
+        {%- endif -%}
+
+        <p class="product-item__title">{{ product.title | strip_html | escape }}</p>
+
+        <div class="product-item__price__holder{% if has_siblings %} has-siblings{% endif %}">
+          {%- if has_siblings or product_item_cutline != blank -%}
+            {%- assign cutline_color = settings.cutline_color -%}
+
+            {%- unless cutline_color == 'rgba(0,0,0,0)' or cutline_color == blank -%}
+              {%- assign style = '--text-light:' | append: cutline_color -%}
+            {%- endunless -%}
+
+            <span class="product-item__cutline"
+              data-product-cutline
+              {% if style != blank %}
+                style="{{ style }}"
+              {% endif %}
+            >{{ product_item_cutline }}</span>
+          {%- endif -%}
+
+          {%- if has_siblings -%}
+            <span class="product-item__sep">&#8212;</span>
+          {%- endif -%}
+
+          <div class="product-item__price" data-product-price>
+            {% comment %} Price on product grid item {% endcomment %}
+
+{%- liquid
+
+  assign product_price_raw = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
+  assign product_price_min_raw = product.price_min
+  assign product_compare_at_price_raw = product.compare_at_price
+
+  if product.metafields.app--168074346497.discount_percentage.value > 0.01
+    assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
+
+    assign product_price_raw = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
+    assign product_price_min_raw = product_price_raw
+
+    assign product_compare_at_price_raw = product.price
+
+    if product.compare_at_price > product_compare_at_price_raw
+      assign product_compare_at_price_raw = product.compare_at_price
+    endif
+  elsif product_price_raw < product.price
+    assign product_price_min_raw = product_price_raw
+    assign product_compare_at_price_raw = product.price
+
+    if product.compare_at_price > product_compare_at_price_raw
+      assign product_compare_at_price_raw = product.compare_at_price
+    endif
+  endif
+
+  if settings.currency_code_enable
+    assign product_price_min = product_price_min_raw | money_with_currency
+    assign product_compare_at_price = product_compare_at_price_raw | money_with_currency
+  else
+    assign product_price_min = product_price_min_raw | money
+    assign product_compare_at_price = product_compare_at_price_raw | money
+  endif
+-%}
+
+<span class="price{% if product_compare_at_price > product_price %} sale{% endif %}">
+  {% if product.available %}
+    <span class="new-price">
+      {% if product.price_varies %}
+        <small>{{ 'products.general.from' | t }}</small>
+      {% endif %}
+      {%- if product_price == 0 and product.price_varies == false -%}
+        {{ 'general.money.free' | t }}
+      {%- else -%}
+        {{ product_price_min }}
+      {%- endif -%}
+    </span>
+    {% if product_compare_at_price > product_price %}
+      <span class="old-price">{{ product_compare_at_price }}</span>
+    {% endif %}
+  {% else %}
+    <span class="sold-out">{{ 'products.product.sold_out' | t }}</span>
+  {% endif %}
+</span>
+{% if current_variant.unit_price %}
+  {% capture unit_price_separator %}
+    <span aria-hidden="true">/</span>
+    <span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
+  {% endcapture %}
+  {% capture unit_price_base_unit %}
+    {% if current_variant.unit_price_measurement.reference_value != 1 %}
+      {{ current_variant.unit_price_measurement.reference_value }}
+    {% endif %}
+    {{ current_variant.unit_price_measurement.reference_unit }}
+  {% endcapture %}
+  <br>
+  <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
+  <span class="unit small">{% if settings.currency_code_enable %}{{ current_variant.unit_price | money_with_currency }}{% else %}{{ current_variant.unit_price | money }}{% endif %}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
+{% endif %}
+          </div>
+        </div>
+      </a>
+
+      {%- if siblings_html != blank -%}
+        {{ siblings_html }}
+      {%- elsif has_colors -%}
+        <div class="product-item__swatches__holder product-item__swatches__holder--{{ settings.swatch_style }}">
+          {{ swatches }}
+
+          {%- if has_colors -%}
+            <span class="product-item__swatches__count">
+              <span data-swatch-count>&nbsp;</span>
+            </span>
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</div>