The product_option object

The product_option object is available for each option in a product options array. The product options array is accessible via product.options_with_values.

The product_option object has the following attributes:

product_option.name

Returns the product option's name.

product_option.position

Returns the product option's position in the product options array.

Input

<ul>
  {% for product_option in product.options_with_values %}
    <li>{{ product_option.position }} - {{ product_option.name }} </li>
  {% endfor %}
</ul>

Output

<ul>
  <li>1 - Color</li>
  <li>2 - Size</li>
</ul>

product_option.selected_value

Returns the currently selected value for this product option.

Input

<select>
  {% for value in product_option.values %}
    <option {% if product_option.selected_value == value %}selected{% endif %}>
      {{ value }}
    </option>
  {% endfor %}
</select>

Output

<select>
  <option selected>Red</option>
  <option>Green</option>
</select>

product_option.values

Returns an array of possible values for this product option.

Input

<ul>
  {% for value in product_option.values %}
    <li>{{ value }}</li>
  {% endfor %}
</ul>

Output

<ul>
  <li>Red</li>
  <li>Green</li>
</ul>