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!
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
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
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>
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.
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>
User | Count |
---|---|
566 | |
215 | |
129 | |
83 | |
45 |