Solved

opacity overlay for sold out variants

emmebom99
Tourist
9 0 0

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

Accepted Solution (1)
PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

Can you try to replace this:

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">

with this:

<div class="grid-view-item{% unless variant.available %} grid-view-item--sold-out{% endunless %} product-card">

 

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

View solution in original post

Replies 7 (7)

PeanutButter
Shopify Partner
385 67 181

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

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
emmebom99
Tourist
9 0 0

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 %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ variant.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% 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 %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }} - {{ variant.title }}</div>

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

</div>

 

PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

Can you try to replace this:

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">

with this:

<div class="grid-view-item{% unless variant.available %} grid-view-item--sold-out{% endunless %} product-card">

 

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
emmebom99
Tourist
9 0 0

thanks a lot, it worked perfectly! 

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

PeanutButter
Shopify Partner
385 67 181

You're welcome!

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
tpena23
New Member
4 0 0

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

jmstrick
Excursionist
23 0 6

Can you help me with the same issue?