OR alternatively in the product-grid-item snippet, here:
{% comment %}
@Anonymous product {Object}
Required to show product information
{% endcomment %}
{% assign recently_viewed = recently_viewed | default: nil %}
{% assign product_grid_show_second_image = settings.product_grid_show_second_image %}
{% assign emphasize_price = settings.product_grid_emphasize_price %}
{% assign quick_shop_display = settings.product_grid_show_quickshop %}
{% assign atc_display = settings.product_grid_show_atc %}
{% assign product_ratings_reviews = settings.product_ratings_reviews %}
{% assign product_ratings_star_display = settings.product_ratings_star_display %}
{% assign money_format = shop.money_format | strip_html %}
{% if product %}
{% assign compare_at_price = product.compare_at_price %}
{% assign compare_at_price_varies = product.compare_at_price_varies %}
{% assign price = product.price %}
{% assign price_varies = product.price_varies %}
{% assign product_available = product.available %}
{% assign product_title = product.title %}
{% assign product_vendor = product.vendor %}
{% assign product_link = product.url | within: collection %}
{% assign product_description = product.description | strip_html %}
{% assign product_description_size = product.description | strip_html | size %}
{% if recently_viewed == true %}
{%- capture recently_viewed_header -%}
{% render 'icon-remove' %}
{%- endcapture -%}
{% endif %}
{% else %}
{% assign onboarding = true %}
{% assign compare_at_price = 1999 %}
{% assign compare_at_price_varies = false %}
{% assign price = 1999 %}
{% assign price_varies = false %}
{% assign product_available = true %}
{% assign product_title = 'onboarding.product.title' | t %}
{% assign product_vendor = 'onboarding.product.vendor' | t %}
{% assign product_link = '#' %}
{% endif %}
{% assign on_sale = false %}
{% if compare_at_price > price %}
{% assign on_sale = true %}
{% endif %}
{% assign has_variants = false %}
{% unless product.has_only_default_variant %}
{% assign has_variants = true %}
{% endunless %}
{% assign consistent_saved = false %}
{% capture consistent_savings %}
{%
render ‘consistent-savings’,
variants: product.variants,
on_sale: on_sale
%}
{% endcapture %}
{% if consistent_savings contains ‘true’ %}
{% assign consistent_saved = true %}
{% endif %}
{%- capture classes -%}
productgrid–item
imagestyle–{% if settings.product_grid_image_crop and settings.product_grid_image_style != ‘natural’ %}cropped-{% endif %}{{ settings.product_grid_image_style }}
{% unless product.featured_image %}imagestyle–no-image{% endunless %}
{% if on_sale %}productitem–sale{% endif %}
{% if emphasize_price %}productitem–emphasis{% endif %}
{% if recently_viewed %}product-recently-viewed-card{% endif %}
{% if atc_display == ‘always’ or quick_shop_display == ‘always’ %}show-actions–mobile{% endif %}
{%- endcapture -%}
{% capture to_hash %}
{{ shop.money_format | strip_html }}
{{ settings | json }}
{{ ‘product.buttons.add_to_cart’ | t }}
{{ ‘product.buttons.sold_out’ | t }}
{{ product | json }}
{% endcapture %}
{% assign to_hash = to_hash | replace: ’ ', ‘’ | sha256 %}
{%- assign show_swatches = false -%}
{% assign initial_image = product.featured_media.preview_image.src %}
{%- if settings.swatches_enable and recently_viewed != true -%}
{% comment %} Check if product should show swatches {% endcomment %}
{%- for option in product.options_with_values -%}
{%- assign swatch_trigger = settings.swatches_swatch_trigger | strip | downcase -%}
{%- assign option_name = option.name | downcase -%}
{%- if option_name == swatch_trigger -%}
{%- assign show_swatches = true -%}
{%- assign swatch_values = option.values -%}
{%- assign swatch_values_count = option.values.size -%}
{%- assign swatch_option_key = ‘option’ | append: forloop.index -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{% if section.settings.filter_style == ‘groups’ and current_tags and show_swatches %}
{% comment %} We are filtered by tags, so check and see if it’s filtering by swatch {% endcomment %}
{% for tag in current_tags %}
{% assign tag_group = tag | split: ‘’ | first | downcase %}
{% if tag_group == swatch_trigger %}
{% assign active_swatch_name = tag | split: '’ | last | downcase %}
{% comment %} Filter variants by swatch (for ex. where color == blue). Can’t use | where due to case sensitivity {% endcomment %}
{% for variant in product.variants %}
{% assign option_value = variant[swatch_option_key] | downcase %}
{% if option_value == active_swatch_name %}
{% if variant.image %}
{% assign initial_image = variant.image %}
{% endif %}
{% break %}
{% endif %}
{% endfor %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% capture product_item_swatches %}
{%- if show_swatches -%}
{% for swatch_value in swatch_values %}
{% assign swatch_value_downcased = swatch_value | downcase %}
{% assign use_variant_images = false %}
{% if settings.swatches_option_style == 'variant_image' %}
{% assign use_variant_images = true %}
{% endif %}
{% assign use_aspect_ratio = false %}
{% if settings.swatches_shape == 'square' %}
{% assign use_aspect_ratio = true %}
{% endif %}
{%- capture swatch_styles -%}
{%
render 'swatch-styles',
color_name: swatch_value,
use_variant_images: use_variant_images,
swatch_product: product,
swatch_option_key: swatch_option_key,
swatch_size: settings.swatches_product_card_size,
use_aspect_ratio: use_aspect_ratio,
%}
{%- endcapture -%}
{% endfor %}
+
{%- endif -%}
{% endcapture %}
{%- endif -%}
{{ recently_viewed_header }}
{% if initial_image %}
{% if product_grid_show_second_image and product.media.size > 1 %}
{% assign second_image = product.media[1].preview_image.src %}
{%
render 'rimg',
img: second_image,
size: '512x',
lazy: true,
class: 'productitem--image-alternate',
canvas: true
%}
{% endif %}
{%
render 'rimg',
img: initial_image
size: '512x',
lazy: true,
class: 'productitem--image-primary',
canvas: true
%}
{% else %}
{% if product %}
{{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
{% else %}
{%- capture index -%}
{%- cycle '1', '2', '3', '4', '5', '6' -%}
{%- endcapture -%}
{{ 'product-' | append: index | placeholder_svg_tag: 'placeholder--image' }}
{% endif %}
{% endif %}
{%
render ‘product-badge’,
class_root: ‘productitem’,
product_available: product_available,
on_sale: on_sale,
price: price,
compare_at_price: compare_at_price,
show_saved: consistent_saved
%}
{%- capture product_item_price -%}
{%
render ‘product-price’,
class_root: ‘productitem’,
price: price,
price_varies: price_varies,
compare_at_price: compare_at_price,
compare_at_price_varies: compare_at_price_varies,
on_sale: on_sale,
emphasize_price: emphasize_price,
show_original: consistent_saved
%}
{%- endcapture -%}
{{ product_item_swatches }}
{% if emphasize_price %}
{{ product_item_price }}
{% endif %}
{% if settings.product_show_vendor and product.vendor != blank %}
{{ product_vendor | link_to_vendor }}
{% endif %}
{% unless emphasize_price %}
{{ product_item_price }}
{% endunless %}
{% if product_ratings_reviews and product_ratings_star_display == “all” %}
{% endif %}
{% if product_description %}
{{ product_description | truncate: 150 }}
{% if product_description_size > 150 and product_link %}
<a
href=“{{ product_link }}”
class=“productitem–link”
data-product-page-link
{{ ‘product.buttons.view_details’ | t }}
{% endif %}
{% endif %}
{% unless recently_viewed %}
{% if quick_shop_display != ‘disabled’ or atc_display != ‘disabled’ %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = ‘product.buttons.quick_shop’ | t %}
{% assign quick_buy_text = ‘product.buttons.add_to_cart’ | t %}
{% assign quick_shop_classes = ‘productitem–action-trigger button-secondary’ %}
{% assign quick_buy_classes = ‘productitem–action-trigger productitem–action-atc button-primary’ %}
{% if has_variants %}
{% assign quick_buy_text = ‘product.buttons.choose_options’ | t %}
{% endif %}
{% unless product_available %}
{% assign quick_buy_text = ‘product.buttons.sold_out’ | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ’ disabled’ %}
{% endunless %}
{% if section.settings.grid_list %}
{{ product_item_price }}
{%
render 'product-badge',
class_root: 'productitem',
product_available: product_available,
on_sale: on_sale,
price: price,
compare_at_price: compare_at_price,
show_saved: consistent_saved
%}
{% endif %}
{% if quick_shop_display != ‘disabled’ %}
{{ quick_shop_text }}
{% endif %}
{% if atc_display != ‘disabled’ %}
{{ quick_buy_text }}
{%- render 'icon-spinner' -%}
{% endif %}
{% endif %}
{% endunless %}
{% if atc_display != ‘disabled’ %}
{% endif %}