Tạo và tùy chỉnh mẫu Shopify Order Printer
Bạn có thể tùy chỉnh mẫu theo nhiều cách và tạo mẫu của riêng mình. Ứng dụng Shopify Order Printer hỗ trợ các mẫu được tạo bằng biến HTML, CSS và Liquid. Trước khi tùy chỉnh mẫu, đảm bảo bạn đã làm quen với tài liệu tham khảo về biến Liquid và bộ lọc dành cho Shopify Order Printer để biết tất cả các tùy chỉnh mẫu được hỗ trợ.
Xem lại các ví dụ sau để tìm hiểu cách tùy chỉnh mẫu Shopify Order Printer.
Trên trang này
Thêm logo vào mẫu
Bạn có thể thêm logo của mình vào mẫu.
Bước:
- Trên trang quản trị Shopify, vào mục Nội dung > Tệp.
- Nhấp vào Tải lên tệp rồi chọn tệp hình ảnh bạn muốn tải lên.
- Để sao chép URL của hình ảnh logo, nhấp vào biểu tượng Liên kết.
- Nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
- Nhấp vào Mẫu.
- Nhấp vào tên mẫu bạn muốn chỉnh sửa.
- Trong trình biên tập mã, dán khối mã sau:
liquid
<div style="text-align: center;">
<img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
- Thay
YOUR_IMAGE_URL_HEREtrong mã bằng URL hình ảnh của bạn. - Không bắt buộc: Để căn chỉnh logo, thay đổi giá trị
text-alignthànhleft,righthoặccenter. - Không bắt buộc: Để điều chỉnh chiều rộng logo, thay đổi giá trị
widththành giá trị lớn hơn hoặc nhỏ hơn, ví dụ như8emhoặc2em. - Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
- Nhấp vào Lưu.
Ví dụ:
Xem lại ví dụ sau về cách HTML hiển thị sau khi bạn thêm logo vào mẫu:
Thêm hình ảnh vào mẫu
Bạn có thể thêm hình ảnh vào mẫu.
Bước:
- Trên trang quản trị Shopify, vào mục Nội dung > Tệp.
- Nhấp vào Tải lên tệp rồi chọn tệp hình ảnh bạn muốn tải lên.
- Để sao chép URL của hình ảnh, nhấp vào biểu tượng Liên kết.
- Nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
- Nhấp vào Mẫu.
- Nhấp vào tên mẫu bạn muốn chỉnh sửa.
- Trong trình biên tập mã, dán khối mã
<img src=”Image Source” />. - Thay
Image Sourcetrong mã bằng URL hình ảnh của bạn. - Nhấp vào Lưu.
Tạo chiều rộng bảng 100%
Bạn có thể thêm đường viền vào bảng và kéo dài đến 100% chiều rộng. Bạn cần thêm lớp table-tabular vào bảng.
Bước:
- Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
Nhấp vào Mở ứng dụng.
Nhấp vào Mẫu.
Nhấp vào mẫu bạn muốn chỉnh sửa.
Trong trình biên tập mã, tìm bảng bạn muốn chỉnh sửa rồi thêm lớp
table-tabularvào bảng.Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
Nhấp vào Lưu.
Ví dụ:
<table class="table-tabular">
...
</table>Hiển thị hình thu nhỏ của sản phẩm
Bạn có thể thêm hình thu nhỏ của sản phẩm vào mẫu đơn hàng. Bạn cần chèn khối mã tùy chỉnh vào mẫu.
Bước:
- Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
Nhấp vào Mở ứng dụng.
Nhấp vào Mẫu.
Nhấp vào mẫu bạn muốn chỉnh sửa.
Thêm khối mã
liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}vào mẫu.Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
Nhấp vào Lưu.
Thêm chi tiết đơn hàng
Bạn có thể thêm các chi tiết đơn hàng vào mẫu, ví dụ như tên, số lượng và giá của mặt hàng đã mua.
Bước:
- Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
Nhấp vào Mở ứng dụng.
Nhấp vào Mẫu.
Nhấp vào mẫu bạn muốn chỉnh sửa.
Trong trình biên tập mã, sử dụng biến Liquid để thêm chi tiết đơn hàng và HTML để thêm định dạng. Ví dụ: Nếu sử dụng
{{ line_item.price | money }}, giá của mặt hàng sẽ hiển thị.Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
Nhấp vào Lưu.
Ví dụ:
Nyla muốn chỉnh sửa mẫu phiếu giao hàng để thêm danh sách các mặt hàng đang được vận chuyển. Cô thêm mã sau vào phía dưới mẫu Phiếu giao hàng trong ứng dụng Shopify Order Printer. Do đó, các phiếu giao hàng của Nyla hiện bao gồm một bảng liệt kê các mặt hàng cô mua.
liquid
<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>
Thêm mã vạch vào mẫu
Bạn có thể thêm mã vạch vào mẫu
Bước:
- Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
Nhấp vào Mở ứng dụng.
Nhấp vào Mẫu.
Nhấp vào mẫu bạn muốn chỉnh sửa.
Thêm khối mã
<s-barcode value="a" />vào mẫu.Thay thế giá trị `` bằng giá trị văn bản của mã vạch.
Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
Nhấp vào Lưu.
Thêm mã QR vào mẫu
Bạn có thể thêm mã QR vào mẫu.
Bước:
- Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
- Nhấp vào Order Printer.
Nhấp vào Mở ứng dụng.
Nhấp vào Mẫu.
Nhấp vào mẫu bạn muốn chỉnh sửa.
Thêm khối mã
<s-barcode type="qrcode" value="" />vào mẫu.Thay thế giá trị `` bằng giá trị văn bản của mã QR.
Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
Nhấp vào Lưu.
Sử dụng phông chữ Google trong mẫu
Để sử dụng phông chữ Google trong mẫu, hãy dán mã sau vào mẫu, rồi thay thế biến FontName bằng tên phông chữ Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
body {
font-family: FontName, serif;
}
</style>Tăng cỡ phông chữ
Để tăng cỡ phông chữ trong mẫu, hãy dán mã sau vào mẫu, rồi điều chỉnh số 14 thành giá trị lớn hơn hoặc nhỏ hơn:
<style>
:root {
--font-size: 14px;
}
</style>Để tăng cỡ phông chữ của tiêu đề trong mẫu, hãy dán mã sau vào mẫu, rồi điều chỉnh các giá trị bên cạnh tiêu đề:
<style>
:root {
--h1-font-size: 18px;
--h2-font-size: 16px;
--h3-font-size: 14px;
}
</style>Nếu đã nhập mẫu từ ứng dụng Order Printer cũ, bạn có thể tăng kích cỡ phông chữ bằng cách sử dụng khối mã sau:
<style>
:root {
--legacy-font-size: 14px;
--legacy-print-font-size: 18px;
}
</style>