Tùy chỉnh mẫu Order Printer

Có thể tạo và tùy chỉnh tối đa 15 mẫu cho ứng dụng Order Printer trong trang quản trị Shopify. Theo mặc định, ứng dụng Order Printer bao gồm hai mẫu:

• Hóa đơn - hóa đơn cơ bản để gửi cho khách hàng
• Phiếu đóng gói - bản in địa chỉ cửa hàng và địa chỉ giao hàng của khách hàng

Tạo mẫu Order Printer mới

Để tạo mẫu Order Printer mới, bạn cần am hiểu HTML, CSS và Liquid. Bộ phận Hỗ trợ chủ đề Shopify có thể giúp thực hiện các điều chỉnh nhỏ đối với chủ đề miễn phí của Shopify trong phạm vi Chính sách thiết kế của Shopify. Nếu cần thực hiện các thay đổi phức tạp hơn hoặc sử dụng chủ đề không do Shopify tạo ra, hãy cân nhắc thuê Đối tác Shopify.

Các bước thực hiện:

1. Từ trang quản trị Shopify, đi tới Ứng dụng > Order Printer (cũ).

2. Nhấp vào Quản lý mẫu.

3. Nhấp vào Thêm mẫu.

4. Nhập tên cho mẫu mới vào trường Tên.

5. Thêm mã HTML, CSS hoặc Liquid vào trường Mã để tạo mẫu.

6. Khi hoàn tất, nhấp vào Lưu.

Chỉnh sửa mẫu Order Printer

Để chỉnh sửa các mẫu Order Printer, bạn cần am hiểu HTML, CSS và Liquid. Bộ phận Hỗ trợ chủ đề Shopify không thể chỉnh sửa chuyên sâu các mẫu cho bạn nhưng có thể giúp thực hiện các điều chỉnh nhỏ đối với chủ đề miễn phí của Shopify trong phạm vi Chính sách thiết kế của Shopify. Đối với những thay đổi phức tạp hơn, hãy cân nhắc thuê Đối tác Shopify.

Các bước thực hiện:

1. Từ trang quản trị Shopify, đi tới Ứng dụng > Order Printer (cũ).

2. Nhấp vào Quản lý mẫu.

3. Nhấp vào tên mẫu muốn chỉnh sửa.

4. Thực hiện thay đổi đối với mẫu bằng cách thêm hoặc chỉnh sửa mã HTML, CSS hoặc Liquid trong trường Mã. Để xem trước các ví dụ về tùy chỉnh mẫu, tham khảo Ví dụ về tùy chỉnh mẫu.

5. Khi hoàn tất, nhấp vào Lưu.

Ví dụ về tùy chỉnh mẫu

Các ví dụ sau giải thích một số cách phổ biến để tùy chỉnh mẫu Order Printer:

• Thêm logo vào mẫu Order Printer
• Chỉnh chiều rộng bảng thành 100%
• Hiển thị ảnh thu nhỏ của sản phẩm
• Thêm chi tiết đơn hàng

Ví dụ: Thêm logo vào mẫu Order Printer

Mã HTML sẽ có dạng như sau:

Ví dụ: Chỉnh chiều rộng bảng thành 100%

Để thêm viền cho bảng và kéo giãn chiều rộng thành 100%, hãy thêm lớp table-tabular vào bảng:

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

Ví dụ: Hiển thị ảnh thu nhỏ của sản phẩm

Để đưa ảnh thu nhỏ của sản phẩm vào, hãy chèn mã này vào mẫu:

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

Thêm chi tiết đơn hàng

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á thành của mặt hàng đã mua. Để thêm chi tiết đơn hàng vào mẫu:

1. Từ trang quản trị Shopify, đi tới Ứng dụng > Order Printer (cũ).

2. Nhấp vào Quản lý mẫu.

3. Nhấp vào tên mẫu muốn chỉnh sửa.

4. 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ụ: {{ line_item.price | money }} sẽ in ra giá của mặt hàng.

5. Khi hoàn tất, 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 đang được vận chuyển. Cô ấy thêm đoạn mã sau vào cuối mẫu Phiếu đóng gói trong ứng dụng 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>

Kết quả là, phiếu đóng gói của Nyla giờ đây có thêm một bảng liệt kê các mặt hàng đã mua.