Tworzenie i edytowanie szablonów za pomocą aplikacji Shopify Order Printer

Możesz tworzyć i edytować szablony za pomocą aplikacji Shopify Order Printer w panelu administracyjnym Shopify. Domyślnie aplikacja Shopify Order Printer zawiera następujące szablony:

  • Faktura: faktura, którą możesz wysłać klientowi
  • Specyfikacja towarów: wydruk z adresem Twojego sklepu i adresem wysyłki klienta.
  • Lista kompletacyjna: dokument zawierający listę pozycji do pobrania w celu realizacji zamówienia klienta.

Możesz użyć języka Liquid, aby utworzyć własne niestandardowe szablony dla innych elementów dołączanych do opakowania, takich jak kupony, etykiety lub paragony. Aplikacja Shopify Order Printer obsługuje szablony wykonane w HTML, CSS i ze zmiennymi Liquid.

Kwestie do rozważenia podczas tworzenia szablonów w aplikacji Shopify Order Printer

Przed utworzeniem szablonów w aplikacji Shopify Order Printer zapoznaj się z poniższymi kwestiami:

Tworzenie szablonu

Możesz utworzyć nowy szablon dla dokumentu zamówienia.

Aby skonfigurować szablon listy kompletacyjnej, zapoznaj się z sekcją Konfiguracja i drukowanie list kompletacyjnych za pomocą aplikacji Shopify Order Printer.

Kroki:

  1. Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij Utwórz szablon.

  4. W polu Nazwa wprowadź nazwę szablonu, np. etykieta lub kupon.

  5. W sekcji Edytuj kod dodaj kod HTML, CSS lub Liquid, aby utworzyć szablon.

  6. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  7. Kliknij Zapisz.

Edytowanie szablonu

Możesz edytować istniejący szablon. Dowiedz się więcej o dostosowywaniu szablonów aplikacji Order Printer.

Kroki:

  1. Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Order Printer.

  2. Kliknij opcję Szablony.

  3. Kliknij szablon, który chcesz edytować.

  4. W sekcji Edytuj kod dodaj lub edytuj kod HTML, CSS lub Liquid.

  5. Opcjonalnie: Aby wyświetlić podgląd szablonu, kliknij opcję Podgląd.

  6. Kliknij Zapisz.

Przywracanie szablonu domyślnego

Możesz przywrócić domyślne wartości wbudowanych szablonów specyfikacji towarów i faktur. Użyj poniższych bloków kodu, aby przywrócić domyślne ustawienia szablonów.

Domyślny szablon faktury

Wersja z 6 czerwca 2024 r.

<div>
  <div class="columns">
    <h1>Invoice</h1>
    <div>
      <p style="text-align: right; margin: 0;">
      Order {{ order.order_name }}<br />
      {% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
      {{ order.created_at | date: "%B %e, %Y" }}
    </p>
  </div>
</div>
<div class="columns" style="margin-top: 1.5em;">
  <div class="address">
    <strong>From</strong><br/>
    {{ shop.name }}<br/>
    {{ shop.address | format_address }}
    {% if shop.phone %}{{ shop.phone }}{% endif %}
  </div>
  {% if order.billing_address %}
  <div class="address">
    <strong>Bill to</strong>
    {{ order.billing_address | format_address  }}
  </div>
  {% endif %}
  {% if order.shipping_address %}
  <div class="address">
    <strong>Ship to</strong>
    {{ order.shipping_address | format_address  }}
    {% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
  </div>
  {% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
  <thead>
    <tr>
      <th scope="col">Qty</th>
      <th scope="col">Item</th>
      <th scope="col" style="text-align: right;">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in order.line_items %}
      <tr>
        <td scope="row">{{ line_item.quantity }}</td>
        <td>{{ line_item.title }}
        {% if line_item.line_level_discount_allocations.size > 0 %}
          <span class="subduedText">
            {% for discount_allocation in line_item.line_level_discount_allocations %}
            <br>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
            {% endfor %}
          </span>
        {% endif %}
        </td>
        <td style="text-align: right;">
          {% if line_item.original_price != line_item.final_price %}
            <span class="subduedText"><s>{{ line_item.original_price | money }}</s></span>
          {% endif %}
          {{ line_item.final_price | money }}
        </td>
      </tr>
    {% endfor %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;">Subtotal</td>
      <td style="text-align: right;">{{ order.line_items_subtotal_price | money }}</td>
    </tr>
    {% for discount_application in order.cart_level_discount_applications %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;">{% if discount_application.title %}<span class="subduedText">{{ discount_application.title }}</span>{% endif %}</td>
      <td style="text-align: right;">-{{ discount_application.total_allocated_amount | money }}</td>
    </tr>
    {% endfor %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;">Tax</td>
      <td style="text-align: right;">{{ order.tax_price | money }}</td>
    </tr>
    {% if order.shipping_address %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;">Shipping</td>
        <td style="text-align: right;">{{ order.shipping_price | money }}</td>
      </tr>
    {% endif %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;"><strong>Total</strong></td>
      <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
    </tr>
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;">Total Paid</td>
        <td style="text-align: right;">{{ order.net_payment | money }}</td>
      </tr>
    {% endif %}
    {% if order.total_refunded_amount > 0 %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;">Total Refunded</td>
        <td style="text-align: right;">-{{ order.total_refunded_amount | money }}</td>
      </tr>
    {% endif %}
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;"><strong>Outstanding Amount</strong></td>
        <td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
      </tr>
    {% endif %}
  </tbody>
</table>
{% if transactions.size > 1 %}
  <h2>Transaction Details</h2>
  <table class="table-tabular" style="margin: 0 0 1.5em 0;">
    <thead>
      <tr>
        <th scope="col">Type</th>
        <th scope="col">Amount</th>
        <th scope="col">Kind</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td scope="row">{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.kind }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}
{% if order.note %}
<h2>Note</h2>
<p>{{ order.note }}</p>
{% endif %}
<p style="margin-bottom: 0;">If you have any questions, please send an email to <u>{{ shop.email }}</u></p>
</div>

Domyślny szablon specyfikacji towarów

Wersja z 6 czerwca 2024 r.

<div>
<div class="columns">
  <h1>Packing Slip</h1>
  <div class="address">
    <p style="text-align: right; margin: 0;">
    Order {{ order.order_name }}<br />
    {% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
    {{ order.created_at | date: "%B %e, %Y" }}
    </p>
  </div>
</div>
<div class="columns" style="margin-top: 1.5em;">
  <div class="address">
    <strong>From</strong><br/>
    {{ shop.name }}<br/>
    {{ shop.address | format_address }}
  </div>
  {% if order.shipping_address %}
  <div class="address">
    <strong>Ship to</strong>
    {{ order.shipping_address | format_address  }}
   </div>
  {% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
  <thead>
    <tr>
      <th scope="col" style="width: 15%; text-align: left;">Qty</th>
      <th scope="col" style="width: 85%; text-align: left;">Item</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in order.line_items %}
    <tr>
      <td scope="row" style="text-align: left;">{{ line_item.quantity }}</td>
      <td style="text-align: left;">{{ line_item.title }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>