Opprette og redigere maler med Shopify Order Printer

Du kan opprette og redigere maler med Shopify Order Printer-appen i Shopify-administrator. Som standard inkluderer Shopify Order Printer-appen de følgende appene:

Faktura: En faktura du kan sende til en kunde
Følgeseddel: en utskrift av butikkens adresse og kundens leveringsadresse.
Plukkliste: Et dokument med en liste over varer som må plukkes for å fullføre kundens bestilling.

Du kan bruke Liquid til å opprette egne tilpassede maler for andre emballasjeinnlegg, som for eksempel kuponger, etiketter eller kvitteringer. Shopify Order Printer-appen støtter maler som er laget med HTML, CSS og Liquid-variabler.

På denne siden

Hensyn ved oppretting av maler i Shopify Order Printer-appen

Gå gjennom følgende vurderinger før du oppretter maler i Shopify Order Printer-appen:

For å opprette eller redigere maler i Shopify Order Printer-appen, må du være kjent med HTML, CSS og Liquid. Shopifys brukerstøtte for temaer kan bistå med mindre justeringer innenfor omfanget av Shopifys designretningslinjer.
Du kan opprette opptil 15 ulike maler.
Gå gjennom Liquid-variablene og filter-referansen for Shopify Order Printer for alle støttede maltilpasninger.

Opprett en mal

Du kan opprette en ny mal for bestillingsdokumentet.

For å konfigurere en plukklistemal, se Konfigurere og skrive ut plukklister ved hjelp av Shopify Order Printer-appen.

Trinn:

Gå til Innstillinger > Apper og salgskanaler fra Shopify-administrator.
Klikk på Order Printer.
Klikk Åpne app.
Klikk på Maler.
Klikk på Opprett en mal.
I Navn-feltet angir du et navn på malen, for eksempel etikett eller kupong.
I Rediger kode-delen legger du til HTML-, CSS- eller Liquid-kode for å opprette malen.
Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.
Klikk på Lagre.

Rediger en mal

Du kan redigere en eksisterende mal. Finn ut mer om tilpasning av Order Printer-maler.

Trinn:

Gå til Innstillinger > Apper og salgskanaler fra Shopify-administrator.
Klikk på Order Printer.
Klikk Åpne app.
Klikk på Maler.
Klikk på malen du vil redigere.
I Rediger kode-delen legger du til eller redigerer HTML-, CSS- eller Liquid-kode.
Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.
Klikk på Lagre.

Gjenopprette standardmalen

Du kan gjenopprette de innebygde standardmalene for følgesedler og fakturaer til standardverdiene. Bruk følgende kodeblokker for å gjenopprette malene til standard.

Standardmal for faktura

Versjon fra 6. juni 2024.

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

Standardmal for følgeseddel

Versjon fra 6. juni 2024.

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