Tùy chỉnh mẫu Order Printer

Bạn có thể tạo và tùy chỉnh lên đến 15 mẫu đối với ứ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 bạn có thể gửi cho khách hàng
• Phiếu đóng gói - bản in chứa địa chỉ cửa hàng và địa chỉ giao hàng của khách hàng

Tăng trưởng: Hóa đơn và phiếu đóng gói chỉ là bước đầu. Thêm quảng cáo gài trong gói hàng khác cho đơn hàng, như mẫu sản phẩm và phiếu giảm giá, là cách tuyệt vời để kết nối với khách hàng.

Tạo mẫu Order Printer mới

Tạo mẫu Order Printer mới đòi hỏi bạn phải thành thạo với HTML, CSS và Liquid. Bộ phận hỗ trợ chủ đề Shopify có thể giúp thực hiện điều chỉnh nhỏ trong phạm vi Chính sách thiết kế của Shopify.

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

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 để mở ứng dụng.

3. Nhấp vào Manage templates (Quản lý mẫu).

4. Nhấp vào Add template (Thêm mẫu).

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

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

7. Khi hoàn tất, nhấp vào Save (Lưu).

Chỉnh sửa mẫu Order Printer

Việc chỉnh sửa mẫu Order Printer đòi hỏi bạn phải thành thạo HTML, CSS và Liquid. Bộ phận hỗ trợ chủ đề Shopify có thể giúp thực hiện điều chỉnh nhỏ trong phạm vi Chính sách thiết kế của Shopify.

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

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 để mở ứng dụng.

3. Nhấp vào Manage templates (Quản lý mẫu).

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

5. Thay đổ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 ví dụ về các tùy chỉnh đối với mẫu, tham khảo Ví dụ về tùy chỉnh mẫu.

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

Ví dụ về nội dung tùy chỉnh mẫu

Ví dụ sau đây cho thấy một số cách thông thường để tùy chỉnh mẫu Order Printer:

• Thêm logo vào mẫu Order Printer
• Tạo chiều rộng bảng 100%
• Hiển thị hì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

Lưu ý

Nội dung tùy chỉnh dưới đây đòi hỏi kiến thức cơ bản về HTML.

Máy tính để bàn

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 và chọn tệp hình ảnh trên máy tính của bạn.
3. Trên trang Tệp, tìm tệp đã tải lên và nhấp vào Sao chép URL.
4. Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
5. Nhấp vào Order Printer để mở ứng dụng.
6. Nhấp vào Manage templates (Quản lý mẫu).
7. Nhấp vào tên mẫu bạn muốn chỉnh sửa.
8. Nhập đoạn mã sau vào mẫu bạn muốn hiển thị logo: <img src="your-image-URL">.
9. Thay thế your-image-URL bằng URL hình ảnh bạn đã sao chép. Tùy vào vị trí bạn muốn hiển thị logo, bạn có thể sẽ phải thêm thẻ <br/> để thêm điểm ngắt dòng trước hoặc sau hình ảnh.

iPhone

1. Trong ứng dụng Shopify, chạm vào nút … rồi chạm vào Cài đặt.
2. Trong mục Cài đặt cửa hàng, chạm vào Tệp.
3. Nhấp vào Tải lên tệp và chọn tệp hình ảnh trên máy tính của bạn.
4. Trên trang Tệp, tìm tệp đã tải lên và nhấp vào Sao chép URL.
5. Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
6. Nhấp vào Order Printer để mở ứng dụng.
7. Nhấp vào Manage templates (Quản lý mẫu).
8. Nhấp vào tên mẫu bạn muốn chỉnh sửa.
9. Nhập đoạn mã sau vào mẫu bạn muốn hiển thị logo: <img src="your-image-URL">.
10. Thay thế your-image-URL bằng URL hình ảnh bạn đã sao chép. Tùy thuộc vào vị trí bạn muốn hiển thị logo, bạn có thể cần thêm thẻ <br/> để thêm ngắt dòng trước hoặc sau hình ảnh.

Android

1. Trong ứng dụng Shopify, chạm vào nút … rồi chạm vào Cài đặt.
2. Trong mục Cài đặt cửa hàng, chạm vào Tệp.
3. Nhấp vào Tải lên tệp và chọn tệp hình ảnh trên máy tính của bạn.
4. Trên trang Tệp, tìm tệp đã tải lên và nhấp vào Sao chép URL.
5. Trong trang quản trị Shopify, nhấp vào Cài đặt > Ứng dụng và kênh bán hàng.
6. Nhấp vào Order Printer để mở ứng dụng.
7. Nhấp vào Manage templates (Quản lý mẫu).
8. Nhấp vào tên mẫu bạn muốn chỉnh sửa.
9. Nhập đoạn mã sau vào mẫu bạn muốn hiển thị logo: <img src="your-image-URL">.
10. Thay thế your-image-URL bằng URL hình ảnh bạn đã sao chép. Tùy thuộc vào vị trí bạn muốn hiển thị logo, bạn có thể cần thêm thẻ <br/> để thêm ngắt dòng trước hoặc sau hình ảnh.

URL hình ảnh sẽ có dạng như thế này trong HTML:

Ví dụ: Tạo chiều rộng bảng 100%

Để bảng có đường viền và kéo dài đến 100% chiều rộng, thêm lớp table-tabular vào bảng:

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

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

Để thêm hình thu nhỏ của sản phẩm, chèn mã này vào mẫu của bạn:

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

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

Lưu ý

Nội dung tùy chỉnh dưới đây đòi hỏi kiến thức về HTML và Liquid.

Bạn có thể thêm thông tin chi tiết đơn hàng vào mẫu, ví dụ như tên, số lượng và chi phí của mặt hàng đã mua. Để thêm thông tin chi tiết đơn hàng vào mẫu:

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 để mở ứng dụng.

3. Nhấp vào Manage templates (Quản lý mẫu).

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

5. Sử dụng biến Liquid để thêm chi tiết đơn hàng và HTML để thêm định dạng. Ví dụ: {{ line_item.price | money }} in giá của mặt hàng.

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

Ví dụ: Nhung muốn chỉnh sửa mẫu phiếu đóng gói để 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 Packing slip 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>

Do đó, các phiếu giao hàng của Nhung hiện bao gồm một bảng liệt kê các mặt hàng đã mua.