创建和自定义 Shopify Order Printer 模板

您可以通过多种方式自定义模板并创建自己的模板。Shopify Order Printer 应用支持使用 HTML、CSS 和 Liquid 变量制作的模板。在自定义模板之前，请务必熟悉适用于 Shopify Order Printer 的 Liquid 变量和筛选器参考，以了解所有支持的模板自定义项。

查看以下示例，了解如何自定义 Shopify Order Printer 模板。

在此页面上

将您的 logo 添加到模板

您可以将您的 logo 添加到模板中。

步骤：

在 Shopify 后台中，转至内容 > 文件。
点击上传文件，然后选择要上传的图片文件。
若要复制您的 logo 图片的 URL，请点击链接图标。
点击设置 > 应用。
点击 Order Printer。
点击模板。
点击您要编辑的模板的名称。
在代码编辑器中，粘贴以下代码块：

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>

将代码中的 YOUR_IMAGE_URL_HERE 替换为您的图片 URL。
可选：若要对齐您的 logo，请将 text-align 值更改为 left、right 或 center。
可选：若要调整您的 logo 宽度，请将 width 值更改为更大或更小的值，例如 8em 或 2em。
可选：若要预览您的模板，请点击预览。
点击保存。

示例：

查看以下示例，了解将 logo 添加到模板后 HTML 的显示方式：

向模板中添加图片

您可以向模板中添加图片。

步骤：

在 Shopify 后台中，转至内容 > 文件。
点击上传文件，然后选择要上传的图片文件。
若要复制您的图片 URL，请点击链接图标。
点击设置 > 应用。
点击 Order Printer。
点击模板。
点击您要编辑的模板的名称。
在代码编辑器中，粘贴 <img src=”Image Source” /> 代码块。
将代码中的 Image Source 替换为您的图片 URL。
点击保存。

将表格宽度设为 100%

您可以为表格添加边框并将其宽度延展至 100%。您需要将 table-tabular 类添加到您的表格中。

步骤：

在 Shopify 后台中，转至应用 > Order Printer。
点击模板。
点击您要编辑的模板。
在代码编辑器中，找到您要编辑的表格，然后将 table-tabular 类添加到您的表格中。
可选：若要预览您的模板，请点击预览。
点击保存。

示例：

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

显示产品缩略图

您可以将产品缩略图添加到您的订单模板中。您需要将自定义代码块插入模板中。

步骤：

在 Shopify 后台中，转至应用 > Order Printer。
点击模板。
点击您要编辑的模板。
将 {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} 代码块添加到您的模板中。
可选：若要预览您的模板，请点击预览。
点击保存。

添加订单详细信息

您可以将订单详细信息（例如已购买商品的名称、数量和价格）添加到模板中。

步骤：

在 Shopify 后台中，转至应用 > Order Printer。
点击模板。
点击您要编辑的模板。
在代码编辑器中，使用 Liquid 变量添加订单详细信息，并使用 HTML 添加格式。例如，使用 {{ line_item.price | money }} 可显示商品的价格。
可选：若要预览您的模板，请点击预览。
点击保存。

示例：

Nyla 想要编辑她的装箱单模板以包含要发运的商品列表。她在 Shopify Order Printer 应用中将以下代码添加到其装箱单模板的底部。这样，Nyla 的装箱单现在便会包含一个列出已购商品的表格。

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

向模板中添加条码

您可以向模板中添加条码。

步骤：

在 Shopify 后台中，转至应用 > Order Printer。
点击模板。
点击您要编辑的模板。
将 <s-barcode value="a" /> 代码块添加到您的模板中。
将 value 属性的值替换为您的条码文本值。
可选：若要预览您的模板，请点击预览。
点击保存。

向模板中添加二维码

您可以向模板中添加二维码。

步骤：

在 Shopify 后台中，转至应用 > Order Printer。
点击模板。
点击您要编辑的模板。
将 <s-barcode type="qrcode" value="" /> 代码块添加到您的模板中。
将 value 属性的值替换为您的二维码文本值。
可选：若要预览您的模板，请点击预览。
点击保存。

在模板中使用 Google 字体

若要在模板中使用 Google 字体，请将以下代码粘贴到您的模板中，然后将 FontName 变量替换为您的 Google 字体名称：

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

增大字号

若要增大模板中的字号，请将以下代码粘贴到模板中，然后将数字 14 调整为更大或更小的值：

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

若要增大模板中标题的字号，请将以下代码粘贴到您的模板中，然后调整标题旁边的值：

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

如果您从旧版 Order Printer 应用导入了模板，则可以使用以下代码块来增大字号：

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