Product

Default Liquid Template

<h1 class="pagetitle">{{ product.name }}</h1>

<h4 id="category-breadcrumbs">
  {% for cat in product.category.self_and_ancestors %}
    <a href="{{ cat.url }}" class="breadcrumb">{{ cat.name }}</a> &#187;
  {% endfor %}
  <span class="current-crumb product-crumb">{{ product.name }}</span>
</h4>

<div id="product_container">
  <div id="photos">
    <div id="photo">
      <a id="thumb{{ product.main_photo.id }}" href="{{ product.main_photo | photo_url: "large" }}" class="highslide thumbnail" onclick="return hs.expand(this)"><img src="{{ product.main_photo | photo_url: "medium" }}" title="Click to enlarge" /></a>
    </div>

    {% for photo in product.photos %}
      {% unless photo == product.main_photo %}
        <a id="thumb{{ photo.id }}" href="{{ photo | photo_url: "large" }}" class="highslide thumbnail" onclick="return hs.expand(this)"><img src="{{ photo | photo_url: 'thumb' }}" /></a>
      {% endunless %}
    {% endfor %}
  </div>

  <div id="product">
    {% if product.preorder? %}
      <h2>{{ "product.preorder_now_header" | trans }}</h2>
    <p>{{ "product.available_on" | trans, "available_on", product.available_on }} </p>
    {% endif %}
    {% if product.domestic_only? %}
      <h3 class="domestic_only">{{ "product.domestic_only" | trans }}</h3>
    {% endif %}
    <h2>{{ "product.description_header" | trans }}</h2>
    <p>
    {% if product.description == "" %}
      <em>{{ "product.no_description" | trans }}</em>
    {% else %}
      {{ product.description }}
    {% endif %}
    </p>

    {% if descriptors.size > 0 %}
      <h2>{{ "product.extra_info_header" | trans }}</h2>
      {% for descriptor in descriptors %}
      <strong>{{ descriptor.description }}</strong>: {{ product | descriptor_value: descriptor }}<br />
      {% endfor %}
    {% endif %}
  </div>
  <p>&nbsp;</p>

  <div class="clear"></div>
  {% if product.buylist_mode? %}
    <h2>{{ "product.sell_header" | trans }}</h2>
  <table align="center" cellspacing="3" cellpadding="3" class="invisible-table cell-center">
    <thead>
      <tr>
        {% for name in product.variant_descriptor_names %}
        <th>{{ name }}</th>
        {% endfor %}
        <th>{{ "product.cash_price" | trans }}</th>
        {% if product.has_store_credit_buy_price? %}
          <th>{{ "product.store_credit_price" | trans }}</th>
        {% endif %}
        <th>{{ "product.buy_quantity" | trans }}</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      {% for variant in product.variants %}
        <tr>
          {% for descriptor in variant.descriptor_values %}
          <td>{{ descriptor }}</td>
          {% endfor %}
          <td align="center"><span class="price">{{ variant.price | money }}</span></td>
          {% if product.has_store_credit_buy_price? %}
          <td align="center"><span class="price">{{ variant.store_credit_buy_price | money }}</span></td>
          {% endif %}
          <td align="center"><span class="qty">{{ variant.qty }}</span></td>
          <td>
            {% if site.may_add_to_cart? %}
                {{ "product.sell_button" | trans | link_to_add_cart_with_qty: product, variant }}
            {% else %}
                {{ "product.login_to_add_to_cart" | trans }}
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <h2>{{ "product.buy_header" | trans }}</h2>
  <table align="center" cellspacing="3" cellpadding="3" class="invisible-table cell-center">
    {% if product.in_stock? %}
      <thead>
        <tr>
          {% for name in product.variant_descriptor_names %}
          <th>{{ name }}</th>
          {% endfor %}
          <th>{{ "product.sell_price_label" | trans }}</th>
          <th>{{ "product.quantity_in_stock_label" | trans }}</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        {% for variant in product.variants %}
          <tr>
            {% for descriptor in variant.descriptor_values %}
            <td>{{ descriptor }}</td>
            {% endfor %}
            <td align="center">
              {% if product.msrp_to_f > variant.sell_price_to_f %}
                <span class="msrp price">{{ product.msrp | money }}</span>
              {% endif %}
              <span class="price">{{ variant.price | money }}</span></td>
            <td align="center">
              <span class="qty">
                {% if variant.infinite_qty? %}
                  {{ "product.infinite_quantity_in_stock" | trans }}
                {% else %}
                  {{ variant.qty }}
                {% endif %}
              </span>
            </td>
            <td>
              {% if site.may_add_to_cart? %}
                {% if variant.in_stock? %}
                  {% if product.preorder? %}
                    {{ "product.preorder_now_button" | trans | link_to_add_cart_with_qty: product, variant }}
                  {% else %}
                    {{ "product.add_to_cart_button" | trans | link_to_add_cart_with_qty: product, variant }}
                  {% endif %}
                {% else %}
                  {{ "product.add_to_wishlist_button" | trans | link_to_add_wishlist: product }}
                {% endif %}
              {% else %}
                {{ "product.login_to_add_to_cart" | trans }}
              {% endif %}

            </td>
          </tr>
        {% endfor %}
        {% if product.store_only? %}
            <tr>
                <td colspan="9">
                  <h3 class="store_only">{{ "product.store_only" | trans }}</h3>
                </td>
            </tr>
        {% endif %}
      </tbody>
    {% else %}
      <thead>
        <tr>
          <th>{{ "product.sell_price_label" | trans }}</th>
          <th>{{ "product.quantity_in_stock_label" | trans }}</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ product.sell_price | money }}</td>
          <td>{{ "product.out_of_stock" | trans }}</td>
          <td>{{ "product.add_to_wishlist_button" | trans | link_to_add_wishlist: product }}</td>
        </tr>
      </tbody>
    {% endif %}
  </table>
  {% endif %}

  <p>&nbsp;</p>
  <p class="continue_browsing"><a href="{{ product.category.url }}">
    {{ "product.continue_browsing_category_link" | trans: "category_name", product.category.name }}
  </a></p>

  <div class="products_tagged_like_this">
    {% if related_products.size > 0 %}
      <hr/>
      <h3>{{ "product.related_products_header" | trans }}</h3>
      <table border="0" class="invisible-table" width="100%">
        {% include 'product' with related_products %}
      </table>
    {% endif %}
  </div>
</div>

Default Mobile Liquid Template

<header>
<h1><a href="{{ product.category.url }}">{{ product.category.name }}</a></h1>
{% include 'header_icons' %}
</header>

<h1 class="pagetitle">{{ product.name }}</h1>

<div class="product_container">
  <div class="product">
    <img src="{{ product.main_photo | photo_url: "medium" }}" class="main-photo" />
    {% if product.preorder? %}
    <h2>Preorder now!</h2>
    <p>Available on {{ product.available_on }}</p>
    {% endif %}
    {% if product.domestic_only? %}
    <h3 class="domestic_only">This product cannot be sold internationally.</h3>
    {% endif %}
    {% unless product.description == "" %}
      <h2>Description</h2>
      <p>{{ product.description }}</p>
    {% endunless %}


    {% if product.descriptors.size > 0 %}
      <dl>
      {% for descriptor in product.descriptors %}
        {% unless descriptor.value == '' %}
          <dt>{{ descriptor.name }}:</dt>
          <dd>{{ descriptor.value }}</dd>
        {% endunless %}
      {% endfor %}
      </dl>
    {% endif %}
    <div class="clear"></div>
  </div>

  {% if product.in_stock? or product.wtb_qty > 0 or product.has_store_credit_buy_price? %}
  <div class="variants">
    {% if product.buylist_mode? %}
    <h2>Sell</h2>
    {% else %}
    <h2>Buy</h2>
    {% endif %}

    {% for variant in product.variants %}
      <div class="box variants">
        {% if product.buylist_mode? %}
          <p>We want {{ variant.wtb_qty }} {{ variant.short_info }}, <span class="price">{{ variant.price | money }}</span> each.</p>

          {% if product.has_store_credit_buy_price? %}
            <p>Or you can receive {{ variant.store_credit_buy_price | money }} in store credit.</p>
          {% endif %}

        {% else %}
          {% if variant.infinite_qty? %}
            <p>{{ variant.short_info }} in stock for <span class="price">{{ variant.price | money }}</span>.
          {% else %}
            <p>{{ variant.qty }} {{ variant.short_info }} in stock for <span class="price">{{ variant.price | money }}</span>.
          {% endif %}
          {% if product.msrp_to_f > variant.sell_price_to_f %}<p>Regularly <span class="msrp price">{{ product.msrp | money }}</span>.</p>{% endif %}
          </p>
        {% endif %}

        <div class="clear"></div>
        <div class="add_to_cart_buttons">
          {% if site.buylist_mode? %}
            {% if variant.wtb_qty > 0 %}
              <p>Sell to us now:</p>
              {{ "1" | add_x_to_cart: variant, 1 }}
              {{ "2" | add_x_to_cart: variant, 2 }}
              {{ "3" | add_x_to_cart: variant, 3 }}
              {{ "4" | add_x_to_cart: variant, 4 }}
            {% else %}
              No quantity in stock.
            {% endif %}
          {% else %}
            {% if variant.in_stock? %}
              {% if product.preorder? %}
                <p>Preorder now!</p>
              {% else %}
                <p>Add to your cart</p>
              {% endif %}
              {{ "1" | add_x_to_cart: variant, 1 }}
              {{ "2" | add_x_to_cart: variant, 2 }}
              {{ "3" | add_x_to_cart: variant, 3 }}
              {{ "4" | add_x_to_cart: variant, 4 }}
            {% else %}
              No quantity in stock.
            {% endif %}
          {% endif %}
        </div>
      </div>
    {% endfor %}

  {% elsif product.buylist_mode? == false %}
      <h2>Out of Stock</h2>
      <p>Not currently in stock. Add it to your wishlist and be notified as soon as we carry this product again!</p>
      {{ "Add to Wishlist" | jquery_link_to_add_wishlist: product }}
    {% endif %}
  </div>

  <ul class="ui-buttons">
    <li class="continue_browsing"><a href="{{ product.category.url }}">Continue browsing {{ product.category.name }}</a></li>
  </ul>

  <div class="products_tagged_like_this">
    {% if related_products.size > 0 %}
      <hr/>
      <h3>Products Like This</h3>
      <ul class="products">
        {% include 'product' with related_products %}
      </ul>
    {% endif %}
  </div>
</div>

Drops Supported

• {{ product }}
• {{ product.variants }}
• {{ product.category }}
• {{ product.photos, product.main_photo }}
• {{ descriptors, variant_descriptors }}