自定义 Order Printer 模板
您可以在 Shopify 后台为 Order Printer 应用创建和自定义最多 15 个模板。默认情况下,Order Printer 应用包含两个模板:
- 发票 - 您可以发送给客户的基本发票
- 装箱单 - 您的商店地址和客户的收货地址的打印单
创建新的 Order Printer 模板
您需要熟悉 HTML、CSS 和 Liquid 才能创建新的 Order Printer 模板。Shopify 模板支持团队可以帮助您在 Shopify 设计政策范围内进行微调。
步骤:
在 Shopify 后台中,点击设置 > 应用和销售渠道。
点击 Order Printer 打开应用。
点击管理模板。
点击添加模板。
在名称字段中输入新模板的名称。
在代码字段中添加 HTML、CSS 或 Liquid 代码以创建模板。
完成后,点击保存。
编辑 Order Printer 模板
您需要熟悉 HTML、CSS 和 Liquid,才能编辑 Order Printer 模板。Shopify 模板支持团队可以帮助您在 Shopify 设计政策范围内进行微调。
步骤:
在 Shopify 后台中,点击设置 > 应用和销售渠道。
点击 Order Printer 打开应用。
点击管理模板。
点击要编辑的模板的名称。
通过在代码字段中添加或编辑 HTML、CSS 或 Liquid 代码,对模板进行更改。若要预览模板自定义项的示例,请参阅示例模板自定义项。
完成后,点击保存。
模板自定义示例
下方示例说明了自定义 Order Printer 模板的一些常用方法:
示例:将 logo 添加到 Order Printer 模板
- 在 Shopify 后台中,转至内容 > 文件。
- 点击上传文件并选择计算机上的图片文件。
- 在文件页面上,找到上传的文件,然后点击复制 URL。
- 在 Shopify 后台中,点击设置 > 应用和销售渠道。
- 点击 Order Printer 打开应用。
- 点击管理模板。
- 点击要编辑的模板的名称。
- 在您希望显示 logo 的模板中输入以下代码片段:
<img src="your-image-URL">
。 - 将
your-image-URL
替换为您复制的图片 URL。根据所需的 logo 显示位置,您可能需要添加<br/>
标签以在图片之前或之后添加换行符。
- 在 Shopify 应用中,点击 ... 按钮,然后点击设置。
- 在商店设置部分,点击文件。
- 点击上传文件并选择计算机上的图片文件。
- 在文件页面上,找到上传的文件,然后点击复制 URL。
- 在 Shopify 后台中,点击设置 > 应用和销售渠道。
- 点击 Order Printer 以打开应用。
- 点击管理模板。
- 轻触要编辑的模板的名称。
- 在您希望显示 logo 的模板中输入以下代码片段:
<img src="your-image-URL">
。 - 将
your-image-URL
替换为您复制的图片 URL。根据您希望 logo 显示的位置,您可能需要添加<br/>
标签以在图片之前或之后添加换行符。
- 在 Shopify 应用中,点击 ... 按钮,然后点击设置。
- 在商店设置部分,点击文件。
- 点击上传文件并选择计算机上的图片文件。
- 在文件页面上,找到上传的文件,然后点击复制 URL。
- 在 Shopify 后台中,点击设置 > 应用和销售渠道。
- 点击 Order Printer 以打开应用。
- 点击管理模板。
- 轻触要编辑的模板的名称。
- 在您希望显示 logo 的模板中输入以下代码片段:
<img src="your-image-URL">
。 - 将
your-image-URL
替换为您复制的图片 URL。根据您希望 logo 显示的位置,您可能需要添加<br/>
标签以在图片之前或之后添加换行符。
它的 HTML 显示形式应如下所示:
示例:将表格宽度设置为 100%
若要为表格添加边框并将宽度拉伸为 100%,请将 table-tabular
类添加到表格中:
示例:显示产品缩略图
若要包含产品缩略图,请将此代码插入模板:
添加订单详细信息
备注:以下自定义需要具有 HTML 和 Liquid 的知识。
您可以向模板中添加订单详细信息,例如所购产品的名称、数量和费用。要向模板添加订单详细信息,请执行以下操作:
在 Shopify 后台中,点击设置 > 应用和销售渠道。
点击 Order Printer 打开应用。
点击管理模板。
点击要编辑的模板的名称。
使用 Liquid 变量添加订单详情,并使用 HTML 添加格式。例如,
{{ line_item.price | money }}
将打印商品的价格。完成后,点击保存。
例如,Nyla 想对装箱单模板进行编辑,使其包括要发货的商品列表。她在 Order Printer 应用中将以下代码添加到 Packing slip
模板底部:
随后,Nyla 的装箱单现将包含一张列出了已购商品的表格。