Opret og tilpas skabeloner til Shopify Order Printer

Du kan tilpasse dine skabeloner på mange måder og oprette dine egne. Appen Shopify Order Printer understøtter skabeloner, der er lavet med HTML, CSS og Liquid-variabler. Før du tilpasser dine skabeloner, skal du sætte dig ind i referencen til Liquid-variabler og -filtre for Shopify Order Printer for at se alle understøttede tilpasninger af skabeloner.

Gennemgå følgende eksempler for at få at vide, hvordan du kan tilpasse skabeloner til Shopify Order Printer.

På denne side

Føj dit logo til en skabelon

Du kan føje dit logo til din skabelon.

Trin:

Gå til Indhold > Filer i din Shopify-administrator.
Klik på Upload filer, og vælg derefter den billedfil, du vil uploade.
Klik på ikonet Link for at kopiere webadressen til dit logobillede.
Klik på Indstillinger > Apps.
Klik på Order Printer.
Klik på Skabeloner.
Klik på navnet på den skabelon, du vil redigere.
Indsæt følgende kodeblok i kodeeditoren:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>

Erstat YOUR_IMAGE_URL_HERE i koden med webadressen til dit billede.
Valgfrit: Du kan justere dit logo ved at ændre værdien for text-align til left, right eller center.
Valgfrit: Du kan justere bredden på dit logo ved at ændre værdien for width til en større eller mindre værdi, f.eks. 8em eller 2em.
Valgfrit: Klik på Forhåndsvisning for at få en forhåndsvisning af din skabelon.
Klik på Gem.

Eksempel:

Se følgende eksempel på, hvordan din HTML skal se ud, efter du har føjet dit logo til din skabelon:

Føj billeder til en skabelon

Du kan føje billeder til din skabelon.

Trin:

Gå til Indhold > Filer i din Shopify-administrator.
Klik på Upload filer, og vælg derefter den billedfil, du vil uploade.
Klik på ikonet Link for at kopiere webadressen til dit billede.
Klik på Indstillinger > Apps.
Klik på Order Printer.
Klik på Skabeloner.
Klik på navnet på den skabelon, du vil redigere.
Indsæt kodeblokken <img src=”Image Source” /> i kodeeditoren.
Erstat Image Source i koden med webadressen til dit billede.
Klik på Gem.

Gør tabelbredder 100 %

Du kan føje kanter til din tabel og strække den til 100 % bredde. Du skal føje klassen table-tabular til din tabel.

Trin:

Gå til Apps > Order Printer i din Shopify-administrator.
Klik på Skabeloner.
Klik på den skabelon, du vil redigere.
I kodeeditoren finder du den tabel, du vil redigere, og tilføjer klassen table-tabular til din tabel.
Valgfrit: Klik på Forhåndsvisning for at få en forhåndsvisning af din skabelon.
Klik på Gem.

Eksempel:

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

Vis produktminiaturebilleder

Du kan føje produktminiaturebilleder til din ordreskabelon. Du skal indsætte en tilpasset kodeblok i din skabelon.

Trin:

Gå til Apps > Order Printer i din Shopify-administrator.
Klik på Skabeloner.
Klik på den skabelon, du vil redigere.
Føj kodeblokken {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} til din skabelon.
Valgfrit: Klik på Forhåndsvisning for at få en forhåndsvisning af din skabelon.
Klik på Gem.

Tilføj ordreoplysninger

Du kan føje ordreoplysninger til din skabelon, f.eks. navn, antal og pris på købte varer.

Trin:

Gå til Apps > Order Printer i din Shopify-administrator.
Klik på Skabeloner.
Klik på den skabelon, du vil redigere.
Brug Liquid-variabler i kodeeditoren til at tilføje ordreoplysninger og HTML til at tilføje formatering. Hvis du f.eks. bruger {{ line_item.price | money }}, vises prisen på varen.
Valgfrit: Klik på Forhåndsvisning for at få en forhåndsvisning af din skabelon.
Klik på Gem.

Eksempel:

Nyla vil redigere sin skabelon til pakkesedler, så den indeholder en liste over de afsendte varer. Hun tilføjer følgende kode nederst i skabelonen Pakkeseddel i Shopify-appen Order Printer. Nylas pakkesedler indeholder nu en tabel, der viser de købte varer.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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>

Føj en stregkode til en skabelon

Du kan føje en stregkode til din skabelon.

Trin:

Gå til Apps > Order Printer i din Shopify-administrator.
Klik på Skabeloner.
Klik på den skabelon, du vil redigere.
Føj kodeblokken <s-barcode value="a" /> til din skabelon.
Erstat ``-værdien med tekstværdien for din stregkode.
Valgfrit: Klik på Forhåndsvisning for at få en forhåndsvisning af din skabelon.
Klik på Gem.

Føj en QR-kode til en skabelon

Du kan føje en QR-kode til din skabelon.

Trin:

Gå til Apps > Order Printer i din Shopify-administrator.
Klik på Skabeloner.
Klik på den skabelon, du vil redigere.
Føj kodeblokken <s-barcode type="qrcode" value="" /> til din skabelon.
Erstat ``-værdien med tekstværdien for din QR-kode.
Valgfrit: Klik på Forhåndsvisning for at få en forhåndsvisning af din skabelon.
Klik på Gem.

Brug af en Google-skrifttype i en skabelon

Hvis du vil bruge en Google-skrifttype i din skabelon, skal du indsætte følgende kode i din skabelon og derefter erstatte variablen FontName med navnet på din Google-skrifttype:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Forøgelse af skriftstørrelsen

Hvis du vil forøge skriftstørrelsen i din skabelon, skal du indsætte følgende kode i din skabelon og derefter justere tallet 14 til en større eller mindre værdi:

<style>
  :root {
    --font-size: 14px;
  }
</style>

Hvis du vil forøge skriftstørrelsen på dine overskrifter i din skabelon, skal du indsætte følgende kode i din skabelon og derefter justere værdierne ud for overskriften:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Hvis du har importeret dine skabeloner fra den ældre Order Printer-app, kan du forøge din skriftstørrelse ved hjælp af følgende kodeblok:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>