How can I change the variant table to show that the variants are also unavailable? is there a way to show the variants and prices crossed out? [Screenshot 2024-11-14 at 4.32.10 PM.png]

Then replace lines 12 ad 13 with this: {% if variant.available %} {{ variant.title }} {{ variant.price | money }} {% else %} ~~{{ variant.title }}~~ ~~{{ variant.price | money }}~~ {% endif %}

Hi @asmenu - is the table a custom code that you made?

Hey @asmenu , Thanks for sharing the doc you used. To display the prices and variant titles of the variants that are sold out please make the below code changes: Replace the code that you added to the snippets/card-product.liquid with the below code: {% if template.name == 'collection' and card_…

this seemed to work! thank you so much!

couldn’t figure out how to make this one work :disappointed_face:

how can I get the product with no variants to have the strike through also when sold out? [Screenshot 2024-11-15 at 1.05.52 AM.png]

To cross the title you need to do similar edits. For Dawn, these lines: https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L123 and https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L160 {{ card_product.title | escape }} change to {% if product.availabl…

sorry don’t understand where to add the .price–sold-out * { text-decoration: line-through; }

the CSS works but the cross out is crossing all titles out instead of just the sold out ones.

got what I wanted by adding both the CSS codes to Custom CSS. thanks so much!

How to display out of stock variants as unavailable on product variants collection page?

Shopify Discussion

asmenu November 15, 2024, 2:14am 3

I followed this :

https://klinkode.com/displaying-product-variants-on-collection-pages-in-shopify/

Topic		Replies	Views
"Sold Out" Not Showing Up For Variants On Collection Pages Technical Q&A	0	81	June 29, 2021
Hiding sold out variants in the product page with selected collections Shopify Discussion troubleshooting	9	100	November 19, 2025
I want Sold Out to display on collections page when a variant is sold out Store Design troubleshooting	3	100	May 13, 2024
Hide the sold-out banner on collection page - Impact Theme Store Design design , collection-page , css , troubleshooting	5	95	January 29, 2025
The Product Has Inventory but Shows as Sold Out Store Design design , collection-page , product-page	7	137	April 24, 2025

How to display out of stock variants as unavailable on product variants collection page?

Related topics