Sold out badge not showing on collection page.

Shopify Discussion
1

Hi everyone,

Previously, the “Sold Out” badge appeared on the collection page of my store. However, now we need to click on the product to see if it is sold out. I’m using the Impulse theme.

Does anyone have a solution for this issue? I would greatly appreciate any help you can provide.

Store URL: https://smellofarabia.com

2

To display the “Sold Out” badge on the collection page in the Impulse theme, you may need to modify the theme’s code to ensure that the badge appears next to products that are out of stock. Here’s how you can achieve this:

  1. Go to the Theme Editor:

    • From your Shopify admin, navigate to Online Store > Themes.
    • Find the Impulse theme and click on Actions > Edit code.

  2. Locate the Product Loop Code:

    • In the code editor, search for the file that controls the display of products in the collection. Typically, this is located in sections/collection-template.liquid or sections/product-grid.liquid.

  3. Add the Sold Out Badge:

    • Look for the section where the product’s image is displayed within the loop (e.g.,

      ).

    • You’ll need to add a condition to check whether the product is out of stock and display the “Sold Out” badge accordingly. For example, you can use the following Liquid code:
      {% if product.available == false %}
      Sold Out
      {% endif %}

      Add this snippet inside the product grid loop, typically right after the product image or title, so it appears on the collection page.

  4. Style the Badge (optional):

    • You may want to add custom styles to ensure the “Sold Out” badge looks good. In the assets folder, find the theme.css or theme.scss.liquid file and add a CSS rule for the .sold-out-badge class, like this:
      .sold-out-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: red;
      color: white;
      padding: 5px 10px;
      font-weight: bold;
      border-radius: 5px;
      }

Save and Preview:

  • After adding the code and styling, click Save and preview your store to ensure the “Sold Out” badge appears on the collection page.

This should restore the functionality of the “Sold Out” badge without needing to click on individual products. Let me know if you need further assistance!

3

Thank you @Ahmad31 . Is this copy from ChatGPT? If yes, please let me know, because ChatGPT doesn’t provide completely accurate answers as it cannot review the Impulse theme code like a human can.

4

No, it’s not a chatgpt solution

5

If the issue isn’t fully resolved or if you’d like further assistance with the Impulse theme, feel free to reach out. I’m happy to help you troubleshoot and make sure everything works as expected! Just let me know if you need any adjustments.

6

Oh okay @Ahmad31 . Thank you so much :slightly_smiling_face:

7

Hi @Digital_Imran ,

I’m Amanda from the Fordeer Team. In this scenario, consider utilizing an app such as Product Labels & Badges. It can assist you in displaying labels automatically.

Amanda_Fordeer_0-1732243542509.png
Amanda_Fordeer_0-1732243542509.png1921×1066 202 KB

:hugs:

8

Thanks for the reply @Amanda_Fordeer :slightly_smiling_face:
Let me try

1 Like