How to create a 'sold out' circle on my webpage?

Solved

How to create a 'sold out' circle on my webpage?

RobArt98
Pathfinder
96 3 14

Hello everyone, im searching for a solution which looks like on the screenshot.

Bildschirmfoto 2024-02-22 um 09.44.59.png

or 

Bildschirmfoto 2024-02-22 um 09.48.44.png

 

waiting for your feedback.

thanks in advance

Accepted Solutions (2)

Leo6688
Shopify Partner
7 1 1

This is an accepted solution.

You can use the available value in the product object to determine if you are using liquid

Leo6688_0-1708595771342.png

 

Life is a Job

View solution in original post

kgbfashionista
Navigator
345 24 47

This is an accepted solution.

Basically, you have to determine the bit where you`ll need to paste the code (product-grid or summat like that, depending on the theme, and find the bit where the product image starts).

 

Then, use something like this:

{% unless product.available %}
<img src="red-circle.png" width="10px" height="10px"> Sold out
{% endunless %}

 

Use css to style it properly.

Feel free to like my post if it was helpful at all

View solution in original post

Replies 2 (2)

Leo6688
Shopify Partner
7 1 1

This is an accepted solution.

You can use the available value in the product object to determine if you are using liquid

Leo6688_0-1708595771342.png

 

Life is a Job

kgbfashionista
Navigator
345 24 47

This is an accepted solution.

Basically, you have to determine the bit where you`ll need to paste the code (product-grid or summat like that, depending on the theme, and find the bit where the product image starts).

 

Then, use something like this:

{% unless product.available %}
<img src="red-circle.png" width="10px" height="10px"> Sold out
{% endunless %}

 

Use css to style it properly.

Feel free to like my post if it was helpful at all