How can I apply an opacity overlay to sold out variants?

Store Design
1

hey!

i have edited my code so that all variants show in the collection page, now I added a code to get all sold out items an opacity overlay so they have 0,5 opacity. but this only works for products with no variants, this Is the code I added to theme.scss.liquid in the bottom:

}
.grid-view-item–sold-out .grid-view-item__image {
opacity: 0.5;
}

and this code worked for the products that have no variants.

other than the “product-card-grid.liquid” I have a “product-card-grid-variant.liquid” to get all variants to show in the collection page. I have tested almost every solution on Shopify but none of them does anything

2

Hi, can you please share:

  • Your site url
  • The theme you are using
  • The code you added to product-card-grid-variant.liquid

With that I think I will be able to help

3

thanks for a fast response.

my site: www.cle-collections.com

my theme is debut.

the code in product-card-grid-variant.liquid:

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

  
    {{ product.title }}
  

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = variant.image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  

    

      

        
      

    

    

  

  

  {{ product.title }} - {{ variant.title }}

  {% include 'product-price-listing', product: variant, show_vendor: show_vendor %}
4

Can you try to replace this:

with this:

This is now checking if the variant is available instead of checking the product.

1 Like
5

thanks a lot, it worked perfectly!

I’ve spent so much time trying to figure this out, thanks!!!

6

You’re welcome!

1 Like
7

Can you help me with the same issue?

8

Hey, by any chance can you help me out with this issue on my site. I would like for the products to not de dimmed or have low opacity. www.vicesneakers.com