Product.liquid

From Shopify Wiki

Jump to: navigation, search

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. Also on this page there must be the option to put it (or a variant of it, if it has any) in the shopping cart.

The following code example lists all variants of a product with a leading radiobutton. The first one in the list is checked. Every list entry shows the price with currency (thanks to the money_with_currency filter. And after that the variant's name (which could be something like "S", "M", "X" or "XL" if the product was a T-Shirt for instance.

<code>
<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>
</code>

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

<code>
<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>
</code>

Variables

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

Personal tools