Category Browse

Default Liquid Template

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

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

<p class="justify">
  {% unless category.photo == false %}
    <img src="{{ category.photo | photo_url: 'large' }}" class="floatLeft" />
  {% endunless %}
  {{ category.description }}
</p>
<br />

{% include "filters" %}
<div class="hr"></div>

{% if products.size > 0 %}
  {{ products | paginate }}
  <div class="before-products">
    {{ 'Add All to Cart' | link_to_mass_add_to_cart }}
    {% if site.buylist_mode? %}
      <a href="{{ site.buylist_checkout_url }}" class="checkout_link"><span>Checkout</span></a>
    {% else %}
      <a href="{{ site.checkout_url }}" class="checkout_link"><span>Checkout</span></a>
    {% endif %}&nbsp;&nbsp;
    <div class="clear"></div>
  </div>
  {% if category.layout == 'Grid2' %}
    <div class="products_grid products_grid2">
      {% for product in products %}
        {% cycle 'top': '<div class="grid_row">',''%}
        {% include "product_grid" with product as product %}
        {% cycle 'bot': '','<div class="clear"></div></div>'%}
      {% endfor %}
      {% unless products.size has_factor 2 %}
        <div class="clear"></div></div>
      {% endunless %}
    </div>
  {% elsif category.layout == 'Grid3' %}
    <div class="products_grid products_grid3">
      {% for product in products %}
        {% cycle 'top': '<div class="grid_row">', '',''%}
        {% include "product_grid" with product as product %}
        {% cycle 'bot': '','','<div class="clear"></div></div>'%}
      {% endfor %}
      {% unless products.size has_factor 3 %}
        <div class="clear"></div></div>
      {% endunless %}
    </div>
  {% elsif category.layout == 'Grid4' %}
    <div class="products_grid products_grid4">
      {% for product in products %}
        {% cycle 'top': '<div class="grid_row">', '','',''%}
        {% include "product_grid" with product as product %}
        {% cycle 'bot': '','','','<div class="clear"></div></div>'%}
      {% endfor %}
      {% unless products.size has_factor 4 %}
        <div class="clear"></div></div>
      {% endunless %}
    </div>
  {% elsif category.layout == 'Hybrid3x2' %}
    {% if pagination.current == pagination.first %}
      <div class="products_grid products_grid3">
        {% for product in products limit:6 %}
          {% cycle 'top': '<div class="grid_row">', '',''%}
          {% include "product_grid" with product as product %}
          {% cycle 'bot': '','','<div class="clear"></div></div>'%}
        {% endfor %}
        {% unless products.size > 6 or products.size has_factor 3 %}
          {{ products.size }}
          <div class="clear"></div></div>
        {% endunless %}
      </div>
      <table class="invisible-table products_table" border="0" width="100%">
        {% for product in products offset:6 %}
          {% include "product" with product %}
        {% endfor %}
      </table>
    {% else %}
      <table class="invisible-table products_table" border="0" width="100%">
      {% include "product" with products %}
      </table>
    {% endif %}
  {% elsif category.layout == 'Hybrid4x2' %}
    {% if pagination.current == pagination.first %}
      <div class="products_grid products_grid4">
        {% for product in products limit:8 %}
          {% cycle 'top': '<div class="grid_row">', '','',''%}
          {% include "product_grid" with product as product %}
          {% cycle 'bot': '','','','<div class="clear"></div></div>'%}
        {% endfor %}
        {% unless products.size > 8 or products.size has_factor 4 %}
          {{ products.size }}
          <div class="clear"></div></div>
        {% endunless %}
      </div>
      <table class="invisible-table products_table" border="0" width="100%">
        {% for product in products offset:8 %}
          {% include "product" with product %}
        {% endfor %}
      </table>
    {% else %}
      <table class="invisible-table products_table" border="0" width="100%">
      {% include "product" with products %}
      </table>
    {% endif %}
  {% elsif category.layout == 'Hybrid3x1' %}
    {% if pagination.current == pagination.first %}
      <div class="products_grid products_grid3">
        {% for product in products limit:3 %}
          {% cycle 'top': '<div class="grid_row">', '',''%}
          {% include "product_grid" with product as product %}
          {% cycle 'bot': '','','<div class="clear"></div></div>'%}
        {% endfor %}
        {% unless products.size > 3 or products.size has_factor 3 %}
          {{ products.size }}
          <div class="clear"></div></div>
        {% endunless %}
      </div>
      <table class="invisible-table products_table" border="0" width="100%">
        {% for product in products offset:3 %}
          {% include "product" with product %}
        {% endfor %}
      </table>
    {% else %}
      <table class="invisible-table products_table" border="0" width="100%">
      {% include "product" with products %}
      </table>
    {% endif %}
  {% elsif category.layout == 'Hybrid4x1' %}
    {% if pagination.current == pagination.first %}
      <div class="products_grid products_grid4">
        {% for product in products limit:4 %}
          {% cycle 'top': '<div class="grid_row">', '','',''%}
          {% include "product_grid" with product as product %}
          {% cycle 'bot': '','','','<div class="clear"></div></div>'%}
        {% endfor %}
        {% unless products.size > 4 or products.size has_factor 4 %}
          {{ products.size }}
          <div class="clear"></div></div>
        {% endunless %}
      </div>
      <table class="invisible-table products_table" border="0" width="100%">
        {% for product in products offset:4 %}
          {% include "product" with product %}
        {% endfor %}
      </table>
    {% else %}
      <table class="invisible-table products_table" border="0" width="100%">
      {% include "product" with products %}
      </table>
    {% endif %}
  {% else %}
    <table class="invisible-table products_table" border="0" width="100%">
    {% include "product" with products %}
    </table>
  {% endif %}
  <div class="after-products">
    {{ 'Add All to Cart' | link_to_mass_add_to_cart }}
    {% if site.buylist_mode? %}
      <a href="{{ site.buylist_checkout_url }}" class="checkout_link"><span>Checkout</span></a>
    {% else %}
      <a href="{{ site.checkout_url }}" class="checkout_link"><span>Checkout</span></a>
    {% endif %}&nbsp;&nbsp;
    <div class="clear"></div>
  </div>
  {{ products | paginate }}
{% else %}
  <div class="no-products-message">There are no products to show</div>
{% endif %}

Default Mobile Liquid Template

<header>
<a href="{{ category.parent.url }}">{{ category.parent.name }}</a>
{% include 'header_icons' %}
</header>
<div class="category_browse">
<h1>{{ category.name }}</h1>
{% unless category.photo == false %}
  <img src="{{ category.photo | photo_url: 'large' }}" class="category_photo" />
{% endunless %}
<p class="category_description">{{ category.description }}</p>

{% include "filters" %}
{% if products.size > 0 %}
  <ul class="products">
    {% include "product" with products %}
  </ul>
  {{ products | paginate }}
{% else %}
  <p class="no-products-message">There are no products in this category.</p>
{% endif %}

Drops Supported

• {{ category }}
• {{ descriptors }}
• {{ products }}
• {{ pages }}
• {{ filter }}