There are two options for this. The first would be to follow Shopify's guide linked here:
Alternatively, try the following steps if you wish for "sold out" text to appear next to your variants in the variant dropdown, like this:
The following code has been tested on the latest version of our themes. Before beginning, we advise you make a backup of your current theme to ensure you can jump back to this if this tutorial does not work for your specific theme version.
Add the following code to product-template.liquid within the {% for value in option.values %}
{% comment %}Sold out should be displayed in the select where there is just one option{% endcomment %}{% if product.options_with_values.size == 1 %}{% assign show_sold_out = 1 %}{% else %}{% assign show_sold_out = 0 %}{% endif %}​{% comment %}Check if the only option is sold out{% endcomment %}{% assign sold_out = false %}{% if show_sold_out %}{% for variant in product.variants %}{% if variant.option1 == value %}{% unless variant.available %}{% assign sold_out = true %}{% endunless %}{% endif %}{% endfor %}{% endif %}
<option {% if option.selected_value == value %}selected{% endif %} value="{{ value }}">{{ value }}{% if sold_out %} - {{ 'products.product.sold_out' | t }}{% endif %}</option>
{% unless sold_out %}<option {{ props }} value="{{ value | escape }}">{{ value }}</option>{% endunless %}
We have a number of trusted coding customisation specialists, all of which are grouped for your convenience under our help guide:
Additionally, you could try apps such as these: Wipeout - Shopify apps Zero-out - Shopify apps This app moves Products to the bottom of a Collection as opposed to hiding them:
​Out-of-Stock Police App​