Adding SOLD OUT opaque button to Collection grid when product is sold out

[LucasSoler]

I added the ability to add a product from the Collections page, and I want that button to have the same behavior as in Product Pages when it’s sold out: the button turns grey and reads “SOLD OUT”.

I can’t get this to work on the Collections page (see images below).

I can’t find this code in the Product Page, so not sure how to reference it in the Collection Page. Thanks

[LitExtension]

Hi @LucasSoler ,

Please send me the code of product-grid-item.liquid file, I will check it for you

[BSS-Commerce]

Hi @LucasSoler

I would like to give you a code snippet for the SOLD OUT case for the theme. You can refer to it and adjust it to your theme because the code on themes is different:

I hope that it’s useful to you!

[LucasSoler]

Here you go, thanks.

{% comment %}###### Lucas: Page used for displaying product details within Collections page###### Nov 21 2022: Adding ability to remove “add to harvest basket” button when Product Type includes “arriving soon”###### {% endcomment %}

{% unless current_collection == blank %}###### {% assign current_collection = collection %}###### {% endunless %}

{% assign on_sale = false %}###### {% assign sale_text = ‘products.product.sale’ | t %}###### {% if featured.compare_at_price > featured.price %}###### {% assign on_sale = true %}###### {% endif %}

{% assign sold_out = true %}###### {% assign sold_out_text = ‘products.product.sold_out’ | t %}###### {% if featured.available %}###### {% assign sold_out = false %}###### {% endif %}

{% if featured.title == ‘’ %}###### {% comment %}add default state for product block in storefront editor{% endcomment %}###### {% capture product_title %}{{ ‘home_page.onboarding.product_title’ | t }}{% endcapture %}###### {% else %}###### {% capture product_title %}{{ featured.title | escape }}{% endcapture %}###### {% endif %}

###### ###### ###### {% if on_sale and section.settings.show_sale_circle %}###### ###### {{ ‘products.product.sale’ | t }}###### ###### {% endif %}###### {% if sold_out and section.settings.show_sold_out_circle %}###### ###### {{ ‘products.product.sold_out’ | t }}###### ###### {% endif %}###### ###### {% if featured.title != ‘’ %}###### {% unless featured.featured_image == blank %}###### {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}###### {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}###### {%- assign img_url = featured.featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% include ‘image-style’ with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}######

######

###### <img id=“{{ img_id }}”###### alt=“{{ featured.featured_image.alt | escape }}”###### class=“product__img lazyload”###### data-src=“{{ img_url }}”###### data-widths=“[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]”###### data-aspectratio=“{{ featured.featured_image.aspect_ratio }}”###### data-sizes=“auto”###### data-image>######

######

###### {% else %}###### ###### {% endunless %}###### ###### ###### ###### {% else %}###### {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}###### {{ ‘product-’ | append: current | placeholder_svg_tag: ‘placeholder-svg’ }}###### {% endif %}###### ###### ######

{{ product_title }}

###### ###### ###### ###### {% comment %}Start automatically added Judge.me widget{% endcomment %}###### {% render ‘judgeme_widgets’, widget_type: ‘judgeme_preview_badge’, concierge_install: true, product: product %}###### {% comment %}End automatically added Judge.me widget{% endcomment %}

###### ###### {% if section.settings.vendor_enable %}######

{{ featured.vendor }}

###### {% endif %}

###### ###### ###### ###### {% if featured.title != ‘’ %}######

###### {%- assign price = featured.price | money -%}

{% if on_sale %}###### {{ ‘products.product.regular_price’ | t }}###### {{ featured.compare_at_price | money }}###### {% endif %}###### {% if featured.price_varies %}###### {{ ‘products.general.from_html’ | t: price: price }}###### {% else %}###### {% if on_sale %}###### {{ ‘products.product.sale_price’ | t }}###### ###### {% else %}###### {{ ‘products.product.regular_price’ | t }}###### {% endif %}###### {{ price }}

###### {% if on_sale %}###### {% comment %} Lucas: display savings if on sale, May 2021 {% endcomment %}###### ###### savings: {{ product.compare_at_price | minus: product.price | money }}###### {% endif %}###### ###### ###### ###### {%- assign variant = featured.selected_or_first_available_variant -%}###### {%- if variant.available and variant.unit_price_measurement -%}###### {% include ‘product-unit-price’, variant: variant, wrapper_class: ‘grid-link__unit-price’ %}###### {%- endif -%}###### ###### {% endif %} ######

###### {% endif %} ######

###### ###### ###### {% comment %}###### Lucas: Feb 25, 2022, adding Add to Harvest Basket buttons to Collection page###### Lucas: Nov 21,2022: don’t display “add to Harvest Basket” button if Product Type includes “arriving soon”###### {% endcomment %}

###### {% if product.type contains “arriving soon” %}###### {% comment %} don’t display “add to harvest basket” {% endcomment %}

{% else %}###### ###### ###### ###### ###### ###### ###### ###### {% endif %}###### ###### ###### ###### ###### ###### ###### ######

[LucasSoler]

Code pasted.

[LitExtension]

Hi @LucasSoler ,

Please change code here:

Code:

{% if sold_out %}
    
{% else %}
    
{% endif %}

Hope it helps!