Adjusting Opacity of Product Image when Sold Out [Narrative Theme]

Highlighted
New Member
3 0 0

Hi everyone, 

I've noticed that quite a few other themes do have an overlay or something when the items are sold out but this is not available for Narrative Theme. 
Rather than using any other supporting apps, is there any way to do so?

I've relatively new to coding but I've googled and tried looking at both Product-Card.liquid (should it be here?)

      {% else %}
        <div class="card__availability">
          {{ 'products.product.sold_out' | t }}
        </div>

and Theme.scss.liquid but I'm not that sure how or where this should go. 

 

Please help me!!

0 Likes
Highlighted
Excursionist
319 47 69

hello @Elyssa Please this code in the class of product image

<img src="..." class="{% if product.available == false %} sold-out-product {% endif %}" />

 

And at the end of theme.scss, place this code  

.sold-out-product {
opacity: 0.4;
}

 

If this solution works, then please clikc on accepted solution and like

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
3 0 0

Hi @paramSoft,

I'm still not that sure which part of the codes I'm supposed to place this. 

 

<img src="..." class="{% if product.available == false %} sold-out-product {% endif %}" />

 

When I tried to put both lines of codes in, my "collection" page just went blank. 

Is there something I'm supposed to replace or is it an add on? This is my current code for the product-card.liquid

 

<div class="card critical-clear" id="Card-{{ product.id }}" data-animate>
  <a href="{{ product.url | within: collection }}" class="card__wrapper{% if section.settings.show_spacing %} card__wrapper--padding{% endif %} text-center">

    {% if product.featured_media %}
      {% include 'card-image', type: product.featured_media.preview_image, grid_style: grid_style %}
    {% endif %}

    <div class="card__info{% if grid_style == 'grid' %} card__info--aligned{% endif %}">
      {% if section.settings.show_vendor %}
        <div class="card__brand h8">{{ product.vendor }}</div>
      {% endif %}

      <h3 class="card__name h6"><bold>{{ product.title }}</bold></h3>

      {% if product.available %}
        <div class="card__price">
          {%- assign variant = product.selected_or_first_available_variant %}
          {% 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 %}
              <span class="visually-hidden"> {{ 'products.product.price' | t }} </span>
              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
            {% else %}
              <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
              <span class="card__price--sale">{{ product.price | money_without_trailing_zeros }}</span>

              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <span class="card__price--regular-strike">
                <span class="card__price--regular">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
              </span>
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% 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 %}
              {{ product.price | money_without_trailing_zeros }}
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% endif %}
          {% endif %}
        </div>
      {% else %}
        <div class="card__availability">
          {{ 'products.product.sold_out' | t }}
        </div>
      {% endif %}
    </div>
    {% if product.compare_at_price > product.price %}
      {% assign sale_text_length = 'products.product.on_sale' | t | size %}
      <span class="card__badge{% if sale_text_length > 6 %} card__badge--large{% endif %}">
        {{ 'products.product.on_sale' | t }}
      </span>
    {% endif %}
  </a>
</div>

 

 

0 Likes
Highlighted
Excursionist
319 47 69

Please go in 'card-image' snippet and then send code of that file

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
3 0 0
{% assign img_url = type | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% if grid_style == 'grid' %}
  <div class="card__image-wrapper card__image-wrapper--aligned">

    <img class="card__image card__image--align lazyload fade-in"
      src="{{ type | img_url: '300x'}}"
      data-parent-fit="cover"
      data-src="{{ img_url }}"
      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
      data-aspectratio="{{ type.aspect_ratio }}"
      data-sizes="auto"
      alt="{{ type.alt | escape }}"
      data-variant-media-image>
    <div class="card__preloader"></div>
  </div>
{% else %}
  <div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: type.aspect_ratio | times: 100}}%">
    <img class="card__image lazyload fade-in"
      data-src="{{ img_url }}"
      data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
      data-aspectratio="{{ type.aspect_ratio }}"
      data-sizes="auto"
      alt="{{ type.alt | escape }}">

    <div class="card__preloader"></div>

    <noscript>
      {% assign card_image = type | img_url: '1024x1024' %}
      <img src="{{ card_image }}" alt="{{ type.alt | escape }}" class="card__image">
    </noscript>
  </div>
{% endif %}
0 Likes