The product_option object

The product_option object is available for each option of a product's options array. The product options array is accessible with product.options_with_values.

The product_option object has the following attributes:

product_option.name

Returns the option's name.

product_option.position

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

Input

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

Output

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

product_option.values

Returns an array of possible values for this option.

Input

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

Output

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

product_option.selected_value

Returns the currently selected value for this option.

Input

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

Output

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

Want to discuss this page?

Visit the Shopify Community