Product Image Selection

Example Aurora Template: templates/example.com/products/listings-grid.tpl.html

The main and secondary/alternate (usually used for the mouse-over effect) images can be pulled from any of the image variables details in the "Images" section of the Product Details guide, though typically the best candidates for this are the "listing_image" and "listing_alternate_image" variables, which are populated using the Image Labels system.

The following is a stripped down example that accounts for Category Overrides in the event these are being used.

{if !isset($product.images_by_label_id[$categoryInfo.image_label_main_id])}
  {if isset($product.listing_image_id)}
    {assign var="main_image_id" value=$product.listing_image_id}
  {else}
    {assign var="main_image_id" value=""}
  {/if}
{else}
  {assign var="main_image_id" value=$product.images_by_label_id[$categoryInfo.image_label_main_id]}
{/if}
{if !isset($product.images_by_label_id[$categoryInfo.image_label_alternate_id])}
  {if isset($product.listing_alternate_image_id)}
    {assign var="alternate_image_id" value=$product.listing_alternate_image_id}
  {else}
    {assign var="alternate_image_id" value=""}
  {/if}
{else}
  {assign var="alternate_image_id" value=$product.images_by_label_id[$categoryInfo.image_label_alternate_id]}
{/if}

<a href="{if $language_iso}/{$language_iso}{/if}{$product.product_filename}">
  <img src="{product_image_uri image_id=$main_image_id width=180 height=180}" alt="{$product.product_name|escape}" width="180" height="180"{if $alternate_image_id} rel="{product_image_uri image_id=$alternate_image_id width=180 height=180}"{/if} rev="{$product.id}" />
</a>

👍

For a complete and functioning example with all supporting CSS and JavaScript, please see the Aurora Demo Example Templates detailed above.

Grouped Product Swatches

Example Aurora Template: templates/example.com/products/grouped-product-swatches.tpl.html

Swatches can be created using the data returned by the "productsFindGroupedProductsByProductId" function, as described here.

Related Aurora Demo Templates
products/listings-grid.tpl.html
products/grouped-product-swatches.tpl.html