How can i fade product images and move them to the bottom of a collection on blockshop by troop

Retired Boards Appdev Store Design

Topic summary

Goal: Darken (fade) out‑of‑stock product images and push those products to the bottom of collection pages in the Blockshop (Troop) Shopify theme, without affecting items allowed to “continue selling” when out of stock.

Approach proposed:

  • Use Liquid (Shopify’s templating language) to detect OOS items by checking variant inventory_quantity <= 0 and inventory_policy != ‘continue’. Example logic targets the first variant.
  • Add a CSS class to OOS product images and reduce brightness (e.g., filter: brightness(50%)) to visually darken them.
  • Reorder listings via JavaScript by rendering/collecting in‑stock items first, then appending OOS items to the DOM so they appear at the bottom.

Theme considerations: Exact implementation depends on Blockshop’s structure; the provided snippets are generic and may need adaptation to Blockshop’s collection/product grid templates and asset files.

Open items:

  • The requester asked which theme files/folders to modify for these snippets; no file-path guidance was provided yet.
  • No final code specific to Blockshop’s sections/snippets was shared; discussion remains unresolved pending theme‑file locations.

Notes: Code snippets (Liquid/CSS/JS) are central to understanding the solution.

Summarized with AI on January 12. AI used: gpt-5.
1

Im wanting to edit my code so it darkens the images of products when they are out of stock. if possible it would be great if it could move them to the bottom of the collection also. but i also have some products that are set to continue selling when out of stock so i wouldnt want it to effect those products. is there an easy solution to this? i have seen some solutions people have used for the dawn theme but not blockshop by troop

2

Hi CykelHouse,

Here’s the general idea of how you might approach achieving this, and the actual implementation may be different depending on how your theme is set up.

  1. Identifying out of stock products: You can use Liquid to check if a product’s inventory is less than or equal to 0 and if it is not set to continue selling when out of stock. Here is an example:
{% for product in collection.products %}
  {% if product.variants.first.inventory_quantity <= 0 and product.variants.first.inventory_policy != 'continue' %}
    <!-- This is an out-of-stock product -->
  {% else %}
    <!-- This is an in-stock product -->
  {% endif %}
{% endfor %}
  1. Darkening the images: You can add a CSS class to the product images that are out of stock. Then, in your CSS file, you can darken these images using a filter. Here’s a basic example:
{% if product.variants.first.inventory_quantity <= 0 and product.variants.first.inventory_policy != 'continue' %}
  <img src="{{ product.featured_image }}" class="out-of-stock-img">
{% else %}
  <img src="{{ product.featured_image }}">
{% endif %}


.out-of-stock-img {
  filter: brightness(50%);
}
  1. Moving out of stock products to the bottom: This may require JavaScript to create two separate arrays for in-stock and out-of-stock products. Then you can append the out-of-stock products after the in-stock products.

Hope this helps!

3

Hi Liam thats great thank you,

Would you know roughly which folder i would need to paste those snippets in at all?

Regards

Gavin