Product's categories


A category or sub-category might contain several products.
The following code lists all store's categories and sub-categories and all the products contained on each category. It can work great as sidebar menu.

    {% for category in categories %}
      <li>
      <a href="{{category.url}}"><span>{{category.name}}</span></a>
      <ul>
        {% for product in category.products %}
          <li>{{ product.name }}</li>
        {% endfor %}
      </ul>
      </li>
      {% for subcategory in category.subcategories %}
        <li>
          <a href="{{subcategory.url}}"><span>{{ subcategory.name }}</span></a>
          <ul>
            {% for product in subcategory.products %}
              <li>{{ product.name }}</li>
            {% endfor %}
          </ul>
        </li>
      {% endfor %}
    {% endfor %}



Product sorting


All stores have a built-in sorting feature, allowing to sort the products on a collection (like a category) by: Position, Name: A to Z, Name: Z to A, Price: Ascending and Price Descending.

    <div>
      <label for="order">{% t "Sort by" %}:</label>
        <select onchange="window.location.href = this.value">
            {% for sorting_option in products.sorting_options %}
              <option {% if sorting_option.selected %} selected = "selected"{%endif%} value="{{sorting_option.url}}#galleryProduct">
                {{sorting_option.text}}
              </option>
            {% endfor %}
        </select>
    </div>

    <div id="galleryProduct">
        {% for product in products.all limit:8 %}
            {{ product.name }}
        {% endfor %}
    </div>



Product images


A Product has one main image and several secondary ones. The main image is always the first image on the product.images collection.
You can easily list them all.

    {% if product.images.size > 0 %}
      <ul>
        <li class="main-image">
          <a href="{{product.images.first}}">
            <img src="{{product.images.first}}" title="{{product.name}}" alt="{{product.name}}" />
          </a>
        </li>      
        {% if product.images.size > 1 %}
          {% for image in product.images offset:1 %}
          <li class="other-images">
            <a href="{{ image | resize:'640x400'}}">
              <img src="{{ image | thumb:'120x100' }}" title="{{product.name}}" alt="{{product.name}}" />
            </a>
          </li>
          {% endfor %}
        {% endif %}
      </ul>
    {% endif %}  



Related Products:


Related or Recommend Products are products displayed at a Product Page which could be a nice buy along with that product.
There is not a native feature to manage related products. Bellow we detail how you can achieve this with several work-arounds:

Products from the same Category
The following code, to be used at the Product Block, will show products from the first category product.categories.first associated to the product.
If you have more than one category associated to the product you will need to worry about the their ordering.

    <ul id="related-products">
    {% assign cat_id = product.categories.first.permalink %}
    {% for prod in store.category[cat_id].products | limit:10 %} 
    {% unless prod.id == product.id %}
      <li>
      <p>{{prod.name }}</p>
      {% if prod.images.size == 0 %}
        <span>There is no product's image available.</span>
      {% else %}
        <img src="{{ prod.images.first }}" title="{{prod.name}}" alt="{{prod.name}}" />
      {% endif %}
      </li>
    {% endunless %}
    {% endfor %}
    </ul>  



Products from Sibling Categories
Display products from sibling (sister) categories of the current product. product.categories.first.parent gives us the parent category of the first associated category to the product.
As before, be carefull on the order of the Associated Categories of the Product.

    <ul id="related-products">
    {% for cat in product.categories.first.parent.subcategories %}
      {% unless product.categories.first.id == cat_id %}
        {% for prod in store.category[cat.id].products | limit:10 %} 
        <li>
        <p>{{prod.name }}</p>
        {% if prod.images.size == 0 %}
          <span>There's no product image available.</span>
        {% else %}
          <img src="{{ prod.images.first }}" title="{{prod.name}}" alt="{{prod.name}}" />
        {% endif %}
        </li>
      {% endfor %}
      {% endunless %}
    {% endfor %}
    </ul>  



Both this solutions will only return 10 products from the specified category limit:10 by the same exact order. To randomise this list you can use the jQuery plug-in: pick.js

Download it, uploaded it as a Theme Asset, include it with:

<script type="text/javascript" src="{{ "jquery.pick.js" | asset }}"></script>

and add the following Javascript code to your Product Block:

<script type="text/javascript">      
  $(document).ready(function(){
    var how_many = 3 //How many products are shown from entire Collection
    $('#related-products > li').pick(how_many);
  });
</script>



Manually Selected Category using Custom Fields
You can assign "related products" by selecting a category.
Go to the Product Details > Custom Fields section and Add a new Field of the type "Input Field" called "related", and write the permalink of the category you want to assign.

Select Recommended Category

{% assign cat_related_permalink = product.field["related"].value %}
{% for prod in store.category[cat_related_permalink].products | limit:10 %} 
{% unless prod.id == product.id %}
  <li>
    <div>
      <a href="{{prod.url}}">
        <img src="{{ prod.images.first }}" />
      </a>
    </div>
    <a href="{{prod.url}}">
      <h5>{{prod.name}}</h5>
      {% if prod.discount > 0 %}
      <span class="product-price-discount">{{prod.price | price}}<i>{{prod.price | minus:prod.discount | price}}</i></span>
      {% else %}
      <span class="product-price">{{prod.price | price}}</span>
      {% endif %}
    </a>
  </li>
{% endunless %}
{% endfor %}



Manually Selected Products using Custom Fields
If you really want to control which products are displayed as "recommended" you can hand-pick and relate them for each individual product at the Custom Fields section.

At the Product Details > Custom Fields section create a new Field of the type "Text Area" and select the related Products.
Identify each related product by its permalink and separate them using commas. See bellow an example of 3 hand-picked related products.

Select Recommended Products

The following code snippet selects and displays your hand-picked Products at your Product Block. Note that product.field["Related"].value outputs the comma separated string you added at the Text Area Field.

{% if product.field["Related"] %}
{% assign product_related_ids = product.field["Related"].value | split:"," %} 
<ul id="related-products">
{% for prod_id in product_related_ids %}
  {% assign prod = products.product[prod_id] %}
  <li>
  <p>{{prod.name }}</p>
  {% if prod.images.size == 0 %}
    <span>There's no product image available.</span>
  {% else %}
    <img src="{{ prod.images.first }}" title="{{prod.name}}" alt="{{prod.name}}" />
  {% endif %}
  </li>
{% endfor %}
</ul>
{% endif %} 

FAQ


How can I access the second image of my products?

If you do {{product.last}} and {{product.first}} you can access the first and last image of the collection of images of your product.

If you want to be more specific use {{product.images[0]}}, {{product.images[1]}} or {{product.images[3]}} and so on for each item of your collection.

How can I add the original price of my product? For information only.

Sometimes, you want to show the “Original” price of a Product, showing off the price difference between you and the competition.

You could use discounts but that would affect the final price of the product and you just want to display the real price. For informative reasons.

Do this:

  1. Add a Custom Variable, called “Discount”. This will hold the percentage value between the “original” and the “discounted” price:

  1. Associate one the Custom Variable option with your produce. For example 0.5

  2. Add the Product "Original Price" at the Theme Editor > Product Block:

<label>{% t "Price" %}:</label><span class="product-price">{{product.price | minus:product.discount | price}}</span><br />

<label>{% t "Original" %}:</label><span class="product-price-original"><s>{{ product.price | divided_by: product.field["discount"].value | price }}</s></span><br />

As an example, if your Discount Product price was 26.00USD, you would see your Original price at 52.00USD considering the 0.5 discount value.

How can I add an image Magnifier to my Product Images?

Adding a image magnifier (zoom) can provide good results for customers to better understand details of your products.

We recommend using this simple javascript add-on: http://jdbartlett.com/loupe/

1- Download jquery.loupe.min.js and upload it at your Theme Editor Files.

2- At the end of the "Product Block", include the Javascript:

<script type="text/javascript" src="{{ 'jquery.loupe.min.js' | asset }}"></script>

3- Select images and apply them the Loupe effect:

<script type="text/javascript">
  $(document).ready(function(){
    $('.moreViewsSecond img, .moreViewsThird img, .moreViewsFourth img,.moreViewsFifth img').loupe({
      width: 500, // width of magnifier
      height: 300, // height of magnifier
    });
  });
</script>

Jumpseller Support 4- That's all.