自定义 Order Printer 模板

您可以在 Shopify 后台中为 Order Printer 应用创建和自定义最多 15 个模板。默认情况下,Order Printer 应用包含两个模板:

  • 发票 - 您可以发送给客户的基本发票
  • 装箱单 - 包含您的商店地址和客户收货地址的打印输出文件

创建新的 Order Printer 模板

创建新的 Order Printer 模板要求您熟悉 HTML、CSS 和 Liquid。在 Shopify 设计政策的权限范围内,Shopify 模板支持团队也许能够帮助您对免费的 Shopify 模板进行细微调整。如果您需要进行较复杂的更改或使用非 Shopify 制作的模板,请考虑聘请 Shopify 合作伙伴

步骤:

  1. 在 Shopify 后台中,转至应用 > Order Printer (legacy)

  2. 点击管理模板

  3. 点击添加模板

  4. 名称字段中为新模板输入名称。

  5. 代码字段中添加 HTML、CSS 或 Liquid 代码以创建模板。

  6. 完成后,点击保存

编辑 Order Printer 模板

编辑您的 Order Printer 模板要求您熟悉 HTML、CSS 和 Liquid。Shopify 模板支持团队无法为您大幅编辑模板,但在 Shopify 设计政策的权限范围内,也许能够帮助您对免费的 Shopify 模板进行细微调整。如需进行较复杂的更改,请考虑聘请 Shopify 合作伙伴

步骤:

  1. 在 Shopify 后台中,转至应用 > Order Printer (legacy)

  2. 点击管理模板

  3. 点击要编辑的模板的名称。

  4. 代码字段中添加或编辑 HTML、CSS 或 Liquid 代码以对模板进行更改。若要预览模板自定义示例,请参阅模板自定义示例

  5. 完成后,点击保存

模板自定义示例

以下示例介绍了一些自定义 Order Printer 模板的常用方法:

桌面版
  1. 在 Shopify 后台中,转至内容 > 文件

  2. 点击上传文件,然后选择您计算机上的图片文件。

  3. 文件页面上,找到已上传的文件,然后点击复制 URL

  4. 在 Shopify 后台中,点击设置 > 应用

  5. 点击 Order Printer 打开该应用。

  6. 点击管理模板

  7. 点击要编辑的模板的名称。

  8. 在您希望 logo 显示的模板位置输入以下代码片段:<img src="your-image-URL">

  9. your-image-URL 替换为您复制的图片 URL。根据您希望 logo 显示的位置,您可能需要在图片前后添加 <br/> 标记以添加换行符。

移动设备
  1. Shopify app 中,轻触 菜单 图标。

  2. 内容菜单中,轻触 向下箭头 图标,然后轻触文件

  3. 轻触上传文件,然后选择您计算机上的图片文件。

  4. 文件页面上,找到已上传的文件,然后轻触复制 URL

  5. 在 Shopify 后台中,轻触设置 > 应用

  6. 轻触 Order Printer 打开该应用。

  7. 轻触管理模板

  8. 轻触要编辑的模板的名称。

  9. 在您希望 logo 显示的模板位置输入以下代码片段:<img src="your-image-URL">

  10. your-image-URL 替换为您复制的图片 URL。根据您希望 logo 显示的位置,您可能需要在图片前后添加 <br/> 标记以添加换行符。

它在 HTML 中应如下所示:

HTML 代码示例

示例:将表格宽度设置为 100%

若要使表格具有边框并延伸到 100% 宽度,请向表格中添加 table-tabular 类:

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

示例:显示产品缩略图

若要包含产品缩略图,请将此代码插入模板:

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

添加订单详细信息

您可以将订单详细信息添加到模板中,例如所购商品的名称、数量和成本。若要向模板添加订单详细信息:

  1. 在 Shopify 后台中,转至应用 > Order Printer (legacy)

  2. 点击管理模板

  3. 点击要编辑的模板的名称。

  4. 使用 Liquid 变量添加订单详细信息,并使用 HTML 添加格式。例如,{{ line_item.price | money }} 会打印商品的价格。

  5. 完成后,点击保存

例如,Nyla 想要编辑她的装箱单模板以包含要发运的商品列表。她将以下代码添加到 Order Printer 应用中的 装箱单 模板底部:

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

这样,Nyla 的装箱单现在便会包含一个列出已购买商品的表格。