Shopify Liquid Examples

Basic Example (Textual output)

This basic example demonstrates iterating through different recommendation types (called groups) and listing a maximum of five recommended products per group in a nested iteration:

{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
  {% if group.bundle %}
    <li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
  {% else %}
    {% for product in group.products limit:5 %}
    <li>
      <a href="{{ product.url }}">{{ product.title }}</a>
      for {{ product.price | money }}
    </li>
    {% endfor %}
  {% endif %}
</ul>
{% endfor %}

In the {% if group.bundle %}…{% else %}…{% endif %} block we handle the special case of a group being a bundle. In this case we want to have a different link {{ bundle.buy_link }} that adds the bundled products to the basket. Also we want to show a message {{ bundle.buy_text }} that contains the price of the whole bundle. For more information on bundles see the Variable Reference.

Styled recommendations with CSS 3 animations

<style type="text/css">
.recommendations-label {
  font-family: Arial, sans-serif;
  font-size: 2em;
}

.recommendation-group {
  float: left;
  display: block;
  clear: both;
  padding: 5px;
}

.recommended-item {
  display: inline-block;
  float: left;
  text-align: center;
  cursor: pointer;
  height: 102px;
  padding: 3px;
  margin: 3px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.bundle-plus {
  display: inline-block;
  float: left;
  text-align: center;
  cursor: pointer;
  height: 102px;
  padding: 3px;
  margin: 3px;
  font-family: Arial, sans-serif;
  font-size: 2em;
  line-height:4em;
  vertical-align: middle;
}

.recommended-image-container {
  float: left;
  width: 102px;
  line-height: 100px;
}

.recommended-image-container img {
  vertical-align: top;
}

.recommended-details {
  width: 1px;
  height: 102px;
  float: left;
  overflow: clip;
  text-align: left;
  transition: width 0.2s;
  -webkit-transition: width 0.2s; /* Safari, Chrome */
}


.recommended-item:hover .recommended-details {
  width: 120px;
}

.rtitle, .rprice {
  margin-left: 1px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
  
.sale-price {
  text-decoration: line-through;
}    
</style>

<div class="recommendations">
{% for group in groups %}
  <div class="recommendation-group">
    <span class="recommendations-label">{{ group.label }}</span>
    <ul>
      {% for product in group.products %}
      <a href="{{ product.url }}">
        <div class="recommended-item">
          <div class="recommended-image-container">
            <img src="{{ product.featured_image | product_img_url: 'small' }}" />
          </div>
          <div class="recommended-details">
            <div class="rtitle">
              {{ product.title }}<br/>
              {% if product.compare_at_price_min > product.price_min %}
              <span class="sale-price">{{ product.compare_at_price_min | money }}</span>
              {% endif %}
              {{ product.price | money }}
            </div>
          </div>
        </div>
      </a>
      {% if group.bundle and product == group.products.first %}
      <div class="bundle-plus">+</div>
      {% endif %}
      {% if group.bundle and product == group.products.last %}
      <div class="bundle-plus">
        <a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
      </div>
      {% endif %}
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</div>