Expresso Store display custom field on checkout page

Question

I'm trying to display a custom field (a product picture) in the checkout page but it's getting buggy. I'd like to display a picture of each product next to it's info. When the page is processed, it displays the first picture correctly, but loops the same image for the rest of the products. I can't figure out why (I'm new to EE). Please help. My code is as follows:

    {items}
    {exp:channel:entries channel="products"}
    <a class="quick-cart-item" href="{path='store_example/checkout'}"><!-- item  -->
    <img class="pull-left" src="{main_pic}" width="40" alt="quick cart">
    <div class="inline-block">
        <span class="title block">{title}</span>
        <span class="price block">{item_qty} &times; {item_subtotal}</span>
    </div>
    </a><!-- /item -->
    {/exp:channel:entries}
    {/items}

Answer 1

You need to pass the entry_id (which is stored per item) to the embedded channel entries tag so it knows which entries to pull since EE can not figure it out dynamically.

{items}
    {exp:channel:entries entry_id="{entry_id}"}
    <a class="quick-cart-item" href="{path='store_example/checkout'}"><!-- item  -->
    <img class="pull-left" src="{main_pic}" width="40" alt="quick cart">
    <div class="inline-block">
        <span class="title block">{title}</span>
        <span class="price block">{item_qty} &times; {item_subtotal}</span>
    </div>
    </a><!-- /item -->
    {/exp:channel:entries}
   {/items}