globo.filter.product.liquid
{%- comment -%}Do not edit this file{%- endcomment -%}
{% raw %}
{%- assign swatch_options = 'Colour~~Color' | downcase | split: "~~" | uniq -%}
{%- assign image_options = '' | downcase | split: "~~" | uniq -%}
{%- assign text_options = 'Size' | downcase | split: "~~" | uniq -%}
{%- assign image_size = '360x504' -%}
{%- assign no_image = 'https://cdn.shopify.com/s/images/themes/product-1.png' -%}
{%- assign featured_image = product.featured_image -%}
{%- assign product_price = product.price -%}
{%- assign product_compare_at_price = product.compare_at_price -%}
{%- assign selected_or_first_available_variant = product.selected_or_first_available_variant -%}
{%- assign variant_url = '' -%}
{%- if product.selected_or_first_available_variant -%}
{%- assign variant_url = '?variant=' | append: product.selected_or_first_available_variant.id -%}
{%- endif -%}
{% if product.selected_variant %}
{% assign selected_or_first_available_variant = product.selected_variant %}
{% assign product_price = selected_or_first_available_variant.price %}
{% assign product_compare_at_price = selected_or_first_available_variant.compare_at_price %}
{% if selected_or_first_available_variant.image %}
{% assign featured_image = selected_or_first_available_variant.image %}
{% endif %}
{% endif %}
{%- assign variants_count = product.variants | size -%}
{% endraw %}
{% assign str = "" %}
{% for item in cart.items %}
{% assign str = str | append: item.variant_id | append: ":" | append: item.quantity | append: "-" %}
{% endfor %}
{% raw %}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
{%- assign card_product = product -%}
{%- assign media_aspect_ratio = section.settings.image_ratio -%}
{%- assign image_shape = section.settings.image_shape -%}
{%- assign show_secondary_image = section.settings.show_secondary_image -%}
{%- assign show_vendor = section.settings.show_vendor -%}
{%- assign show_rating = section.settings.show_rating -%}
{%- assign quick_add = section.settings.quick_add -%}
{%- assign section_id = section.id %}
{%- liquid
assign ratio = 1
if card_product.featured_image and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_image and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_image.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}
{% comment %}
Customize price B2C or B2B price
{% endcomment %}
{% assign is_b2b = customer and customer.tags contains 'b2b' %}
{% for variant in card_product.variants %}
{% if is_b2b %}
{% if variant.title contains 'B2B' %}
{%- assign price = variant.price | money -%}
{%- assign data-price = variant.price -%}
{%- assign data-variant-id = variant.id -%}
{% endif %}
{% else %}
{% unless variant.title contains 'B2B' %}
{%- assign price = variant.price | money -%}
{%- assign data-price = variant.price -%}
{%- assign data-variant-id = variant.id -%}
{% endunless %}
{% endif %}
{% endfor %}
{%- if target == card_product and card_product.price_varies -%}
{%- if is_b2b -%}
{%- assign price = price %}
{%- assign money_price = price %}
{%- else -%}
{%- assign price = price %}
{%- assign money_price = price %}
{%- endif -%}
{%- endif -%}
{% comment %} END {% endcomment %}
<li{% if showPageData %} data-page="{{page}}" {% endif %}
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<div class="card-wrapper product-card-wrapper underline-links-hover ">
<div data-id="{{ data-variant-id }}" data-price="{{ data-price }}"
class="product-item
card card--{{ settings.card_style }}
{% if card_product.featured_image %} card--media{% else %} card--text{% endif %}
{% if settings.card_style == 'card' %} color-{{ section.settingscustom.card_color_scheme }} gradient{% endif %}
{% if image_shape and image_shape != 'default' %} card--shape{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if card_product.featured_image == nil and settings.card_style == 'card' %} ratio{% endif %}
{% if horizontal_class %} card--horizontal{% endif %}
"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
<div
class="card__inner {% if settings.card_style == 'standard' %}color-{{ section.settingscustom.card_color_scheme }} gradient{% endif %}{% if card_product.featured_image or settings.card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if card_product.featured_image -%}
<div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ section.settingscustom.card_color_scheme }} gradient{% endif %}">
<a href="{{ card_product.url }}">
<div class="media media--transparent media--hover-effect">
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img
srcset="
{%- if card_product.featured_image.width >= 165 -%}{{ card_product.featured_image | img_url: '165x' }} 165w,{%- endif -%}
{%- if card_product.featured_image.width >= 360 -%}{{ card_product.featured_image | img_url: '360x' }} 360w,{%- endif -%}
{%- if card_product.featured_image.width >= 533 -%}{{ card_product.featured_image | img_url: '533x' }} 533w,{%- endif -%}
{%- if card_product.featured_image.width >= 720 -%}{{ card_product.featured_image | img_url: '720x' }} 720w,{%- endif -%}
{%- if card_product.featured_image.width >= 940 -%}{{ card_product.featured_image | img_url: '940x' }} 940w,{%- endif -%}
{%- if card_product.featured_image.width >= 1066 -%}{{ card_product.featured_image | img_url: '1066x' }} 1066w,{%- endif -%}
{{ card_product.featured_image | img_url: '533x' }} {{ card_product.featured_image.width }}w
"
src="{{ card_product.featured_image | img_url: '533x' }}"
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="{{ card_product.featured_image.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.featured_image.width }}"
height="{{ card_product.featured_image.height }}"
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.images[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.images[1].width >= 165 -%}{{ card_product.images[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if card_product.images[1].width >= 360 -%}{{ card_product.images[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if card_product.images[1].width >= 533 -%}{{ card_product.images[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if card_product.images[1].width >= 720 -%}{{ card_product.images[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if card_product.images[1].width >= 940 -%}{{ card_product.images[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if card_product.images[1].width >= 1066 -%}{{ card_product.images[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ card_product.images[1] | img_url: '533x' }} {{ card_product.images[1].width }}w
"
src="{{ card_product.images[1] | img_url: '533x' }}"
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.images[1].width }}"
height="{{ card_product.images[1].height }}"
>
{%- endif -%}
</div>
</a>
</div>
{%- endif -%}
<div class="card__content">
<div class="card__information">
<h3
class="card__heading"
{% if card_product.featured_image == 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-{{ section.settingscustom.sold_out_badge_color_scheme }}"
>
{% endraw %}{{- 'products.product.sold_out' | t -}}{% raw %}
</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 }}"
>
{% endraw %}{{- 'products.product.on_sale' | t -}}{% raw %}
</span>
{%- endif -%}
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3
class="card__heading{% if card_product.featured_image or settings.card_style == 'standard' %} h5{% endif %}"
{% if card_product.featured_image 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">{% endraw %}{{ 'accessibility.vendor' | t }}{% raw %}</span>
<div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
{%- endif -%}
{%- if show_rating and card_product.metafields.reviews.rating != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.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"
>
<span
aria-hidden="true"
class="rating-star"
style="--rating: {{ card_product.metafields.reviews.rating | floor }}; --rating-max: 5; --rating-decimal: {{ rating_decimal }};"
></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">
{{- card_product.metafields.reviews.rating.value }} / 5
</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 }}
{% endraw %}{{ 'accessibility.total_reviews' | t -}}{% raw %}
</span>
</p>
{%- endif -%}
{%- assign show_compare_at_price = true -%}
{%- liquid
if use_variant
assign target = card_product.selected_or_first_available_variant
else
assign target = card_product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 0
assign price_min = card_product.price_min
assign price_max = card_product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
-%}
{% comment %} h custom {% endcomment %}
{% assign is_b2b = customer and customer.tags contains 'b2b' %}
{% for variant in card_product.variants %}
{% if is_b2b %}
{% if variant.title contains 'B2B' %}
{%- assign price = variant.price | money -%}
{% endif %}
{% else %}
{% unless variant.title contains 'B2B' %}
{%- assign price = variant.price | money -%}
{% endunless %}
{% endif %}
{% endfor %}
{%- if target == card_product and card_product.price_varies -%}
{%- if is_b2b -%}
{%- assign price = price %}
{%- assign money_price = price %}
{%- else -%}
{%- assign price = price %}
{%- assign money_price = price %}
{%- endif -%}
{%- endif -%}
{% comment %} h custom {% endcomment %}
{% comment %} h custom
{%- if target == card_product and card_product.price_varies -%}
{%- assign price = money_price %}
{%- capture money_price %} {% endraw %}{{ 'products.product.price.from_price_html' | t }}{% raw %} {%- endcapture -%}
{%- endif -%}
{% endcomment %}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if card_product.price_varies == false and card_product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
<div class="price__regular">
{%- if card_product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless card_product.price_varies == false and card_product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{% endraw %}{{- 'products.product.price.regular_price' | t -}}{% raw %}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price_min }} - {{ money_price_max }}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.sale_price }}' | t{% raw %}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
</div>
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% endraw %}{{ 'products.product.on_sale' | t }}{% raw %}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
{%- endif -%}
</div>
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{% endraw %}{{ 'products.product.volume_pricing.note' | t }}{% raw %}</span>
</div>
{%- endif -%}
</div>
</div>
{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
{% if quick_add == 'standard' %}
<div class="quick-add no-js-hidden">
{%- liquid
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 variants_count > 1 or qty_rules -%}
{% comment %} custom h {% endcomment %}
<a href="{{ card_product.url }}" class="custom-card-link">
{% endraw %}{{ 'products.product.choose_options' | t }}{% raw %}
</a>
{% comment %} custom h {% endcomment %}
<modal-opener class="hidden" 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 }}"
>
{% endraw %}{{ 'products.product.choose_options' | t }}{% raw %}
{%- if horizontal_quick_add -%}
<span class="icon-wrap">
<svg
viewBox="0 0 14 10"
fill="none"
aria-hidden="true"
focusable="false"
class="icon icon-arrow"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
</svg>
</span>
{%- endif -%}
<div class="{% if class %}{{ class }}{% else %}loading__spinner hidden{% endif %}">
<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="{% endraw %}{{ 'products.product.choose_product_options' | t }}{% raw %} {{ 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 }}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
class="icon icon-close"
fill="none"
viewBox="0 0 18 17"
>
<path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
</svg>
</button>
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
</div>
</quick-add-modal>
{%- else -%}
<product-form data-section-id="{{ section.id }}">
<form method="post" action="{{ root_url }}/cart/add" id="{{ product_form_id }}" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
<input type="hidden" name="form_type" value="product">
<input type="hidden" name="utf8" value="✓">
<input
type="hidden"
name="id"
value="{{ card_product.selected_or_first_available_variant.id }}"
class="product-variant-id"
{% if card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<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 -%}
{% endraw %}{{ 'products.product.add_to_cart' | t }}{% raw %}
{%- else -%}
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
{%- endif -%}
</span>
<span class="sold-out-message hidden">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
{%- if horizontal_quick_add -%}
<span class="icon-wrap">
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
class="icon icon-plus"
fill="none"
viewBox="0 0 10 10"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
</svg>
</span>
{%- endif -%}
<div class="{% if class %}{{ class }}{% else %}loading__spinner hidden{% endif %}">
<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>
</form>
</product-form>
{%- endif -%}
</div>
{% elsif quick_add == 'bulk' %}
{% if variants_count == 1 %}
<quick-add-bulk
data-min="{{ card_product.selected_or_first_available_variant.quantity_rule.min }}"
id="quick-add-bulk-{{ card_product.selected_or_first_available_variant.id }}-{{ section.id }}"
class="quick-add-bulk"
data-index="{{ card_product.selected_or_first_available_variant.id }}"
>
{% if card_product.selected_or_first_available_variant.available == false %}
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-sold-out-message="true"
disabled
>
<span>{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}</span>
<span class="sold-out-message hidden">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
</button>
{% else %}
{% assign variant = card_product.selected_or_first_available_variant %}
{% assign min = 0 %}
{% assign cartStr = "{% endraw %}{{str}}{% raw %}" | split: "-" %}
{% assign item_quantity = 0 %}
{% assign variantId = product.selected_or_first_available_variant.id %}
{% for cartItem in cartStr %}
{% if cartItem contains variantId %}
{% assign cartQuantity = cartItem | split: ":" | last %}
{% assign item_quantity = item_quantity | plus: cartQuantity %}
{% endif %}
{% endfor %}
<quantity-input class="quantity cart-quantity">
<button class="quantity__button" name="minus" type="button">
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-minus" viewBox="0 0 10 2"><path fill="currentColor" fill-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 1 1 0 1H1A.5.5 0 0 1 .5 1" clip-rule="evenodd"/></svg>
</span>
</button>
<input
class="quantity__input"
data-quantity-variant-id="{{ variant.id }}"
type="number"
name="updates[{{ variant_id }}]"
value="{{ item_quantity }}"
data-cart-quantity="{{ item_quantity }}"
min="{{ min }}"
data-min="1"
step="1"
aria-label="{{ variant.title | escape }}"
id="Quantity-{{ variant.id }}"
data-index="{{ variant.id }}"
>
<buttonclass="progress-bar">
<div class="progress-bar-value"></div>
</div>
</div>
</quantity-input>
{% endif %}
</quick-add-bulk>
{% else %}
<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
-%}
<modal-opener
id="QuickBulk-{{ card_product.id }}-{{ section_id }}"
data-modal="#QuickAddBulk-{{ card_product.id }}-{{ section.id }}"
>
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{% endraw %}{{ 'products.product.choose_options' | t }}{% raw %}
<div class="{% if class %}{{ class }}{% else %}loading__spinner hidden{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="spinner" viewBox="0 0 66 66"><circle stroke-width="6" cx="33" cy="33" r="30" fill="none" class="path"/></svg>
</div>
</button>
</modal-opener>
<modal-dialog
id="QuickAddBulk-{{ card_product.id }}-{{ section_id }}"
class="quick-add-modal color-{{ section.settings.color_scheme }}"
>
<div
role="dialog"
aria-label="{{ card_product.title | escape }}"
aria-modal="true"
class="quick-add-modal__content quick-add-modal__content--bulk global-settings-popup"
tabindex="-1"
>
<button
id="ModalClose-{{ card_product.id }}"
type="button"
class="quick-add-modal__toggle"
aria-label="{% endraw %}{{ 'accessibility.close' | t }}{% raw %}"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close" viewBox="0 0 18 17"><path fill="currentColor" d="M.865 15.978a.5.5 0 0 0 .707.707l7.433-7.431 7.579 7.282a.501.501 0 0 0 .846-.37.5.5 0 0 0-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 1 0-.707-.708L8.991 7.853 1.413.573a.5.5 0 1 0-.693.72l7.563 7.268z"/></svg>
</button>
<div
id="QuickAddInfo-{{ card_product.id }}"
class="quick-add-modal__content-info quick-add-modal__content-info--bulk"
>
<div class="quick-add__content-info__media">
<div class="quick-add__info">
{%- if card_product.featured_image -%}
<div
class="quick-add__product-media"
>
<div class="quick-add__product-container global-media-settings">
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img
srcset="
{%- if card_product.featured_image.width >= 165 -%}{{ card_product.featured_image | img_url: '165x' }} 165w,{%- endif -%}
{%- if card_product.featured_image.width >= 360 -%}{{ card_product.featured_image | img_url: '360x' }} 360w,{%- endif -%}
{%- if card_product.featured_image.width >= 533 -%}{{ card_product.featured_image | img_url: '533x' }} 533w,{%- endif -%}
{%- if card_product.featured_image.width >= 720 -%}{{ card_product.featured_image | img_url: '720x' }} 720w,{%- endif -%}
{%- if card_product.featured_image.width >= 940 -%}{{ card_product.featured_image | img_url: '940x' }} 940w,{%- endif -%}
{%- if card_product.featured_image.width >= 1066 -%}{{ card_product.featured_image | img_url: '1066x' }} 1066w,{%- endif -%}
{{ card_product.featured_image | img_url: '533x' }} {{ card_product.featured_image.width }}w
"
src="{{ card_product.featured_image | img_url: '533x' }}"
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="{{ card_product.featured_image.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.featured_image.width }}"
height="{{ card_product.featured_image.height }}"
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
</div>
</div>
{%- endif -%}
<a
{% if card_product == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_product.url }}"
{% endif %}
class="link product__view-details animate-arrow small-hide medium-hide"
>
{% endraw %}{{ 'products.product.view_full_details' | t -}}{% raw %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-arrow" viewBox="0 0 14 10"><path fill="currentColor" fill-rule="evenodd" d="M8.537.808a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L11.793 5.5H1a.5.5 0 0 1 0-1h10.793L8.646 1.354a.5.5 0 0 1-.109-.546" clip-rule="evenodd"/></svg>
</a>
</div>
<div class="quick-add-modal__content-info--bulk-details large-up-hide">
<a href="{{ card_product.url }}" class="full-unstyled-link">
<h3>{{ card_product.title | escape }} </h3>
</a>
{%- assign show_compare_at_price = true -%}
{%- liquid
if use_variant
assign target = card_product.selected_or_first_available_variant
else
assign target = card_product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = card_product.price_min
assign price_max = card_product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
-%}
{%- if target == card_product and card_product.price_varies -%}
{%- assign price = money_price %}
{%- capture money_price %} {% endraw %}{{ 'products.product.price.from_price_html' | t }}{% raw %} {%- endcapture -%}
{%- endif -%}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if card_product.price_varies == false and card_product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
<div class="price__regular">
{%- if card_product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless card_product.price_varies == false and card_product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{% endraw %}{{- 'products.product.price.regular_price' | t -}}{% raw %}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price_min }} - {{ money_price_max }}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.sale_price' | t }}{% raw %}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
</div>
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% endraw %}{{ 'products.product.on_sale' | t }}{% raw %}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
{%- endif -%}
</div>
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{% endraw %}{{ 'products.product.volume_pricing.note' | t }}{% raw %}</span>
</div>
{%- endif -%}
</div>
</div>
<div>
<div class="quick-add-modal__content-info--bulk-details small-hide medium-hide">
<a href="{{ card_product.url }}" class="full-unstyled-link">
<h3 class="h2">
{{ card_product.title | escape }}
</h3>
</a>
{%- assign show_compare_at_price = true -%}
{%- liquid
if use_variant
assign target = card_product.selected_or_first_available_variant
else
assign target = card_product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = card_product.price_min
assign price_max = card_product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
-%}
{%- if target == card_product and card_product.price_varies -%}
{%- assign price = money_price %}
{%- capture money_price %} {% endraw %}{{ 'products.product.price.from_price_html' | t }}{% raw %} {%- endcapture -%}
{%- endif -%}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if card_product.price_varies == false and card_product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
<div class="price__regular">
{%- if card_product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless card_product.price_varies == false and card_product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{% endraw %}{{- 'products.product.price.regular_price' | t -}}{% raw %}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price_min }} - {{ money_price_max }}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.sale_price' | t }}{% raw %}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
</div>
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% endraw %}{{ 'products.product.on_sale' | t }}{% raw %}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
{%- endif -%}
</div>
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{% endraw %}{{ 'products.product.volume_pricing.note' | t }}{% raw %}</span>
</div>
{%- endif -%}
</div>
<bulk-modal
id="QuickBulkModal-{{ card_product.id }}-{{ section_id }}"
data-url="{{ card_product.url }}"
data-section-id="{{ section_id }}"
data-product-id="{{ card_product.id }}"
>
</bulk-modal>
</div>
</div>
</div>
</modal-dialog>
</div>
{% endif %}
{% 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-{{ section.settingscustom.sold_out_badge_color_scheme }}"
>
{% endraw %}{{- 'products.product.sold_out' | t -}}{% raw %}
</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 }}"
>
{% endraw %}{{- 'products.product.on_sale' | t -}}{% raw %}
</span>
{%- endif -%}
</div>
</div>
<div class="product-right-custom">
{% if settings.price_checkbox == false or customer %}
<div class="quantity-selector">
<button class="qty-minus" data-id="{{ card_product.variants.first.id }}">-</button>
<input type="number" class="qty-input" data-id="{{ card_product.variants.first.id }}"
value="{{ card_product.metafields.custom.recommend_qty | default: 0 }}" min="0">
<button class="qty-plus" data-id="{{ card_product.variants.first.id }}">+</button>
</div>
{% endif %}
</div>
{% if card_product.metafields.custom.recommend_qty %}
<div class="recommended-quantity">
We recommend {{ card_product.metafields.custom.recommend_qty }} products for this model.
</div>
{% endif %}
</div>
</div>
</li> class="quantity__button" name="plus" type="button">
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-plus" viewBox="0 0 10 10"><path fill="currentColor" fill-rule="evenodd" d="M1 4.51a.5.5 0 0 0 0 1h3.5l.01 3.5a.5.5 0 0 0 1-.01V5.5l3.5-.01a.5.5 0 0 0-.01-1H5.5L5.49.99a.5.5 0 0 0-1 .01v3.5l-3.5.01z" clip-rule="evenodd"/></svg>
</span>
</button>
<div class="progress-bar-container hidden">
<div class="progress-bar">
<div class="progress-bar-value"></div>
</div>
</div>
</quantity-input>
{% endif %}
</quick-add-bulk>
{% else %}
<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
-%}
<modal-opener
id="QuickBulk-{{ card_product.id }}-{{ section_id }}"
data-modal="#QuickAddBulk-{{ card_product.id }}-{{ section.id }}"
>
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{% endraw %}{{ 'products.product.choose_options' | t }}{% raw %}
<div class="{% if class %}{{ class }}{% else %}loading__spinner hidden{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="spinner" viewBox="0 0 66 66"><circle stroke-width="6" cx="33" cy="33" r="30" fill="none" class="path"/></svg>
</div>
</button>
</modal-opener>
<modal-dialog
id="QuickAddBulk-{{ card_product.id }}-{{ section_id }}"
class="quick-add-modal color-{{ section.settings.color_scheme }}"
>
<div
role="dialog"
aria-label="{{ card_product.title | escape }}"
aria-modal="true"
class="quick-add-modal__content quick-add-modal__content--bulk global-settings-popup"
tabindex="-1"
>
<button
id="ModalClose-{{ card_product.id }}"
type="button"
class="quick-add-modal__toggle"
aria-label="{% endraw %}{{ 'accessibility.close' | t }}{% raw %}"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-close" viewBox="0 0 18 17"><path fill="currentColor" d="M.865 15.978a.5.5 0 0 0 .707.707l7.433-7.431 7.579 7.282a.501.501 0 0 0 .846-.37.5.5 0 0 0-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 1 0-.707-.708L8.991 7.853 1.413.573a.5.5 0 1 0-.693.72l7.563 7.268z"/></svg>
</button>
<div
id="QuickAddInfo-{{ card_product.id }}"
class="quick-add-modal__content-info quick-add-modal__content-info--bulk"
>
<div class="quick-add__content-info__media">
<div class="quick-add__info">
{%- if card_product.featured_image -%}
<div
class="quick-add__product-media"
>
<div class="quick-add__product-container global-media-settings">
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img
srcset="
{%- if card_product.featured_image.width >= 165 -%}{{ card_product.featured_image | img_url: '165x' }} 165w,{%- endif -%}
{%- if card_product.featured_image.width >= 360 -%}{{ card_product.featured_image | img_url: '360x' }} 360w,{%- endif -%}
{%- if card_product.featured_image.width >= 533 -%}{{ card_product.featured_image | img_url: '533x' }} 533w,{%- endif -%}
{%- if card_product.featured_image.width >= 720 -%}{{ card_product.featured_image | img_url: '720x' }} 720w,{%- endif -%}
{%- if card_product.featured_image.width >= 940 -%}{{ card_product.featured_image | img_url: '940x' }} 940w,{%- endif -%}
{%- if card_product.featured_image.width >= 1066 -%}{{ card_product.featured_image | img_url: '1066x' }} 1066w,{%- endif -%}
{{ card_product.featured_image | img_url: '533x' }} {{ card_product.featured_image.width }}w
"
src="{{ card_product.featured_image | img_url: '533x' }}"
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="{{ card_product.featured_image.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.featured_image.width }}"
height="{{ card_product.featured_image.height }}"
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
</div>
</div>
{%- endif -%}
<a
{% if card_product == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_product.url }}"
{% endif %}
class="link product__view-details animate-arrow small-hide medium-hide"
>
{% endraw %}{{ 'products.product.view_full_details' | t -}}{% raw %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-arrow" viewBox="0 0 14 10"><path fill="currentColor" fill-rule="evenodd" d="M8.537.808a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L11.793 5.5H1a.5.5 0 0 1 0-1h10.793L8.646 1.354a.5.5 0 0 1-.109-.546" clip-rule="evenodd"/></svg>
</a>
</div>
<div class="quick-add-modal__content-info--bulk-details large-up-hide">
<a href="{{ card_product.url }}" class="full-unstyled-link">
<h3>{{ card_product.title | escape }} </h3>
</a>
{%- assign show_compare_at_price = true -%}
{%- liquid
if use_variant
assign target = card_product.selected_or_first_available_variant
else
assign target = card_product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = card_product.price_min
assign price_max = card_product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
-%}
{%- if target == card_product and card_product.price_varies -%}
{%- assign price = money_price %}
{%- capture money_price %} {% endraw %}{{ 'products.product.price.from_price_html' | t }}{% raw %} {%- endcapture -%}
{%- endif -%}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if card_product.price_varies == false and card_product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
<div class="price__regular">
{%- if card_product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless card_product.price_varies == false and card_product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{% endraw %}{{- 'products.product.price.regular_price' | t -}}{% raw %}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price_min }} - {{ money_price_max }}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.sale_price' | t }}{% raw %}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
</div>
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% endraw %}{{ 'products.product.on_sale' | t }}{% raw %}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
{%- endif -%}
</div>
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{% endraw %}{{ 'products.product.volume_pricing.note' | t }}{% raw %}</span>
</div>
{%- endif -%}
</div>
</div>
<div>
<div class="quick-add-modal__content-info--bulk-details small-hide medium-hide">
<a href="{{ card_product.url }}" class="full-unstyled-link">
<h3 class="h2">
{{ card_product.title | escape }}
</h3>
</a>
{%- assign show_compare_at_price = true -%}
{%- liquid
if use_variant
assign target = card_product.selected_or_first_available_variant
else
assign target = card_product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = card_product.price_min
assign price_max = card_product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
-%}
{%- if target == card_product and card_product.price_varies -%}
{%- assign price = money_price %}
{%- capture money_price %} {% endraw %}{{ 'products.product.price.from_price_html' | t }}{% raw %} {%- endcapture -%}
{%- endif -%}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and card_product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if card_product.price_varies == false and card_product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
<div class="price__regular">
{%- if card_product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless card_product.price_varies == false and card_product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{% endraw %}{{- 'products.product.price.regular_price' | t -}}{% raw %}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price_min }} - {{ money_price_max }}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.regular_price' | t }}{% raw %}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{% endraw %}{{ 'products.product.price.sale_price' | t }}{% raw %}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
</div>
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% endraw %}{{ 'products.product.on_sale' | t }}{% raw %}
</span>
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{% endraw %}{{ 'products.product.sold_out' | t }}{% raw %}
</span>
{%- endif -%}
</div>
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{% endraw %}{{ 'products.product.volume_pricing.note' | t }}{% raw %}</span>
</div>
{%- endif -%}
</div>
<bulk-modal
id="QuickBulkModal-{{ card_product.id }}-{{ section_id }}"
data-url="{{ card_product.url }}"
data-section-id="{{ section_id }}"
data-product-id="{{ card_product.id }}"
>
</bulk-modal>
</div>
</div>
</div>
</modal-dialog>
</div>
{% endif %}
{% 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-{{ section.settingscustom.sold_out_badge_color_scheme }}"
>
{% endraw %}{{- 'products.product.sold_out' | t -}}{% raw %}
</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 }}"
>
{% endraw %}{{- 'products.product.on_sale' | t -}}{% raw %}
</span>
{%- endif -%}
</div>
</div>
<div class="product-right-custom">
{% if settings.price_checkbox == false or customer %}
<div class="quantity-selector">
<button class="qty-minus" data-id="{{ card_product.variants.first.id }}">-</button>
<input type="number" class="qty-input" data-id="{{ card_product.variants.first.id }}"
value="{{ card_product.metafields.custom.recommend_qty | default: 0 }}" min="0">
<button class="qty-plus" data-id="{{ card_product.variants.first.id }}">+</button>
</div>
{% endif %}
</div>
{% if card_product.metafields.custom.recommend_qty %}
<div class="recommended-quantity">
We recommend {{ card_product.metafields.custom.recommend_qty }} products for this model.
</div>
{% endif %}
</div>
</div>
</li>
{% endraw %}
