Product.liquid

This template renders a product's detail page.

You will want to show either all images or at least the featured image of this product. There must also be an option on this page to add one of the variants to the shopping cart.

The following code example lists all variants of a product with a leading radio button. The first one in the list is checked. Each list entry shows the price with currency (using the money_with_currency filter. Also included is the variant's name (which could be something like "S", "M", "X" or "XL" if the product is a clothing item, for instance.

<ul>
  {% for variant in product.variants %}
  <li>
    <input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" {% if forloop.first %} checked="checked" {% endif %} />
    <label for="radio_{{ variant.id }}>">{{ variant.price | money_with_currency }} - {{ variant.title }}</label>
  </li>
  {% endfor %}
</ul>

You can use something like the following example if you would rather display a drop-down list instead of a radio button list:

<select name="id">
  {% for variant in product.variants %}
    {% if variant.available == true %}
      <option value="{{ variant.id }}"> {{ variant.title }} for {{ variant.price | money_with_currency }} </option>
    {% else %}
      <option disabled="disabled"> {{ variant.title }} - sold out! </option>
    {% endif %}
  {% endfor %}
</select>

Variables

In product.liquid you have access to the following variables:

• product - The current product being displayed.
• handle - The handle of the current product.
• collection - The collection that this product belongs to.
• related - A collection of all related products.
• vendor - The vendor for the product being displayed.
• type - The product type for the product being displayed.

In addition, all global variables are available.