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

Elyssa
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
HardikDavra
Shopify Partner
1930 302 833

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

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Elyssa
New Member
3 0 0

Hi @HardikDavra,

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
HardikDavra
Shopify Partner
1930 302 833

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

 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Elyssa
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
Loretta14
New Member
1 0 0

I need help with this also! I don't know where exactly to enter that code!

Did you manage to help Elyssa?

 

0 Likes
HardikDavra
Shopify Partner
1930 302 833

Let me know what you need to change?

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes