{%- liquid assign aspect_ratio = settings.product_card_aspect_ratio if settings.within_filter_enabled and product_collection assign product_url = product.url | within: product_collection else assign product_url = product.url endif -%} {% if settings.product_card_thumbnail_link %} {%- if layout contains 'grid-4' -%} {%- capture sizes -%} (max-width: 1023px) calc((100vw - 100px) / 3), (max-width: {{ settings.theme_max_width }}px) calc((100vw - 120px) / 4), {{ settings.theme_max_width | minus: 120 | divided_by: 4 }}px" {%- endcapture -%} {%- else -%} {%- capture sizes -%} (max-width: {{ settings.theme_max_width }}px) calc((100vw - 120px) / 3), {{ settings.theme_max_width | minus: 120 | divided_by: 3 }}px" {%- endcapture -%} {%- endif -%} {%- assign sizes = sizes | prepend: 'sizes="(max-width: 359px) calc(100vw - 30px), (max-width: 767px) calc((100vw - 50px) / 2),' -%} {%- if product.media.size == 0 or blank_product -%} {%- liquid assign no = index | modulo: 6 | plus: 1 assign blank_image = 'product-X' | replace: 'X', no render 'lazy-svg', image: blank_image, ratio: 1, class: 'svg-placeholder svg-placeholder--background' -%} {%- elsif settings.product_card_thumbnail_gallery == false or product.media.size == 1 or product.images.size == 0 -%}

{%- render 'lazy-image', image: product.featured_media, alt: product.title, ratio: aspect_ratio, fit: settings.product_card_aspect_ratio_fit, type: 'background', class: 'product-item__image-figure product-item__image-figure--top lazy-image--to-reveal lazy-image--zoom-animation product-item__image-no-slider', sizes: sizes, preload: preload -%} {% if product.media.size > 2 %} {% comment %}

{%- render 'lazy-image', image: product.media[1], alt: product.title, ratio: aspect_ratio, fit: settings.product_card_aspect_ratio_fit, type: 'background', class: 'product-item__image-figure product-item__image-figure--top lazy-image--to-reveal lazy-image--zoom-animation product-item__image-no-slider', sizes: sizes, preload: preload -%}

{%- else -%}

{%- liquid for image in product.images assign class = 'product-item__image-figure product-item__image-figure--top lazy-image--zoom-animation' assign class = class | append: ' product-item__image-' | append: image.id if forloop.first assign class = class | append: ' lazy-image--to-reveal' endif render 'lazy-image', image: image, ratio: aspect_ratio, fit: settings.product_card_aspect_ratio_fit, class: class, sizes: sizes, preload: preload endfor -%}

{%- endif -%} {%- for block in section_blocks -%} {%- case block.type %} {%- when 'title' -%}

{%- liquid unless blank_product echo product.title | escape else echo 'general.onboarding.product_title' | t endunless -%}

{%- when 'price' -%}

{% unless blank_product %} {%- render 'product-price', target: product, variant: product_variant, product_price_varies: product.price_varies -%} {%- else -%} {{ 9999 | money }} {%- endunless -%}

{% if isblankproduct %}

Earliest Delivery

{% endif %} {%- when 'text' -%}

{%- liquid assign metafield_reference = block.settings.metafield if metafield_reference != blank assign metafield_keys = metafield_reference | split: '.' assign metafield_value = product.metafields[metafield_keys[0]][metafield_keys[1]] if metafield_value != blank echo metafield_value | prepend: '

' | append: '

' endif endif -%}

{%- when 'icons' -%}

{%- liquid if settings.product_icon_1_image != blank or settings.product_icon_1_label != blank assign image_metafield_keys = settings.product_icon_1_image | split: '.' assign icon_1_image = product.metafields[image_metafield_keys[0]][image_metafield_keys[1]] | image_url assign label_metafield_keys = settings.product_icon_1_label | split: '.' assign icon_1_image_label = product.metafields[label_metafield_keys[0]][label_metafield_keys[1]] render 'product-icon-label', icon: icon_1_image, label: icon_1_image_label, style: 'pill--compact' endif if settings.product_icon_2_image != blank or settings.product_icon_2_label != blank assign image_metafield_keys = settings.product_icon_2_image | split: '.' assign icon_2_image = product.metafields[image_metafield_keys[0]][image_metafield_keys[1]] | image_url assign label_metafield_keys = settings.product_icon_2_label | split: '.' assign icon_2_image_label = product.metafields[label_metafield_keys[0]][label_metafield_keys[1]] render 'product-icon-label', icon: icon_2_image, label: icon_2_image_label, style: 'pill--compact' endif if settings.product_icon_3_image != blank or settings.product_icon_3_label != blank assign image_metafield_keys = settings.product_icon_3_image | split: '.' assign icon_3_image = product.metafields[image_metafield_keys[0]][image_metafield_keys[1]] | image_url assign label_metafield_keys = settings.product_icon_3_label | split: '.' assign icon_3_image_label = product.metafields[label_metafield_keys[0]][label_metafield_keys[1]] render 'product-icon-label', icon: icon_3_image, label: icon_3_image_label, style: 'pill--compact' endif -%}

{%- when 'description' -%}

{%- liquid if product.excerpt.size > 0 echo product.excerpt | strip_html | truncatewords: block.settings.excerpt_limit, "..." else echo product.content | strip_html | truncatewords: block.settings.excerpt_limit, "..." endif -%} {%- if block.settings.show_link -%}

{%- endif -%}

{%- when 'vendor' -%} {% if isblankproduct %} {% assign formattedVendor = product.vendor | downcase | replace: '-', '_' | replace: ' ', '_' | replace: '+', '_' | remove: '__' %} {% assign formattedVendor = formattedVendor | replace : '.' , '' %}

starting at

{% comment %} {{ product.vendor | escape }} {% endcomment %} {% if formattedVendor != blank %}

{% else %}

Unknown Vendor

{% endif %}

{% else %}

starting at

{% endif %} {%- when 'quick_buy' -%} {%- unless product.available == false and block.settings.show_only_available -%} {%- assign block_id = block.id | append: '-' | append: section_id | append: '-' | append: index -%}

{%- liquid unless product == blank render 'quick-buy', product: product, variants_style: settings.variants_style, show_color_swatches: settings.color_swatches, change_variant_images: settings.variant_images, default_to_first_variant: block.settings.variant_default, add_to_cart_price: block.settings.show_price, show_variant_quantities: "no", unavailable_variants: block.settings.unavailable_variants, image_sizes: sizes, image_aspect_ratio: aspect, id: block_id endunless -%}

{%- endunless -%} {%- when 'product_link' -%} {%- liquid unless product == blank render 'button', label: block.settings.button_label, link: product_url, style: 'outline product-item__link', fullwidth: true, attribute: block.shopify_attributes endunless -%} {%- when 'rating' -%}

{%- render 'star-rating', vendor: block.settings.reviews_app, product: product, hide_no_reviews_on_mobile: true -%}

{%- endcase %} {%- endfor -%} {%- if add_quick_buy -%} {%- assign block_id = 'add-quick-buy-' | append: section_id | append: '-' | append: index -%}

{%- liquid unless product == blank render 'quick-buy', product: product, defer_purchase: true, defer_add: defer_add, variants_style: settings.variants_style, show_color_swatches: settings.color_swatches, change_variant_images: settings.variant_images, default_to_first_variant: false, add_to_cart_price: settings.show_price, show_variant_quantities: 'no', unavailable_variants: 'hide', image_sizes: sizes, image_aspect_ratio: aspect, id: block_id endunless -%}

{%- endif -%} {%- unless blank_product or show_badges == false -%}

{%- if product.available == false -%} {{ 'products.grid.sold_out_product' | t }} {%- endif -%} {%- if product.compare_at_price > product.price -%} {%- liquid if product.compare_at_price_varies or product.price_varies assign compare_price_nums = 0 assign max_compare_at_price = 0 assign compare_at_price = 0 assign price = 0 for variant in product.variants if variant.compare_at_price > variant.price assign variant_compare_at_price = variant.compare_at_price | minus: variant.price if variant_compare_at_price > max_compare_at_price assign max_compare_at_price = variant_compare_at_price assign compare_at_price = variant.compare_at_price assign price = variant.price assign compare_price_nums = compare_price_nums | plus: 1 endif endif endfor else assign compare_at_price = product.compare_at_price assign price = product.price assign compare_price_nums = 1 endif -%} {%- liquid if settings.product_card_badge_sale_type == 'percentage' assign saved = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round | prepend: '-' | append: '%' if compare_price_nums == 1 and product.compare_at_price_varies == false echo saved else echo 'products.grid.save_percent' | t: percent: saved endif elsif settings.product_card_badge_sale_type == 'amount' assign saved = compare_at_price | minus: price | money if compare_price_nums == 1 echo 'products.grid.save_amount_html' | t: amount: saved else echo 'products.grid.save_up_to_amount_html' | t: amount: saved endif else echo 'products.grid.on_sale_product' | t endif -%} {%- endif -%} {%- if settings.product_card_badge_custom_1_tags != blank and product.tags contains settings.product_card_badge_custom_1_tags -%} {{ settings.product_card_badge_custom_1_text }} {%- endif -%} {%- if settings.product_card_badge_custom_2_tags != blank and product.tags contains settings.product_card_badge_custom_2_tags -%} {{ settings.product_card_badge_custom_2_text }} {%- endif -%} {%- if settings.product_card_badge_custom_3_tags != blank and product.tags contains settings.product_card_badge_custom_3_tags -%} {{ settings.product_card_badge_custom_3_text }} {%- endif -%}

{%- endunless -%}