How to Add Image in Shopify Invoice Template Code in Order Printer App

To integrate an image into your invoice template using the Order Printer app in Shopify, follow these comprehensive steps:

Access the Order Printer Template

1. Navigate to the Order Printer App:
   • From your Shopify admin dashboard, go to Apps.
   • Open the Order Printer app.
   • Click on Manage Templates.
   • Select the template you intend to modify, such as Invoice.

Add the Image Code

Identify the Insertion Point:

• Locate the appropriate section in your template where you want the image to appear. This could be the header, footer, or any other segment within the template structure.

Insert the Image Code:

• Utilize the following Liquid HTML code to embed the image.

LIQUID HTML CODE : "Copy code"

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

• For static images such as a company logo, upload the image file to Shopify and use the URL in the HTML code.

Example Implementation:

If you want to add a logo at the top of your invoice, your template might look like this:

1.Upload the Image to Shopify Files:

• From your Shopify admin, navigate to Content > Files.
• Click Upload files and select the desired image file from your computer.
• Once uploaded, locate the file on the Files page and click Copy URL.

2.Edit the Order Printer Template:

• From your Shopify admin, click Settings > Apps and sales channels.
• Select Order Printer to open the app.
• Click Manage templates.
• Choose the template you wish to edit.
• Insert the following HTML snippet at the desired location in your template:

3.HTML :Copy code

• Replace your-image-URL with the copied URL of the uploaded image. You may need to include a
  tag to introduce line breaks before or after the image for better formatting.

4.Save the Template

5.Save the Changes:

• After inserting the image code, click Save to apply and retain the modifications to your template.

6.Preview and Test

7.Generate and Verify the Invoice:

• Produce an invoice using the Order Printer app to ensure the image is rendered correctly in both the printed and PDF versions of the invoice.

By meticulously following these steps, you can effectively add images to your invoice templates, thereby enhancing the visual appeal and informational value of your invoices. This process leverages the flexibility of HTML and Liquid within Shopify's Order Printer app, allowing for a customized and professional presentation of your invoices.