Conditional dropdown messaging in Shopify theme

Question

I am trying to build in conditional messaging/labels in a variant (sizing) dropdown in a Shopify theme, based on availability. (paraphrase in the code snippet below - should give sizes and a message related to availability). I used a few different documentation links to get there:

https://shopify.dev/docs/themes/liquid/reference/objects/product_option https://shopify.github.io/liquid-code-examples/example/product-variant-selector

And came up with the following, written in product_template.liquid:

 <select id="ProductSelect-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
           {%- if {{ product_option.name == "size" }}  -%}
                {%- for value in option.values -%}
                    {%- if product.variants[forloop.index0].available -%}
                        <option value="{{ value | escape }}  - ships faster "{% if option.selected_value == value %} selected="selected"{% endif %}>
                     {{ value | escape }} 
                        </option>  
                     {%- else -%}
                        <option value="{{ value | escape }} - ships longer "{% if option.selected_value == value %} selected="selected"{% endif %}>
                    {{ value | escape }} 
                        </option>
                    {%- endif -%}
            {%- endfor -%}
        {%- endif -%}
      </select>

On trying to save I got this error: This file contains the following errors: Line 101 — Liquid syntax error: Unexpected character { in "{{ product_option.name == "size" }}"

I'm generally okay with Liquid, but Shopify objects haven't totally clicked just yet. What's going wrong here, and how do I select by the size variant?

Onkar Onkar · Accepted Answer · 2021-02-09T02:57:49

Okay after checking the code finds the issue, you can't use the {{}} inside a condition check, these {{}} are used to output the liquid output. so simply your code is like this and works well.

<select id="ProductSelect-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
           {%- if  product_option.name == "size"   -%}
                {%- for value in option.values -%}
                    {%- if product.variants[forloop.index0].available -%}
                        <option value="{{ value | escape }}  - ships faster "{% if option.selected_value == value %} selected="selected"{% endif %}>
                     {{ value | escape }} 
                        </option>  
                     {%- else -%}
                        <option value="{{ value | escape }} - ships longer "{% if option.selected_value == value %} selected="selected"{% endif %}>
                    {{ value | escape }} 
                        </option>
                    {%- endif -%}
            {%- endfor -%}
        {%- endif -%}
      </select>

Conditional dropdown messaging in Shopify theme

1 Answers