How to add overlay "SOLD OUT" in Debut theme

New Member
2 0 0

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!

0 Likes
New Member
2 0 0

I need this too!

0 Likes
Shopify Partner
2 0 2

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
Shopify Partner
2 0 2

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
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
New Member
17 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