Shopify themes, liquid, logos, and UX
I am attempting to add product image to the product invoice template in The Shopify Order Printer App.
So far i have added this to the code:
<table class="table-tabular" style="margin: 0 0 1.5em 0;"> <thead> <tr> <th>Quantity</th> <th>Item</th> <th>Image</th> {% if show_line_item_taxes %} <th>Taxes</th> {% endif %} <th>Price</th> </tr> </thead> <tbody> {% for line_item in line_items %} <tr> <td>{{ line_item.quantity }} x</td> <td><b>{{ line_item.title }}</b></td> <td> {% if line_item.image != blank %} <img src="{{ line_item.image }}" alt="{{ line_item.title }}" style="width: {{ desired_image }}px; height: {{ desired_image_size }}px;"> {% endif %} </td> {% if show_line_item_taxes %} <td> {% for tax_line in line_item.tax_lines %} {{ tax_line.price | money }} {{ tax_line.title }}<br/> {% endfor %} </td> {% endif %} <td> {% if line_item.original_price != line_item.price %} <s>{{ line_item.original_price | money }}</s> {% endif %} {{ line_item.price | money }} </td> </tr> {% endfor %} </tbody> </table>
Full code below:
<p style="float: right; text-align: right; margin: 0;"> {{ "now" | date: "%m/%d/%y" }}<br /> Invoice for {{ order_name }} </p> <div style="float: left; margin: 0 0 1.5em 0;" > <img src="https://cdn.shopify.com/s/files/1/0683/8121/2948/files/Copy_of_supreme_KITCHENWARE_5.png?v=1669459864" style="width: 60px; height: 60px;"> <br> <strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br /> {{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/> {{ shop.country }} </div> <hr /> <h3 style="margin: 0 0 1em 0;">Item Details</h3> <table class="table-tabular" style="margin: 0 0 1.5em 0;"> <thead> <tr> <th>Quantity</th> <th>Item</th> <th>Image</th> {% if show_line_item_taxes %} <th>Taxes</th> {% endif %} <th>Price</th> </tr> </thead> <tbody> {% for line_item in line_items %} <tr> <td>{{ line_item.quantity }} x</td> <td><b>{{ line_item.title }}</b></td> <td> {% if line_item.image != blank %} <img src="{{ line_item.image }}" alt="{{ line_item.title }}" style="width: {{ desired_image }}px; height: {{ desired_image_size }}px;"> {% endif %} </td> {% if show_line_item_taxes %} <td> {% for tax_line in line_item.tax_lines %} {{ tax_line.price | money }} {{ tax_line.title }}<br/> {% endfor %} </td> {% endif %} <td> {% if line_item.original_price != line_item.price %} <s>{{ line_item.original_price | money }}</s> {% endif %} {{ line_item.price | money }} </td> </tr> {% endfor %} </tbody> </table> <h3 style="margin: 0 0 1em 0;">Payment Details</h3> <table class="table-tabular" style="margin: 0 0 1.5em 0;"> <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> {% endif %} <tr> <td><strong>Total price:</strong></td> <td><strong>{{ total_price | money }}</strong></td> </tr> {% if total_paid != total_price %} <tr> <td><strong>Total paid:</strong></td> <td><strong>{{ total_paid | money }}</strong></td> </tr> <tr> <td><strong>Outstanding Amount:</strong></td> <td><strong>{{ total_price | minus: total_paid | money }}</strong></td> </tr> {% endif %} </table> {% if note %} <h3 style="margin: 0 0 1em 0;">Note</h3> <p>{{ note }}</p> {% endif %} {% if shipping_address %} <h3 style="margin: 0 0 1em 0;">Shipping Details</h3> <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid black;"> <strong>{{ shipping_address.name }}</strong><br/> {{ shipping_address | format_address }} </div> {% endif %} <p>If you have any questions, please send an email to <u>{{ shop.email }}</u></p>
However it has only done this:
add the code below:
{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025