You might have seen that ecommerce businesses show Out of Stock on the image of the products. BigCommerce Stencil also allows us to show such message on the products images. If you are trying to show this message but it is not displayed properly or only shown when the user hovers over the image, we can tell you a simple edit in the HTML files that will make them appear all the time.
Step 1: Go to Templates > Components > Products. Here find the file card.html and open it.
Step 2: In this file, you will see the line “{{#if out_of_stock_message }}”
( Note: If you keep it there it will display “Sold Out” message just on hover over the product image)
Step 3: Cut this entire if block till the closing {{/if}} and paste it inside the line “<figure class=”card-figure”>”.
Step 4: Add the <a> tag inside a <div> tag with a unique class. Take out all classes on the <a> tag
In the last, give them any style, and you are all done.
You must visit our blog everyday to find solutions of simple to complex BigCommerce Stencil problems. If you are stuck with any issue on BigCommerce, you can ask questions in the comments section below. We will write a solution for it within 3 days in our next post.