Lookbook Theme - How to Dim Sold Out Products with "Sold Out" Text Overlay?

Highlighted
Tourist
4 0 1

Hi all,

A little new to this and trying to work on editing the coding for a setup Lookbook Theme, which beautifully displays the products as a lookbook. However, I would like to dim sold out products with a "Sold Out" text overlay to prevent users from being disappointed once they click into the product and realize it's sold out? Any help is greatly appreciated (it seems it was never answered in past posts so giving it a shot again). I've included the Collection.liquid template below. Don't know if it might help, but there are two snippet links that are titled collectioncover.liquid and collectioncoverlink.liquid. Please let me know if I should include these as well. Thank you so much!

----------

 

{% paginate collection.products by 50 %}
<section class="gallery{% if settings.use_footer %} hasfooter{% endif %}">
<div class="gallery__inner">

{% if shop.products_count == 0 %}
<div class="gallery__slide--lonelypanel">
<div class="desk--table__contain">
<div class="desk--table__inner">
<div class="collectioncover__text">
<h2 class="single">{{ 'collections.general.no_products_in_store' | t }}</h2>
</div>
</div>
</div>
</div>
{% else %}

{% if collection.products_count == 0 %}
<div class="gallery__slide--lonelypanel">
<div class="desk--table__contain">
<div class="desk--table__inner">
<div class="collectioncover__text">
<h2 class="single">{% if current_tags %}{{ 'collections.general.no_matches' | t }}{% else %}{{ 'collections.general.no_products_in_collection' | t }}{% endif %}</h2>
</div>
</div>
</div>
</div>
<a href="{{ product.url | within: collection }}" class="product-card" {% unless product.available %}style="opacity=0.2;"{%- endunless -%}>
{% elsif settings.use_covers == true %}
{% if collection.image %}
<div class="gallery__slide{% if collection.all_products_count == 0 %}--lonely{% endif %} collection__cover--img">
<img src="{{ collection.image.src | collection_img_url: 'master' }}" class="slide__image">
<div class="desk--table__contain">
<div class="desk--table__inner">
<div class="collectioncover__text">
{% include 'collectioncover' %}
</div>
</div>
</div>
</div>
{% else %}
{% comment %}
If the URL pointed to ends with collections/all, display all products
{% endcomment %}
{% capture isall %}/collections/{{ collection.handle }}{% endcapture %}
{% if isall != "/collections/all" %}
<div class="gallery__slide{% if collection.all_products_count == 0 %}--lonely{% endif %} collection__cover">
<div class="desk--table__contain">
<div class="desk--table__inner">
<div class="collectioncover__text">
{% include 'collectioncover' %}
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}

{% for product in collection.products %}
<div class="gallery__slide toggle__productinfo">
<a href="{{ shop.url }}{{ product.url | within: collection }}" class="product__link">
<img src="{% if product.images.size > 0 %}{{ product.images.first | product_img_url: 'master' }}{% else %}{{ 'image__empty.png' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" class="slide__image">
</a>
<div class="product__info">
<div class="productinfo__text">
<h1><a href="{{ shop.url }}{{ product.url | within: collection }}">{{ product.title }}</a></h1>
<h2>
{% assign price = product.price | money %}
{% if product.compare_at_price %}
<span class="sale">{% if product.price_varies %}{{ 'products.general.from_min_price_html' | t: price: price }}{% else %}{{ price }}{% endif %}</span>
<strike>{{ product.compare_at_price | money }}</strike>
{% else %}
{% if product.price_varies %}{{ 'products.general.from_min_price_html' | t: price: price }}{% else %}{{ price }}{% endif %}
{% endif %}
</h2>
</div>
</div>
</div>
{% endfor %}

{% if paginate.pages > 1 %}
<div class="gallery__slide collection__nav">
<div class="desk--table__contain">
<div class="desk--table__inner">
<ul>
{% if paginate.previous %}
<li class="previous"><a href="{{ paginate.previous.url }}" title="{{ 'general.pagination.previous_link_title_attribute' | t }}">&laquo;</a></li>
{% else %}
<li class="disabled previous">&laquo;</li>
{% endif %}

{% for part in paginate.parts %}
{% if part.is_link %}
<li><a href="{{ part.url }}" title="">{{ part.title }}</a></li>
{% else %}
{% if part.title == paginate.current_page %}
<li class="active">{{ part.title }}</li>
{% else %}
<li>{{ part.title }}</li>
{% endif %}
{% endif %}
{% endfor %}

{% if paginate.next %}
<li class="next"><a href="{{ paginate.next.url }}" title="{{ 'general.pagination.next_link_title_attribute' | t }}">&raquo;</a></li>
{% else %}
<li class="disabled next">&raquo;</li>
{% endif %}
</ul>
</div>
</div>
</div>
{% endif %}
{% endif %}

</div>
</section>

{% endpaginate %}

 

Highlighted
Shopify Partner
9465 1195 3327

Hello, @rtw_dna 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Hi @KetanKumar,

Thank you for your generous help! The site is my-rtw.myshopify.com. Once you click into any of the collection pages, e.g. runway, thrift or world, it is the sold out products I would like to display as dimmed with a “Sold Out” text overlay. Thanks again!

0 Likes
Shopify Partner
9465 1195 3327

@rtw_dna 

Thanks for details 

sorry but i can't see soldout product

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Hi @KetanKumar ,

Most of the products are sold out, but you can only see that once you click into the product, which is why I am requesting a way to display it as sold out from the collection page that displays all the products at once. For example, you can view a sold out product at https://www.my-rtw.com/collections/runway/products/are-you-am-i-misa-slip-dress-xs , but when viewing from the collection page, there is no indication of the product being sold out. 

0 Likes
Highlighted
Shopify Partner
9465 1195 3327

@rtw_dna 

Yes it cab be done some custamization

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Hi @KetanKumar ,

Yes I am aware it can be done. My question was how I would be able to edit the code as I’ve seen members in the past post these kind of inquiries based on their own different themes. Thank you for your help anyway. 

 

0 Likes