Products

• Product Overview
• Single Image
• Product Variation Loop
• Product Variables
• Image Variables
• Image Loop

FLEX Documentation

• Introduction
• Code Overview
• Back Office
• Loops
• Global Output Tags
• Files
• AJAX
• Navigation
• Products
• Categories
• Pages
• Pagination
• Forms
• Checkout
• Search

An image loop allows you to loop through all product images of a particular size.

Example: Lets say we want to show a variety of thumbnails of a product images. When you click on the thumbnail, it loads a bigger version of the image. An Image Loop is required to accomplish this task.

<div id="product-thumbnail-images" total={product_num_image}>
{% define $x = 0 %}
{% loop product_image_thumb %}
    <div id="product-image-{$x}" image_id="{$x}" class="product-thumbnail">
        <div class="img-thumb">{product_image_thumb.img}</div>
    </div>
    {% increment($x)  %}
{% endloop %}
</div>

The above would output:

<div id="product-thumbnail-images" total="2">
    <div id="product-image-0" image_id="0" class="product-thumbnail">
        <div class="img-thumb">
            <img width="70" height="70" title="" alt="" src="path/to/img.jpg" class="product_1842515611 product_image product_thumb" image_id="0">
        </div>
    </div>
    <div id="product-image-1" image_id="1" class="product-thumbnail">
        <div class="img-thumb">
            <img width="70" height="70" title="" alt="" src="path/to/img1.jpg" class="product_1842515612 product_image product_thumb" image_id="1">
        </div>
    </div>
</div>

An image loop can return either the url to the image or the HTML tag img with Alt Text. The image loop will also order your image as specified in Lead Commerce by using FLEX.

{product_image_tiny.img}
<!-- returns the full image HTML: <img src="..."> -->

{product_image_tiny.url}
<!-- returns only the relative URL to the image: /path/to/img.jpg -->