How to add overlay "SOLD OUT" in Debut theme

Highlighted
New Member
2 0 1

I have tried following instructions on other posted topics but didn't really worked out. 

What I want ---->  In collection view, the product that is out of stock will have an overlay text "SOLD OUT" on top of the dimmed product image below.

Much appreciated for any help given!

1 Like
Highlighted
New Member
2 0 0

I need this too!

0 Likes
Highlighted
Shopify Partner
2 0 3

Hello,

Here's the list of steps you should follow to add the "Sold Out" overlay on collections page for the Debut theme - 

1) Go to the file "product-card-grid.liquid" in the Snippets section of your theme files.

2) Look for the class "grid-view-item__image". We basically need to wrap the product image in a container div that has the "Sold Out" text as well. We only show the text if product is not available.

3) Replace the image with the following code - 

    <div class="image-container">
    	<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
      	{% unless product.available %}	
      		<span id="overlay_text">Sold Out</span>
      	{% endunless %}
        <style>
         .image-container {
		    position: relative; 
      	    z-index: 1;
         }
         #overlay_text {
            position: absolute;
            top: 40%;
            z-index: 3;
            left: 33%;
            color: white;
            font-weight: bold; 
         }
        </style>
    </div>

4) If the "Sold Out" text doesn't quite center, please adjust left and top properties in the style tag for overlay_text.

Hope this helps!

Saumitra,

Swym
Our solutions: 
Wishlist+   |  In Stock Alerts

 

2 Likes
Highlighted
Shopify Partner
2 0 3

Hello,

Here's the list of steps you should follow to add the "Sold Out" overlay on collections page for the Debut theme - 

1) Go to the file "product-card-grid.liquid" in the Snippets section of your theme files.

2) Look for the class "grid-view-item__image". We basically need to wrap the product image in a container div that has the "Sold Out" text as well. We only show the text if product is not available.

3) Replace the image with the following code - 

    <div class="image-container">
    	<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
      	{% unless product.available %}	
      		<span id="overlay_text">Sold Out</span>
      	{% endunless %}
        <style>
         .image-container {
		    position: relative; 
      	    z-index: 1;
         }
         #overlay_text {
            position: absolute;
            top: 40%;
            z-index: 3;
            left: 33%;
            color: white;
            font-weight: bold; 
         }
        </style>
    </div>

4) If the "Sold Out" text doesn't quite center, please adjust left and top properties in the style tag for overlay_text.

Hope this helps!

Saumitra,

Swym
Our solutions: 
Wishlist+   |  In Stock Alerts

1 Like
Highlighted
Tourist
5 0 0

Hey,

I have the same issue but I want to show sold out overlay on shop page, also I am using Manor theme (http://velatheme.com/demo/manor/) there I am not getting Snippets which you have mentioned please can you guide me for this.

This is my website (https://ellafashion.shop/)

0 Likes
Highlighted
New Member
19 0 0

Hi! do i use all of this code? im getting the sold out but also alot of error code as well?

many thanks :)

0 Likes
Highlighted
Excursionist
21 0 5

Can you describe exactly where to put this code? This is what mine looks like. Where do I paste it?



<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="{{ product.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 img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

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

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

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

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

</div>

0 Likes
Highlighted
Shopify Partner
216 27 47

@kallisto 

Please give your store URL. to check this and provide solution.

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
0 Likes
Highlighted
Excursionist
21 0 5

swishandflickco.com

0 Likes
Highlighted
Shopify Partner
216 27 47

@Jenna2 

It can be done by doing some code customization. Please take a help of a developer or contact us here info@ittanta.com:

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
0 Likes