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ạ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 của Chính sách thiết kế của Shopify.

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

  1. Trong trang quản trị Shopify, vào mục Ứng dụng.

  2. Nhấp vào Order Printer để mở ứng dụng.

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

    Nút Quản lý mẫu

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

    Nhấp vào

  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. Trong trang quản trị Shopify, vào mục Ứng dụng.

  2. Nhấp vào Order Printer để mở ứng dụng.

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

    Nút Quản lý mẫu

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

    Chọn mẫu để 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 vào trường Code (Mã). Để xem ví dụ về nội dung tùy chỉnh mẫu, xem Ví dụ về nội dung 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 thông tin 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.

Bạn có thể thêm logo vào hóa đơn, phiếu đóng gói và các mẫu tùy chỉnh của đơn hàng:

  1. Nhấp vào Upload Files (Tải lên tệp) và chọn tệp hình ảnh trên máy tính của bạn.

  2. Trên trang Tệp, nhấp vào URL hình ảnh để tô sáng, sau đó, sao chép văn bản:

    Sao chép URL hình ảnh

  3. Trong trang quản trị Shopify, vào mục Ứng dụng.

  4. Nhấp vào Order Printer để mở ứng dụng.

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

    Nút Quản lý mẫu

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

    Chọn mẫu để chỉnh sửa

  7. Nhập đoạn mã sau vào mẫu bạn muốn hiển thị logo: <img src="your-image-URL">.

  8. 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ụ mã HTML

Và như thế này trong hóa đơn:

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

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 thông tin 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. Trong trang quản trị Shopify, vào mục Ứng dụng.

  2. Nhấp vào Order Printer để mở ứng dụng.

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

    Nút Quản lý mẫu

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

    Chọn mẫu để chỉnh sửa

  5. Sử dụng biến Liquid để thêm thông tin chi tiết đơn hàng và HTML để thêm định dạng. Ví dụ: `` 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 show_line_item_taxes %}
      <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 đóng gói của Nhung hiện bao gồm một bảng liệt kê các mặt hàng đã mua:

Ví dụ phiếu đóng gói

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

Dùng thử miễn phí