Adding a product thumbnail to invoice

Tourist
14 0 2

Hi,

Is it possible to add a thumbnail of the product ordered to the invoice/packing slip?

 

Any help with this would be greatly appreciated. Thanks!

1 Like
Shopify Staff
Shopify Staff
489 0 32

Hey Dom, that's definitely possible if you use the Order Printer app (http://apps.shopify.com/order-printer). You can use Liquid in the Order Printer templates to output the ordered products' thumbnails. 

Cheers!

tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Tourist
14 0 2

Hey Tetchi,

 

I appreciate the reply. I installed the Order Printer app, but I am not sure how to use Liquid to update the template. By chance is their a document I could refer to on how I could update the template? or possibly someone that I could pay to update it for me? Thanks again!

0 Likes
Shopify Staff
Shopify Staff
489 0 32

Hey Dom,

You could something like this: 

<ul> 
 {% for line in line_items %} 
<li> <img src="{{ line.product.featured_image | product_img_url: 'thumb' }}" /> {{ line.quantity }}x {{ line.title }} for {{ line.price | money }} each </li> 
{% endfor %} 
</ul> 

.. to output product images from the order in Order Printer. 

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Tourist
14 0 2

Hi Tetchi,

 

Thank you for the additional information. I have one last question (i hope). Could you please tell me where I could locate the template used for the order printer app invoices so I could add the code above.

 

Thanks again!

0 Likes
Shopify Staff
Shopify Staff
54 0 5

Hi Dominick,

You should see a list of templates at the top right of the app. Each template will have an 'edit' link to the right of it. Here’s a screenshot to help you along:

0 Likes
Tourist
14 0 2

Thanks Kevin,

I have one more question. I added the code to my invoice template, but now the invoice shows a duplicate of each item ordered along with a broken thumbnail image. Below is a copy of the code for my invoice. Could you please help me locate my mistake. Thanks.

 

<p style="float: right; text-align: right;">
  {{ "now" | date: "%m/%d/%y" }}<br />
  Invoice for {{ order_name }}
</p>

<div style="float: left; margin: 0 0 1.5em 0;" >
  <strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br />
  {{ shop.address }}<br/>
  {{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
  {{ shop.country }}
</div>

<hr />

<h3>Item Details</h3>

<table>
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      <th>Tax</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
       {% for line in line_items %} 
<li> <img src="{{ line.product.featured_image | product_img_url: 'thumb' }}" /> {{ line.quantity }}x {{ line.title }} for {{ line.price | money }} each </li> 
{% endfor %} 
        <td>{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        <td>{% for tax_line in tax_lines %}{{ tax_line.price | money }} {{ tax_line.title }}<br/>{% endfor %}</td>
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h3>Transaction Details</h3>
  <table>
    <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<h3>Payment Details</h3>

<table>
  <tr>
    <td>Subtotal price:</td>
    <td>{{ subtotal_price | money }}</td>
  </tr>
  {% for discount in discounts %}
  <tr>
    <td>Includes discount "{{ discount.code }}"</td>
    <td>{{ discount.savings | money }}</td>
  </tr>
  {% endfor %}
  <tr>
    <td>Total tax:</td>
    <td>{{ tax_price | money }}</td>
  </tr>
  {% if shipping_address %}
    <tr>
      <td>Shipping:</td>
      <td>{{ shipping_price | money }}</td>
    </tr>
    <tr>
  {% endif %}
    <td><strong>Total price:</strong></td>
    <td><strong>{{ total_price | money }}</strong></td>
  </tr>
</table>

{% if note %}
  <h3>Note</h3>
  <p>{{ note }}</p>
{% endif %}

{% if shipping_address %}
  <h3>Shipping Details</h3>

  <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid black;">
    <strong>{{ shipping_address.name }}</strong><br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.street }}<br/>
    {{ shipping_address.city }}
    {{ shipping_address.province_code }}
    {{ shipping_address.zip | upcase }}<br/>
    {{ shipping_address.country }}
  </div>
{% endif %}

<p>If you have any questions, please send an email to <u>{{ shop.email }}</u></p>

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 125

Replace this:

<img src="{{ line.product.featured_image | product_img_url: 'thumb' }}" />

with this:

{{ line_item.product.images.first | asset_url | replace: "static", "cdn" | replace: "assets/", "" | replace: "?", "" | replace: "//", "/" | replace: "http", "https" }}

We are working on getting this fixed.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Tourist
14 0 2

Thanks Jamie for the info. I replaced code, but it's now showing the thumbnail as a url. I've also attached a screen shot of the updated invoice showing the url.

 

Below is my updated code.

<p style="float: right; text-align: right;">
  {{ "now" | date: "%m/%d/%y" }}<br />
  Invoice for {{ order_name }}
</p>

<div style="float: left; margin: 0 0 1.5em 0;" >
  <strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br />
  {{ shop.address }}<br/>
  {{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
  {{ shop.country }}
</div>

<hr />

<h3>Item Details</h3>

<table>
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      <th>Tax</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
       {% for line in line_items %} 
<li> {{ line_item.product.images.first | asset_url | replace: "static", "cdn" | replace: "assets/", "" | replace: "?", "" | replace: "//", "/" | replace: "http", "https" }} {{ line.quantity }}x {{ line.title }} for {{ line.price | money }} each </li> 
{% endfor %} 
        <td>{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        <td>{% for tax_line in tax_lines %}{{ tax_line.price | money }} {{ tax_line.title }}<br/>{% endfor %}</td>
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h3>Transaction Details</h3>
  <table>
    <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<h3>Payment Details</h3>

<table>
  <tr>
    <td>Subtotal price:</td>
    <td>{{ subtotal_price | money }}</td>
  </tr>
  {% for discount in discounts %}
  <tr>
    <td>Includes discount "{{ discount.code }}"</td>
    <td>{{ discount.savings | money }}</td>
  </tr>
  {% endfor %}
  <tr>
    <td>Total tax:</td>
    <td>{{ tax_price | money }}</td>
  </tr>
  {% if shipping_address %}
    <tr>
      <td>Shipping:</td>
      <td>{{ shipping_price | money }}</td>
    </tr>
    <tr>
  {% endif %}
    <td><strong>Total price:</strong></td>
    <td><strong>{{ total_price | money }}</strong></td>
  </tr>
</table>

{% if note %}
  <h3>Note</h3>
  <p>{{ note }}</p>
{% endif %}

{% if shipping_address %}
  <h3>Shipping Details</h3>

  <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid black;">
    <strong>{{ shipping_address.name }}</strong><br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.street }}<br/>
    {{ shipping_address.city }}
    {{ shipping_address.province_code }}
    {{ shipping_address.zip | upcase }}<br/>
    {{ shipping_address.country }}
  </div>
{% endif %}

<p>If you have any questions, please send an email to <u>{{ shop.email }}</u></p>

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 125

Hmmm... ok. try this one. slightly updated:

{{ line_item.product.images.first | replace: '.jpg', '_thumb.jpg' | replace: "static", "cdn" | replace: "assets/", "" | replace: "http", "https" }} 

please report back!

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes