How to add product label and variant labels?

[EdgarPateno]

Hi,

Please help me.

This is our product page URL: https://swished.co.uk/products/swished-pop-up-tent

1. We want to show a variant label like OUT OF STOCK or IN STOCK when a color variant is selected. Please see the screenshot below.

2. For the 2nd issue, please check this screenshot first.

If you noticed, there are x marks highlighted. Those were checkmarks before (fa fa-check-circle). However, after I created a “custom-font” SNIPPETS and added {% include ‘custom-fonts’ %} on the of the theme.liquid, the checkmarks (fa fa-check-circle) became x marks. Looks like the font is not supported (it’s Poppins font) or the css was overwritten.

Please note that the site was hard-coded by the previous developer using a custom theme created by the developer herself.

Please help. Thanks

[Halothemes]

Hi @EdgarPateno ,

1. For issue 1: Could you please share source name?

2. For issue 2: You can try follow the instruction below:

==> Go to Online Store → Theme → Edit code.
==> Assets-> /custom.css. Paste code below into end the file.

i.fas.fa-check-circle {
    font-family: 'Font Awesome 5 Free' !important;
}

[EdgarPateno]

Hi @Halothemes , thank you so much for your response. Truly appreciate it. #2 issue is fixed - thank you for the code.

For #1 issue, like I said, the developer custom-coded it, and below is the code under SNIPPETS.

{% liquid
  for variant in product.variants
  if variant.metafields.global.color_hex and variant.metafields.global.color_hex != blank
  assign has_color = true
  break
  endif
  endfor
%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

Hope that helps. Thank you again for your time.

Stay safe and take care

[Halothemes]

Hi @EdgarPateno ,

You can try follow the instruction, please paste code below into end the file.

    

        Availability:         
        
        {% if current_variant.inventory_management %}
        {% assign first_inventory = current_variant.inventory_quantity %}
        {% if first_inventory > 0 %}
            {{first_inventory}} IN STOCK
        {% else %}
            OUT OF STOCK
        {% endif %}
        {% else %}
            IN STOCK
        {% endif %}
        
    

[EdgarPateno]

Hi @Halothemes , that code almost fixed it. Please see the image below.

Is there a way we can make it like this below?

Just a simple OUT OF STOCK or IN STOCK on the side of the color swatch.

I hope this is not too much of a hassle. Stay safe and take care.

[EdgarPateno]

Hi @Halothemes , we would prefer something like this below.

Just a simple OUT OF STOCK text for the orange variant and IN STOCK for the grey variant.

Thanks again

[Halothemes]

Hi @EdgarPateno ,

You can try follow the instruction, please paste code into the file like image below.

[EdgarPateno]

Hi @Halothemes , thank you so much for your time. It’s almost fixed. After injecting the code and refreshing the page, it showed this:

However, when I clicked on any variant (color orange and back to grey), it showed no label:

Can I just add a fixed text/label to each variant ID? Grey variant ID is 40897678409891, and Orange variant ID is 40670969069731.

The product page content was created using the Metafields Guru app. Can I just put a variant label using metafield?