Creating and customizing Shopify Order Printer templates

You can customize your templates in many ways and create your own templates. The Shopify Order Printer app supports templates made with HTML, CSS, and Liquid variables. Before you customize your templates, make sure to familiarise with the Liquid variables and filters reference for Shopify Order Printer for all supported template customizations.

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

Add your logo to a template

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.

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:

Add images to a template

You can add images 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 image, click the Link icon.

4. Click Settings > Apps.

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 <img src=”Image Source” /> code block.

9. Replace Image Source in the code with your image URL.

10. Click Save.

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, go to Apps > Order Printer.

2. Click Templates.

3. Click the template that you want to edit.

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

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

6. 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, go to Apps > Order Printer.

2. Click Templates.

3. Click the template that you want to edit.

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

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

6. 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, go to Apps > Order Printer.

2. Click Templates.

3. Click the template that you want to edit.

4. 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.

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

6. 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 scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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>

Add a barcode to a template

You can add a barcode to your template

Steps:

1. From your Shopify admin, go to Apps > Order Printer.

2. Click Templates.

3. Click the template that you want to edit.

4. Add the <s-barcode value="a" /> code block to your template.

5. Replace the `` value with your barcode's text value.

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

7. Click Save.

Add a QR code to a template

You can add a QR code to your template.

Steps:

1. From your Shopify admin, go to Apps > Order Printer.

2. Click Templates.

3. Click the template that you want to edit.

4. Add the <s-barcode type="qrcode" value="" /> code block to your template.

5. Replace the `` value with your QR code's text value.

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

7. Click Save.

Using a Google font in a template

To use a Google font in your template, paste the following code to your template, and then replace FontName variable with the name of your Google font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Increasing the font size

To increase the font size in your template, paste the following code into your template, and then adjust the 14 number with a larger or smaller value:

<style>
  :root {
    --font-size: 14px;
  }
</style>

To increase the font size of your headings in your template, paste the following code into your template, and then adjust the values next to the heading:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

If you imported your templates from the legacy Order printer app, then you can increase your font size using the following code block:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>