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 riêng của mình. Ứng dụng Shopify Order Printer hỗ trợ mẫu được tạo bằng HTML, CSS và các biến Liquid. Trước khi tùy chỉnh mẫu, hãy nhớ 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ả tùy chỉnh mẫu được hỗ trợ.

Xem xét 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 vào mẫu.

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Nội dung > Tệp.
Nhấp vào Tải tệp lên, 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.
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:

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

Thay thế YOUR_IMAGE_URL_HERE trong mã bằng URL hình ảnh của bạn.
Tùy chọn: Để căn chỉnh logo, thay đổi giá trị text-align thành left, right, hoặc center.
Tùy chọn: Để điều chỉnh chiều rộng logo, thay đổi giá trị width thành một giá trị lớn hơn hoặc nhỏ hơn, ví dụ như 8em hoặc 2em.
Tùy chọn: Để xem trước mẫu, nhấp vào Xem trước.
Nhấp vào Lưu.

Ví dụ:

Xem xét ví dụ sau để biết cách hiển thị HTML sau khi 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.

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Nội dung > Tệp.
Nhấp vào Tải tệp lên, 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.
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 thế Image Source trong mã bằng URL hình ảnh của bạn.
Nhấp vào Lưu.

Thiết lập chiều rộng bảng thành 100%

Bạn có thể thêm đường viền cho bảng và kéo dãn bảng thành 100% chiều rộng. Bạn cần thêm lớp table-tabular vào bảng.

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Ứng dụng > Order Printer.
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, sau đó thêm lớp table-tabular vào bảng.
Tùy chọn: Để 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.

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Ứng dụng > Order Printer.
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ã {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} vào mẫu.
Tùy chọn: Để 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 chi tiết đơn hàng vào mẫu, chẳng hạn như tên, số lượng và giá của mặt hàng đã mua.

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Ứng dụng > Order Printer.
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 các biến Liquid để thêm chi tiết đơn hàng và HTML để thêm định dạng. Ví dụ: sử dụng {{ line_item.price | money }} để hiển thị giá của mặt hàng.
Tùy chọn: Để 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 đóng gói để đưa vào danh sách các mặt hàng được giao. Cô thêm mã sau vào cuối mẫu Phiếu đóng gói trong ứng dụng Shopify Order Printer. Kết quả là, các phiếu đóng gói của Nyla hiện có chứa bảng liệt kê các mặt hàng đã mua.

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

Thêm mã vạch vào mẫu

Bạn có thể thêm mã vạch vào mẫu

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Ứng dụng > Order Printer.
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.
Tùy chọn: Để 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.

Các bước:

Trong bảng điều khiển quản trị Shopify, vào phần Ứng dụng > Order Printer.
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.
Tùy chọn: Để 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 của bạn:

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

Tăng kích thước phông chữ

Để tăng kích thướ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 bằng giá trị lớn hơn hoặc nhỏ hơn:

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

Để tăng kích thước phông chữ cho 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 thước phông chữ bằng khối mã sau:

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