How to add product image in shopify invoice

jewellerystore1
Excursionist
46 0 4

Hi there, 

 

I can't seem to add the product image on my order printer invoice. Can someone please tell me the code I need to insert for this?

 I have tried this code and it didn't work 

 

<img src="https://cdn.shopify.com/s/files/1/0745/6338/7678/files/Nui_serif_logo_black_7a1e824b-951f-4c3b-bbee-...">

 

Please help!

 

Screen Shot 2023-11-03 at 9.52.05 pm.png

Replies 6 (6)
zaczee
Globetrotter
749 41 35

Hi,

 

Can you share your store url

jewellerystore1
Excursionist
46 0 4
Lucas_Brown
Visitor
2 0 0

Certainly, adding product images to your Shopify invoice can provide a visual touch to your order documents. To achieve this, you'll need to make some modifications to your Shopify template code. Here's a smart and unique step-by-step guide:

1. Access Your Shopify Theme:

  • Log in to your Shopify admin panel.
  • Navigate to "Online Store" and select "Themes."
  • Find and click on the "Actions" dropdown for your current theme, then choose "Edit code."

2. Locate the Order Printer Template:

  • Look for the "Templates" folder in the list of theme files.
  • Find the file that corresponds to your order printer template, typically named something like "order.liquid" or "invoice.liquid." If you can't find it, you might need to create a custom order printer template.

3. Add the Product Image Code:

  • Inside the order printer template, locate the section where you want to display the product image. This might be near the product name or in the product details section.
  • Add the following code snippet to display the product image:
  •  
  • This code fetches the product image associated with each line item and displays it on the invoice.

4. Save and Test:

  • After adding the code, save the template file.
  • Test it by creating a sample order and generating an invoice. You should now see product images on your invoice.

5. Customize Styling (Optional):

  • You may need to adjust the styling to make the images look good in your invoice. This can be done using CSS within your theme.

Remember, the availability of certain variables and the structure of your template might vary depending on your Shopify theme. If you're not comfortable with coding, consider seeking assistance from a developer or Shopify expert to ensure a seamless integration of product images into your invoices.

With these steps, you'll be able to add product images to your Shopify invoice, enhancing the visual appeal of your order documents.

 
jewellerystore1
Excursionist
46 0 4

I am using the order print app. Does this make a difference?

DivyanshS
Excursionist
25 2 1

As you mentioned you are using Order Print app. You can use this from the documentation of Shopify Help Center. 

 

  1. From your Shopify admin, click Settings > Apps and sales channels .

  2. Click Order Printer to open the app.

  3. Click Manage templates.

  4. Click the name of the template that you want to edit.

  5. Use Liquid variables to add order details and HTML to add formatting. For example, the {{ line_item.price | money }} prints the price of the item.

  6. Similarly, to include product thumbnails, insert this code into your template: 
    {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}
  7. When you're done, click Save.

Please follow the steps and use the solution from step 6 to add product image in Shopify Invoice.

 

Hi. I’m Divyansh Sharma, I am the Founder of Dessus Media. I help shopify businesses increase their marketing using paid and organic channels.
jewellerystore1
Excursionist
46 0 4

Hi, 

 

I have added the code but the thumbnail is still missing?

 

Thanks for your help