How to add grey "sold out" overlay to product image Venture Theme

Solved
sega912
Tourist
3 0 0

Just trying to figure out how to add a grey overlay to sold out items. Some of my items have multiple variants some dont. All help is really appreicted. I'll drop the product card code and url below. Thanks again.

https://proxygalleria.com/collections/new-arrivals

 

 

<!-- /snippets/product-card.liquid -->

{% comment %}
The product card snippet is passed a liquid object, used in this file
as "product". The object is either "product" or "item", the latter if
it is from search results.
{% endcomment %}

{%- assign current_variant = product.selected_or_first_available_variant -%}

<a href="{{ product.url | within: collection }}" class="product-card">
{% comment %} <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image"> {% endcomment %}
{% assign image = product.featured_image %}
<div class="product-card__image-container">
<div class="product-card__image-wrapper">
<div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
data-image
alt="{{ image.alt | escape }}">
</div>
<div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
</div>
<noscript>
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
</noscript>
</div>
</div>
<div class="product-card__info">
{% if settings.product_vendor_enable %}
<div class="product-card__brand">{{ product.vendor }}</div>
{% endif %}

<div class="product-card__name">{{ product.title }}</div>

{% if product.available %}
<div class="product-card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>

<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{% endif %}
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
</div>
{% else %}
<div class="product-card__availability">
{{ 'products.product.sold_out' | t }}
</div>
{% endif %}
</div>

{% if product.compare_at_price > product.price %}
{% comment %}
A visually-hidden label before regular/sale prices clarifies
prices for screen readers, so hide the sale tag from them.
{% endcomment %}
<div class="product-tag product-tag--absolute" aria-hidden="true">
{{ 'products.product.on_sale' | t }}
</div>
{% endif %}
<div class="product-card__overlay">
{% assign view_string_length = 'products.product.view' | t | size %}
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
</div>
</a>

 

 

0 Likes
Jivan_Suhagiya
Shopify Partner
458 62 95

Hi,
Just replace you line <a href="{{ product.url | within: collection }}" class="product-card">
with <a href="{{ product.url | within: collection }}" class="product-card" {% unless product.available %}style="opacity=0.2;"{%- endunless -%}>

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
sega912
Tourist
3 0 0

Hey! 

Thanks for the quick reply and help! Unfortunately it didn't work though 

0 Likes
Jivan_Suhagiya
Shopify Partner
458 62 95

This is an accepted solution.

sorry! I made mistake
opacity:0.2; instead opacity=0.2; 

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
sega912
Tourist
3 0 0

It worked perfectly! Thank you! I've been trying to figure this out for hours.

0 Likes
bridesmaidboxes
New Member
4 0 0

where do I add this code so it actions it for all products on my website if their stock is 0 ?

 

0 Likes
utopiastudios
Tourist
8 0 0

Any way to do this with an overlay graphic?

0 Likes
jd44r
New Member
1 0 0

hello please can you show me the full steps on how to grey scale sold out products. like from the beginning. starting from edit code, what liquid do i go too?

please ill appreciate if you could write down the full steps, thanks in advance.

0 Likes
Alia_Makarem
Excursionist
35 0 9

Hello @Jivan_Suhagiya please can you share where is this code located, I'm using Debut v. 16.5.4

Appreciate your help.

Thank you,
Alia

 

0 Likes