Sold out products a picture instead of price Prestige

[oguzsanci35]

Sold out products currently looks likes this i wanted to remove the price and put this picture instead of the price

Here's the link to the site

[swym]

Hi @oguzsanci35!

To change the product price to an image for sold-out products, you can use the “product.available” property in Shopify’s liquid syntax. Unfortunately, since your store is using a paid theme, I can’t provide you with the exact solution, but the good news is that the same liquid syntax can be used on any theme.

The first thing to do would be identifying where the price is rendered in your theme files. I’m using the Dawn theme, and it can be found in the file “snippets/price.liquid”. In my theme, the price is rendered within the div with the class “price__container”; however, it may differ in your theme.

The next thing is to wrap the contents of this div within a liquid if-else condition. This is done because we want to display the existing content (the price) if the product is available, but display the image if it is not. To do this, we use the condition “{% if product.available %}”, and add it right before the div contents.

At the end of the existing code that renders the price, add an {% else %} statement, followed by the image you wish to show instead. After that, close the if condition with {% endif %}.

Once you’re done, you can save your changes. The product will now show this image instead of the price when it’s sold out. Here’s an example from my store:

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards, 

Matthew from Swym

[MandasaTech]

Hello @oguzsanci35 

Yes, you can absolutely customize your sold-out product display to hide the price and show an image instead. Here's how you can do it:

Steps to Hide Price and Show Image for Sold-Out Products:

1. Go to Online Store > Themes

2. Click Actions > Edit code on your live or duplicate theme

3. Open the file where product price is rendered — usually it's one of these:

   • product-card.liquid

   • product-grid-item.liquid

   • product-price.liquid
     (Location depends on your theme structure — look under Snippets or Sections)

4. Locate the code that looks like this (or similar):

   {{ product.price | money }}

5. Wrap it with a condition to only show price when the product is in stock:

   {% unless product.available == false %}
     {{ product.price | money }}
   {% else %}
     <img src="{{ 'sold-out-image.png' | asset_url }}" alt="Sold Out" />
   {% endunless %}

6. Replace 'sold-out-image.png' with your desired image filename.
   Upload the image in Settings > Files, or use an external URL.

Please note:

If you want to style it better, add a custom CSS class like .sold-out-image and tweak its size and placement in your theme’s CSS file.

Let me know if you have any questions!