Customizing Order Printer templates

You can create and customize up to 15 templates for the Order Printer app in your Shopify admin. By default, the Order Printer app includes two templates:

Invoice - a basic invoice that you can send to a customer
Packing slip - a printout of your shop address and your customer's shipping address

Create a new Order Printer template

Creating a new Order Printer template requires you to be familiar with HTML, CSS, and Liquid. Shopify Theme Support can help with minor adjustments within the scope of the Shopify Design Policy.

Steps:

From your Shopify admin, go to Settings > Apps and sales channels.
Click Order Printer to open the app.
Click Manage templates.
Click Add template.
Enter a name for your new template in the Name field.
Add HTML, CSS, or Liquid code in the Code field to create your template.
When you're done, click Save.

Edit an Order Printer template

Editing your Order Printer templates requires you to be familiar with HTML, CSS, and Liquid. Shopify Theme Support can help with minor adjustments within the scope of the Shopify Design Policy.

Steps:

From your Shopify admin, go to Settings > Apps and sales channels.
Click Order Printer to open the app.
Click Manage templates.
Click the name of the template that you want to edit.
Make your changes to the template by adding or editing HTML, CSS, or Liquid code in the Code field. To preview examples of template customizations, refer to Example template customizations.
When you're done, click Save.

Example template customizations

The following examples explain some common ways to customize Order Printer templates:

Example: Add your logo to Order Printer templates

Desktop

From your Shopify admin, go to Content > Files.
Click Upload files and select the image file on your computer.
On the Files page, find the uploaded file and click Copy URL.
From your Shopify admin, click Settings > Apps and sales channels.
Click Order Printer to open the app.
Click Manage templates.
Click the name of the template that you want to edit.
Enter the following code snippet into your template where you would like your logo to appear: <img src="your-image-URL">.
Replace your-image-URL with the image URL you copied. Depending on where you want your logo to be displayed, you might need to add a <br/> tag to add a line break before or after your image.

iPhone

From the Shopify app, tap the … button, and then tap Settings.
In the Store settings section, tap Files.
Tap Upload files and select the image file on your computer.
On the Files page, find the uploaded file and tap Copy URL.
From your Shopify admin, tap Settings > Apps and sales channels.
Tap Order Printer to open the app.
Tap Manage templates.
Tap the name of the template that you want to edit.
Enter the following code snippet into your template where you would like your logo to appear: <img src="your-image-URL">.
Replace your-image-URL with the image URL you copied. Depending on where you want your logo to appear, you might need to add a <br/> tag to add a line break before or after your image.

Android

From the Shopify app, tap the … button, and then tap Settings.
In the Store settings section, tap Files.
Tap Upload files and select the image file on your computer.
On the Files page, find the uploaded file and tap Copy URL.
From your Shopify admin, tap Settings > Apps and sales channels.
Tap Order Printer to open the app.
Tap Manage templates.
Tap the name of the template that you want to edit.
Enter the following code snippet into your template where you would like your logo to appear: <img src="your-image-URL">.
Replace your-image-URL with the image URL you copied. Depending on where you want your logo to appear, you might need to add a <br/> tag to add a line break before or after your image.

It should look like this in the HTML:

Example: Make table widths 100%

To make your tables have borders and stretch to 100% width, add a table-tabular class to your table:

<table class="table-tabular">
    ...
</table>

Example: Display product thumbnails

To include product thumbnails, insert this code into your template:

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

Add order details

You can add order details to your templates, such as the name, quantity, and cost of items purchased. To add order details to your template:

From your Shopify admin, go to Settings > Apps and sales channels.
Click Order Printer to open the app.
Click Manage templates.
Click the name of the template that you want to edit.
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.
When you're done, click Save.

For example, Nyla wants to edit her packing slip template to include a list of the items being shipped. She adds the following code to the bottom of her Packing slip template in the Order Printer app:

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if tax_lines.size > 0 %}
      <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>
        {% if line_item.tax_lines %}
          <td>
            {% for tax_line in line_item.tax_lines %}
              {{ tax_line.price | money }} {{ tax_line.title }}<br/>
            {% endfor %}
          </td>
        {% endif %}
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

As a result, Nyla's packing slips now include a table that lists the items purchased.

Customizing Order Printer templates

On this page

Create a new Order Printer template

Steps:

Edit an Order Printer template

Steps:

Example template customizations

Example: Add your logo to Order Printer templates

Example: Make table widths 100%

Example: Display product thumbnails

Add order details