pull/1/head
Jan Umbach 2024-05-30 09:48:12 +02:00
parent 984a19cc30
commit ce51dcfe31
2 changed files with 75 additions and 114 deletions

View File

@ -25,29 +25,22 @@
-%} -%}
<div class="article-card-wrapper card-wrapper underline-links-hover"> <div class="article-card-wrapper card-wrapper underline-links-hover">
{% comment %} <article aria-labelledby="Article-{{ article.id }}"> {% endcomment %} {% comment %} <article aria-labelledby="Article-{{ article.id }}"> {% endcomment %}
<div <div class="
class="
card article-card card article-card
card--{{ settings.blog_card_style }} card--{{ settings.blog_card_style }}
{% if media_height and media_height != 'adapt' %} article-card__image--{{ media_height }}{% endif %} {% if media_height and media_height != 'adapt' %} article-card__image--{{ media_height }}{% endif %}
{% if article.image and show_image %} card--media{% else %} card--text{% endif %} {% if article.image and show_image %} card--media{% else %} card--text{% endif %}
{% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %} {% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}
{% if settings.blog_card_style == 'card' and media_height == nil and article.image == empty or show_image == false %} ratio{% endif %} {% if settings.blog_card_style == 'card' and media_height == nil and article.image == empty or show_image == false %} ratio{% endif %}
" " style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;" <div class="card__inner {% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.blog_card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
>
<div
class="card__inner {% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.blog_card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if show_image == true and article.image -%} {%- if show_image == true and article.image -%}
<div class="article-card__image-wrapper card__media"> <div class="article-card__image-wrapper card__media">
<div <div
class="article-card__image media media--hover-effect" class="article-card__image media media--hover-effect"
{% if section.settings.media_height == 'adapt' %} {% if section.settings.media_height == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;" style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
{% endif %} {% endif %}>
>
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img <img
srcset=" srcset="
@ -57,18 +50,17 @@
{%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%} {%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
{%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%} {%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%} {%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ article.image.src | image_url }} {{ article.image.src.width }}w {{ article.image.src | image_url }} {{ article.image.src.width }}
" "
src="{{ article.image.src | image_url: width: 533 }}" src="{{ article.image.src | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ article.image.src.alt | escape }}" alt="{{ article.image.src.alt | escape }}"
class="motion-reduce" class="motion-reduce"
{% unless lazy_load == false %} {% unless lazy_load == false %}
loading="lazy" loading="lazy"
{% endunless %} {% endunless %}
width="{{ article.image.width }}" width="{{ article.image.width }}"
height="{{ article.image.height }}" height="{{ article.image.height }}">
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
</div> </div>
</div> </div>

View File

@ -36,8 +36,7 @@
endif endif
-%} -%}
<div class="card-wrapper product-card-wrapper underline-links-hover"> <div class="card-wrapper product-card-wrapper underline-links-hover">
<div <div class="
class="
card card--{{ settings.card_style }} card card--{{ settings.card_style }}
{% if card_product.featured_media %} card--media{% else %} card--text{% endif %} {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %} {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
@ -45,17 +44,12 @@
{% if extend_height %} card--extend-height{% endif %} {% if extend_height %} card--extend-height{% endif %}
{% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %} {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
{% if horizontal_class %} card--horizontal{% endif %} {% if horizontal_class %} card--horizontal{% endif %}
" " style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;" <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
>
<div
class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if card_product.featured_media -%} {%- if card_product.featured_media -%}
<div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"> <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
<div class="media media--transparent media--hover-effect"> <div class="media media--transparent media--hover-effect">
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img <img
srcset=" srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%} {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
@ -71,32 +65,32 @@
alt="{{ card_product.featured_media.alt | escape }}" alt="{{ card_product.featured_media.alt | escape }}"
class="motion-reduce" class="motion-reduce"
{% unless lazy_load == false %} {% unless lazy_load == false %}
loading="lazy" loading="lazy"
{% endunless %} {% endunless %}
width="{{ card_product.featured_media.width }}" width="{{ card_product.featured_media.width }}"
height="{{ card_product.featured_media.height }}" height="{{ card_product.featured_media.height }}">
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null and show_secondary_image -%} {%- if card_product.media[1] != null and show_secondary_image -%}
<img {%- echo card_product.media[1] | media_tag: image_size: "2048x", autoplay: true, loop: true, controls: false, preload: "none" -%}
srcset=" {% comment %}<img
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%} srcset="
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%} {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%} {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%} {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%} {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%} {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w {%- 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)" src="{{ card_product.media[1] | image_url: width: 533 }}"
alt="" 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)"
class="motion-reduce" alt=""
loading="lazy" class="motion-reduce"
width="{{ card_product.media[1].width }}" loading="lazy"
height="{{ card_product.media[1].height }}" width="{{ card_product.media[1].width }}"
> height="{{ card_product.media[1].height }}"
>{% endcomment %}
{%- endif -%} {%- endif -%}
</div> </div>
</div> </div>
@ -106,32 +100,24 @@
<h3 <h3
class="card__heading" class="card__heading"
{% if card_product.featured_media == null and settings.card_style == 'standard' %} {% if card_product.featured_media == null and settings.card_style == 'standard' %}
id="title-{{ section_id }}-{{ card_product.id }}" id="title-{{ section_id }}-{{ card_product.id }}"
{% endif %} {% endif %}>
>
<a <a
href="{{ card_product.url }}" href="{{ card_product.url }}"
id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}" id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link" class="full-unstyled-link"
aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}">
>
{{ card_product.title | escape }} {{ card_product.title | escape }}
</a> </a>
</h3> </h3>
</div> </div>
<div class="card__badge {{ settings.badge_position }}"> <div class="card__badge {{ settings.badge_position }}">
{%- if card_product.available == false -%} {%- if card_product.available == false -%}
<span <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}} {{- 'products.product.sold_out' | t -}}
</span> </span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}} {{- 'products.product.on_sale' | t -}}
</span> </span>
{%- endif -%} {%- endif -%}
@ -143,15 +129,13 @@
<h3 <h3
class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}" 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' %} {% if card_product.featured_media or settings.card_style == 'card' %}
id="title-{{ section_id }}-{{ card_product.id }}" id="title-{{ section_id }}-{{ card_product.id }}"
{% endif %} {% endif %}>
>
<a <a
href="{{ card_product.url }}" href="{{ card_product.url }}"
id="CardLink-{{ section_id }}-{{ card_product.id }}" id="CardLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link" class="full-unstyled-link"
aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}" aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}">
>
{{ card_product.title | escape }} {{ card_product.title | escape }}
</a> </a>
</h3> </h3>
@ -176,13 +160,11 @@
<div <div
class="rating" class="rating"
role="img" 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 }}" 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 <span
aria-hidden="true" aria-hidden="true"
class="rating-star" class="rating-star"
style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};" 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>
></span>
</div> </div>
<p class="rating-text caption"> <p class="rating-text caption">
<span aria-hidden="true"> <span aria-hidden="true">
@ -199,7 +181,10 @@
</p> </p>
{%- endif -%} {%- endif -%}
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {% render 'price'
, product: card_product
, price_class: ''
, show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%} {%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note"> <div class="card__information-volume-pricing-note">
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span> <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
@ -225,8 +210,7 @@
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}" 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-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}" aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}" data-product-url="{{ card_product.url }}">
>
{{ 'products.product.choose_options' | t }} {{ 'products.product.choose_options' | t }}
{%- if horizontal_quick_add -%} {%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span> <span class="icon-wrap">{% render 'icon-arrow' %}</span>
@ -240,14 +224,12 @@
aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}" aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
aria-modal="true" aria-modal="true"
class="quick-add-modal__content global-settings-popup" class="quick-add-modal__content global-settings-popup"
tabindex="-1" tabindex="-1">
>
<button <button
id="ModalClose-{{ card_product.id }}" id="ModalClose-{{ card_product.id }}"
type="button" type="button"
class="quick-add-modal__toggle" class="quick-add-modal__toggle"
aria-label="{{ 'accessibility.close' | t }}" aria-label="{{ 'accessibility.close' | t }}">
>
{% render 'icon-close' %} {% render 'icon-close' %}
</button> </button>
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div> <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
@ -255,12 +237,12 @@
</quick-add-modal> </quick-add-modal>
{%- else -%} {%- else -%}
<product-form data-section-id="{{ section.id }}"> <product-form data-section-id="{{ section.id }}">
{%- form 'product', {%- form 'product'
card_product, , card_product
id: product_form_id, , id: product_form_id
class: 'form', , class: 'form'
novalidate: 'novalidate', , novalidate: 'novalidate'
data-type: 'add-to-cart-form' , data-type: 'add-to-cart-form'
-%} -%}
<input <input
type="hidden" type="hidden"
@ -268,9 +250,8 @@
value="{{ card_product.selected_or_first_available_variant.id }}" value="{{ card_product.selected_or_first_available_variant.id }}"
class="product-variant-id" class="product-variant-id"
{% if card_product.selected_or_first_available_variant.available == false %} {% if card_product.selected_or_first_available_variant.available == false %}
disabled disabled
{% endif %} {% endif %}>
>
<button <button
id="{{ product_form_id }}-submit" id="{{ product_form_id }}-submit"
type="submit" type="submit"
@ -281,9 +262,8 @@
aria-live="polite" aria-live="polite"
data-sold-out-message="true" data-sold-out-message="true"
{% if card_product.selected_or_first_available_variant.available == false %} {% if card_product.selected_or_first_available_variant.available == false %}
disabled disabled
{% endif %} {% endif %}>
>
<span> <span>
{%- if card_product.selected_or_first_available_variant.available -%} {%- if card_product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }} {{ 'products.product.add_to_cart' | t }}
@ -306,17 +286,11 @@
{%- endif -%} {%- endif -%}
<div class="card__badge {{ settings.badge_position }}"> <div class="card__badge {{ settings.badge_position }}">
{%- if card_product.available == false -%} {%- if card_product.available == false -%}
<span <span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">
id="Badge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}} {{- 'products.product.sold_out' | t -}}
</span> </span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span <span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
id="Badge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}} {{- 'products.product.on_sale' | t -}}
</span> </span>
{%- endif -%} {%- endif -%}
@ -332,24 +306,15 @@
endif endif
-%} -%}
<div class="card-wrapper product-card-wrapper underline-links-hover"> <div class="card-wrapper product-card-wrapper underline-links-hover">
<div <div class="
class="
card card--{{ settings.card_style }} card card--{{ settings.card_style }}
{% if extend_height %} card--extend-height{% endif %} {% if extend_height %} card--extend-height{% endif %}
{% if image_shape and image_shape != 'default' %} card--shape{% endif %} {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %} {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
" " style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;" <div class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio">
> <div class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
<div <div class="media media--transparent">
class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
>
<div
class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
>
<div
class="media media--transparent"
>
{%- if placeholder_image -%} {%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%} {%- else -%}
@ -361,7 +326,10 @@
<div class="card__content"> <div class="card__content">
<div class="card__information"> <div class="card__information">
<h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}"> <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
<a role="link" aria-disabled="true" class="full-unstyled-link"> <a
role="link"
aria-disabled="true"
class="full-unstyled-link">
{{ 'onboarding.product_title' | t }} {{ 'onboarding.product_title' | t }}
</a> </a>
</h3> </h3>
@ -370,7 +338,8 @@
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span> <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div> <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
{%- endif -%} {%- endif -%}
{% render 'price', show_compare_at_price: true %} {% render 'price'
, show_compare_at_price: true %}
</div> </div>
</div> </div>
</div> </div>