Tùy chỉnh mẫu bằng 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.

Bạn có thể thêm logo của mình vào mẫu.

Bước:

  1. Trên trang quản trị Shopify, vào mục Nội dung > Tệp.
  2. 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.
  3. Để sao chép URL của hình ảnh logo, nhấp vào biểu tượng Liên kết.
  4. Nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  5. Nhấp vào Order Printer.
  6. Nhấp vào Mẫu.
  7. Nhấp vào tên mẫu bạn muốn chỉnh sửa.
  8. 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>

  1. Thay YOUR_IMAGE_URL_HERE trong mã bằng URL hình ảnh của bạn.
  2. Không bắt buộc: Để căn chỉnh logo, thay đổi giá trị text-align thành left, right hoặc center.
  3. Không bắt buộc: Để điều chỉnh chiều rộng logo, thay đổi giá trị width thành giá trị lớn hơn hoặc nhỏ hơn, ví dụ như 8em hoặc 2em.
  4. Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.
  5. 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:

Một ví dụ hiển thị khối mã về cách 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:

  1. Trên trang quản trị Shopify, vào mục Nội dung > Tệp.
  2. 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.
  3. Để sao chép URL của hình ảnh, nhấp vào biểu tượng Liên kết.
  4. Nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  5. Nhấp vào Order Printer.
  6. Nhấp vào Mẫu.
  7. Nhấp vào tên mẫu bạn muốn chỉnh sửa.
  8. Trong trình biên tập mã, dán khối mã <img src=”Image Source” />.
  9. Thay Image Source trong mã bằng URL hình ảnh của bạn.
  10. 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:

  1. Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  2. Nhấp vào Order Printer.
  3. Nhấp vào Mở ứng dụng.

  4. Nhấp vào Mẫu.

  5. Nhấp vào mẫu bạn muốn chỉnh sửa.

  6. 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-tabular vào bảng.

  7. Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.

  8. 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:

  1. Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  2. Nhấp vào Order Printer.
  3. Nhấp vào Mở ứng dụng.

  4. Nhấp vào Mẫu.

  5. Nhấp vào mẫu bạn muốn chỉnh sửa.

  6. Thêm khối mã liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} vào mẫu.

  7. Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.

  8. 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:

  1. Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  2. Nhấp vào Order Printer.
  3. Nhấp vào Mở ứng dụng.

  4. Nhấp vào Mẫu.

  5. Nhấp vào mẫu bạn muốn chỉnh sửa.

  6. 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ị.

  7. Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.

  8. 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:

  1. Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  2. Nhấp vào Order Printer.
  3. Nhấp vào Mở ứng dụng.

  4. Nhấp vào Mẫu.

  5. Nhấp vào mẫu bạn muốn chỉnh sửa.

  6. Thêm khối mã <s-barcode value="a" /> vào mẫu.

  7. Thay thế giá trị `` bằng giá trị văn bản của mã vạch.

  8. Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.

  9. 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:

  1. Trên trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
  2. Nhấp vào Order Printer.
  3. Nhấp vào Mở ứng dụng.

  4. Nhấp vào Mẫu.

  5. Nhấp vào mẫu bạn muốn chỉnh sửa.

  6. Thêm khối mã <s-barcode type="qrcode" value="" /> vào mẫu.

  7. Thay thế giá trị `` bằng giá trị văn bản của mã QR.

  8. Không bắt buộc: Để xem trước mẫu, nhấp vào Xem trước.

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

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí