I am looking to display variants with stock as links separated by a comma when more than one on a product when there are more than 20 options with a 'Ready To Ship' text before the options.

{%- for option in product.options_with_values -%}
{%- if option.values.size > 20 -%}

{% for variant in product.variants %}
<div style="color:gray; font-size:12px;">
{% if variant.inventory_quantity > 0 %}
Ready to ship: 
{% endif %}
</div>
{% endfor %}

{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
<a href="{{ variant.url }}" alt="View available variant {{ variant.title }}"> {{ variant.title }}</a>
{% endif %}
{% endfor %}

{%- endif -%}
{%- endfor -%}

Thank you!!

Currently I am having an issue when a product has more than a single variant that has stock. Example if a product has two variants the 'Ready To Ship' will display twice and the variants will not display a comma between. I've tried a forloop edit but but I think due to the nature of it filtering all options and then options over 20 it is not working.

I am looking to display variants with stock as links separated by a comma when more than one on a product when there are more than 20 options with a 'Ready To Ship' text before the options.

{%- for option in product.options_with_values -%}
{%- if option.values.size > 20 -%}

{% for variant in product.variants %}
<div style="color:gray; font-size:12px;">
{% if variant.inventory_quantity > 0 %}
Ready to ship: 
{% endif %}
</div>
{% endfor %}

{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
<a href="{{ variant.url }}" alt="View available variant {{ variant.title }}"> {{ variant.title }}</a>
{% endif %}
{% endfor %}

{%- endif -%}
{%- endfor -%}

Thank you!!

Currently I am having an issue when a product has more than a single variant that has stock. Example if a product has two variants the 'Ready To Ship' will display twice and the variants will not display a comma between. I've tried a forloop edit but but I think due to the nature of it filtering all options and then options over 20 it is not working.

• shopify
• liquid

1 Answer 1

Try the following; I reserve this code for cases where I need to create some validations

I understand that what you want to achieve is to print only the variants that meet certain conditions grouped by option.

The CSS snippet will allow you to avoid relying on additional HTML code to place the informational texts before each option.

CSS

  .variant-option-item {
    margin-right: 5px;
    position: relative;
  }
  .variant-option-item:first-of-type::before {
    content: "Ready to ship: ";
    display: flex;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    bottom: 30px;
    font-size: 12px;
    width: fit-content;
    width: 100px;
    color: black;
  }

  .variant-option-item::after {
    content: ",";
  }
  .variant-option-item:last-child::after {
    content: "";
  }

The version of your code delegating part to CSS.

{%- for option in product.options_with_values -%}
  {%- if option.values.size > 20 -%}   
    {% for variant in product.variants %}
      {% if variant.inventory_quantity > 0 %}
      <a class="variant-option-item" href="{{ variant.url }}" alt="View available variant {{ variant.title }}"> {{ variant.title }}</a>
      {% endif %}
    {% endfor %}
    {%- endif -%}
{%- endfor -%}

A snippet I have for cases similar to the one you're trying to solve while respecting the user experience.

{%- for option in product.options_with_values -%}
  {%- if option.values.size > 20 -%}
    <div style="color:gray; font-size:16px; display:flex;">
      <div class="variants-container" id="variant-{{ option.name | handle }}">
        {% for item in option.values %}
         {% if item.variant.inventory_quantity > 0 %}
            <a class="variant-option-item" href="{{ item.variant.url }}">{{ item.name }}</a>
         {% endif %}
        {% endfor %}
      </div>
    </div>  
  {%- endif -%}
{%- endfor -%}

Important:

You have more options, such as storing the variable in JavaScript and creating more advanced logic. For example::

<script>
  let product_variants = {{ product.variants | json }};
  // Use JavaScript for your logic on variants and options...
</script>