Opprette og tilpasse Shopify Order Printer-maler

Du kan tilpasse malene på mange måter og opprette dine egne maler. Shopify Order Printer-appen støtter maler laget med HTML, CSS og Liquid-variabler. Før du tilpasser malene, må du gjøre deg kjent med referansen for Liquid-variabler og -filtre for Shopify Order Printer for alle støttede maljusteringer.

Gå gjennom følgende eksempler for å lære hvordan du kan tilpasse Shopify Order Printer-maler.

På denne siden

Legge til logoen din i en mal

Du kan legge til logoen din i malen.

Trinn:

Gå til Innhold > Filer fra Shopify-administratorpanelet.
Klikk på Last opp filer, og velg deretter bildefilen du vil laste opp.
Klikk på lenke-ikonet for å kopiere URL-adressen til logobildet.
Klikk på Innstillinger > Apper.
Klikk på Order Printer.
Klikk på Maler.
Klikk på navnet på malen du vil redigere.
Lim inn følgende kodeblokk i kodeditor:

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

Erstatt YOUR_IMAGE_URL_HERE i koden med URL-adressen til bildet.
Valgfritt: For å justere logoen endrer du text-align-verdien til left, right eller center.
Valgfritt: For å justere logobredden endrer du width-verdien til en større eller mindre verdi, for eksempel 8em eller 2em.
Valgfritt: Klikk på Forhåndsvis for å forhåndsvise malen.
Klikk på Lagre.

Eksempel:

Se gjennom følgende eksempel på hvordan HTML-koden skal se ut etter at du har lagt til logoen i malen:

Legg til bilder i en mal

Du kan legge til bilder i malen.

Trinn:

Gå til Innhold > Filer fra Shopify-administratorpanelet.
Klikk på Last opp filer, og velg deretter bildefilen du vil laste opp.
Klikk på lenke-ikonet for å kopiere URL-adressen til bildet.
Klikk på Innstillinger > Apper.
Klikk på Order Printer.
Klikk på Maler.
Klikk på navnet på malen du vil redigere.
Lim inn kodeblokken <img src=”Image Source” /> i kodeditor.
Erstatt Image Source i koden med URL-adressen til bildet.
Klikk på Lagre.

Gjør tabellbredder 100 %

Du kan legge til kanter i tabellen og strekke den til 100 % bredde. Du må legge til table-tabular-klassen i tabellen.

Trinn:

Gå til Apper > Order Printer fra Shopify-administrator.
Klikk på Maler.
Klikk på malen du vil redigere.
Finn tabellen du vil redigere i kodeditor, og legg deretter til table-tabular-klassen i tabellen.
Valgfritt: Klikk på Forhåndsvis for å forhåndsvise malen.
Klikk på Lagre.

Eksempel:

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

Vis produktminiatyrbilder

Du kan legge til produktminiatyrbilder i bestillingsmalen. Du må sette inn en egendefinert kodeblokk i malen.

Trinn:

Gå til Apper > Order Printer fra Shopify-administrator.
Klikk på Maler.
Klikk på malen du vil redigere.
Legg til kodeblokken {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} i malen.
Valgfritt: Klikk på Forhåndsvis for å forhåndsvise malen.
Klikk på Lagre.

Legg til bestillingsinformasjon

Du kan legge til bestillingsinformasjon i malen, for eksempel navnet på, antallet av og prisen på kjøpte varer.

Trinn:

Gå til Apper > Order Printer fra Shopify-administrator.
Klikk på Maler.
Klikk på malen du vil redigere.
Bruk Liquid-variabler i kodeditor for å legge til bestillingsinformasjon, og HTML for å legge til formatering. Bruk av {{ line_item.price | money }} viser for eksempel prisen på varen.
Valgfritt: Klikk på Forhåndsvis for å forhåndsvise malen.
Klikk på Lagre.

Eksempel:

Nyla vil redigere følgeseddelmalen sin slik at den inkluderer en liste over varene som sendes. Hun legger til følgende kode nederst i malen Følgeseddel i Shopify Order Printer-appen. Som et resultat av dette inneholder Nylas følgesedler nå en tabell som lister opp de kjøpte varene.

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

Legg til en strekkode i en mal

Du kan legge til en strekkode i malen.

Trinn:

Gå til Apper > Order Printer fra Shopify-administrator.
Klikk på Maler.
Klikk på malen du vil redigere.
Legg til kodeblokken <s-barcode value="a" /> i malen.
Erstatt ``-verdien med tekstverdien for strekkoden.
Valgfritt: Klikk på Forhåndsvis for å forhåndsvise malen.
Klikk på Lagre.

Legg til en QR-kode i en mal

Du kan legge til en QR-kode i malen.

Trinn:

Gå til Apper > Order Printer fra Shopify-administrator.
Klikk på Maler.
Klikk på malen du vil redigere.
Legg til kodeblokken <s-barcode type="qrcode" value="" /> i malen.
Erstatt ``-verdien med tekstverdien for QR-koden.
Valgfritt: Klikk på Forhåndsvis for å forhåndsvise malen.
Klikk på Lagre.

Bruke en Google-skrifttype i en mal

For å bruke en Google-skrifttype i malen limer du inn følgende kode i malen, og erstatter deretter FontName-variabelen med navnet på Google-skrifttypen:

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

Øke skriftstørrelsen

For å øke skriftstørrelsen i malen limer du inn følgende kode i malen, og justerer deretter tallet 14 med en større eller mindre verdi:

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

For å øke skriftstørrelsen på overskriftene i malen limer du inn følgende kode i malen, og justerer deretter verdiene ved siden av overskriften:

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

Hvis du har importert malene fra den eldre Order Printer-appen, kan du øke skriftstørrelsen ved hjelp av følgende kodeblokk:

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