Creating and customizing templates using Shopify Order Printer

You can create and customize templates using the Shopify Order Printer app in your Shopify admin. By default, the Shopify Order Printer app includes the following templates:

  • Invoice: An invoice that you can send to a customer
  • Packing slip: A printout of your store's address and your customer's shipping address.

You can use Liquid to create your own custom templates for other packaging inserts, such as coupons, labels, or receipts.

Considerations for creating templates in the Shopify Order Printer app

Review the following considerations before you create templates in the Shopify Order Printer app:

Create a template

You can create a new template for your order document.

Steps:

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

  2. From the Apps and sales channels page, click Order Printer.

  3. Click Open app.

  4. Click Templates.

  5. Click Create a template.

  6. In the Name field, enter a name for your template, such as label or coupon.

  7. In the Edit code section, add HTML, CSS, or Liquid code to create your template.

  8. Optional: To preview your template, click Preview.

  9. Click Save.

Edit a template

You can edit an existing template. To learn more about template customizations, refer to Examples of template customizations.

Steps:

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

  2. From the Apps and sales channels page, click Order Printer.

  3. Click Open app.

  4. Click Templates.

  5. Click the template that you want to edit.

  6. In the Edit code section, add or edit HTML, CSS, or Liquid code.

  7. Optional: To preview your template, click Preview.

  8. Click Save.

Examples of template customizations

Review the following examples to learn how you can customize Shopify Order Printer templates:

You can add your logo to your template.

Steps:

  1. From your Shopify admin, go to Content > Files.
  2. Click Upload files, and then select the image file that you want to upload.
  3. To copy the URL for your logo image, click the Link icon.
  4. Click Settings > Apps and sales channels.
  5. Click Order Printer.
  6. Click Templates.
  7. Click the name of the template that you want to edit.
  8. In the code editor, paste the following code block:
<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Replace YOUR_IMAGE_URL_HERE in the code with your image URL.
  2. Optional: To align your logo, change the text-align value to left, right, or center.
  3. Optional: To adjust your logo width, change the width value to a larger or a smaller value, such as 8em or 2em.
  4. Optional: To preview your template, click Preview.
  5. Click Save.

Example:

Review the following example of how your HTML should display after you add your logo to your template:

An example that displays a code block of how to add a logo to a template

Make table widths 100%

You can add borders to your table and stretch it to 100% width. You need to add the table-tabular class to your table.

Steps:

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

  2. From the Apps and sales channels page, click Order Printer.

  3. Click Open app.

  4. Click Templates.

  5. Click the template that you want to edit.

  6. In the code editor, find the table that you want to edit, and then add the table-tabular class to your table.

  7. Optional: To preview your template, click Preview.

  8. Click Save.

Example:

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

Display product thumbnails

You can add product thumbnails to your order template. You need to insert a custom code block into your template.

Steps:

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

  2. From the Apps and sales channels page, click Order Printer.

  3. Click Open app.

  4. Click Templates.

  5. Click the template that you want to edit.

  6. Add the liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} code block to your template.

  7. Optional: To preview your template, click Preview.

  8. Click Save.

Add order details

You can add order details to your template, such as the name, quantity, and price of items purchased.

Steps:

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

  2. From the Apps and sales channels page, click Order Printer.

  3. Click Open app.

  4. Click Templates.

  5. Click the template that you want to edit.

  6. In the code editor, use se Liquid variables to add order details and HTML to add formatting. For example, using the {{ line_item.price | money }} displays the price of the item.

  7. Optional: To preview your template, click Preview.

  8. Click Save.

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 Shopify Order Printer app. As a result, Nyla's packing slips now include a table that lists the items purchased.

<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>
Ready to start selling with Shopify?Try it free