Hjälp
Logga in

Skapa och anpassa Shopify Order Printer-mallar

Du kan anpassa dina mallar på många sätt och skapa egna mallar. Appen Shopify Order Printer har stöd för mallar som har skapats med HTML, CSS och Liquid-variabler. Innan du anpassar dina mallar ska du bekanta dig med referensen för Liquid-variabler och filter för Shopify Order Printer för alla anpassningar av mallar som stöds.

Läs följande exempel för att lära dig hur du kan anpassa Shopify Order Printer-mallar.

På den här sidan

Du kan lägga till din logotyp i din mall.

Steg:

  1. Gå till Innehåll > Filer från din Shopify admin.

  2. Klicka på Ladda upp filer och välj sedan den bildfil du vill ladda upp.

  3. Klicka på länkikonen för att kopiera URL:en till din logotyp.

  4. Klicka på Inställningar > Appar.

  5. Klicka på Order Printer.

  6. Klicka på Mallar.

  7. Klicka på namnet på den mall som du vill redigera.

  8. Klistra in följande kodblock i kodredigeraren:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Ersätt YOUR_IMAGE_URL_HERE i koden med din bild-URL.
  2. Valfritt: Om du vill justera din logotyp ändrar du värdet för text-align till left, right eller center.
  3. Valfritt: Om du vill justera logotypens bredd ändrar du width-värdet till ett större eller mindre värde, till exempel 8em eller 2em.
  4. Valfritt: Klicka på Förhandsgranska för att förhandsgranska din mall.
  5. Klicka på Spara.

Exempel:

Granska följande exempel på hur din HTML ska visas efter att du har lagt till din logotyp i din mall:

Ett exempel som visar ett kodblock för hur man lägger till en logotyp i en mall

Lägg till bilder i en mall

Du kan lägga till bilder i din mall.

Steg:

  1. Gå till Innehåll > Filer från din Shopify admin.

  2. Klicka på Ladda upp filer och välj sedan den bildfil du vill ladda upp.

  3. Klicka på länkikonen för att kopiera bildens URL.

  4. Klicka på Inställningar > Appar.

  5. Klicka på Order Printer.

  6. Klicka på Mallar.

  7. Klicka på namnet på den mall som du vill redigera.

  8. I kodredigeraren, klistra in kodblocket <img src=”Image Source” />.

  9. Ersätt Image Source i koden med din bild-URL.

  10. Klicka på Spara.

Gör tabellbredder 100 %

Du kan lägga till kantlinjer i din tabell och sträcka ut den till 100 % bredd. Du måste lägga till klassen table-tabular i din tabell.

Steg:

  1. Gå till Appar > Order Printer från din Shopify admin.

  2. Klicka på Mallar.

  3. Klicka på den mall som du vill redigera.

  4. I kodredigeraren letar du upp den tabell du vill redigera och lägger sedan till klassen table-tabular i din tabell.

  5. Valfritt: Klicka på Förhandsgranska för att förhandsgranska din mall.

  6. Klicka på Spara.

Exempel:

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

Visa produktminiatyrer

Du kan lägga till produktminiatyrer i din ordermall. Du måste infoga ett anpassat kodblock i din mall.

Steg:

  1. Gå till Appar > Order Printer från din Shopify admin.

  2. Klicka på Mallar.

  3. Klicka på den mall som du vill redigera.

  4. Lägg till kodblocket {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} i din mall.

  5. Valfritt: Klicka på Förhandsgranska för att förhandsgranska din mall.

  6. Klicka på Spara.

Lägg till orderuppgifter

Du kan lägga till orderuppgifter i din mall, till exempel namn, kvantitet och pris för de köpta artiklarna.

Steg:

  1. Gå till Appar > Order Printer från din Shopify admin.

  2. Klicka på Mallar.

  3. Klicka på den mall som du vill redigera.

  4. I kodredigeraren använder du Liquid-variabler för att lägga till orderuppgifter och HTML för att lägga till formatering. Om du till exempel använder {{ line_item.price | money }} visas priset för artikeln.

  5. Valfritt: Klicka på Förhandsgranska för att förhandsgranska din mall.

  6. Klicka på Spara.

Exempel:

Nyla vill redigera sin följesedelsmall så att den inkluderar en lista över de artiklar som skickas. Hon lägger till följande kod längst ner i sin följesedelsmall i Shopify Order Printer-appen. Resultatet blir att Nylas följesedlar nu innehåller en tabell med en lista över de köpta artiklarna.

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

Lägg till en streckkod i en mall

Du kan lägga till en streckkod i din mall

Steg:

  1. Gå till Appar > Order Printer från din Shopify admin.

  2. Klicka på Mallar.

  3. Klicka på den mall som du vill redigera.

  4. Lägg till kodblocket <s-barcode value="a" /> i din mall.

  5. Ersätt värdet med textvärdet för din streckkod.

  6. Valfritt: Klicka på Förhandsgranska för att förhandsgranska din mall.

  7. Klicka på Spara.

Lägg till en QR-kod i en mall

Du kan lägga till en QR-kod i din mall.

Steg:

  1. Gå till Appar > Order Printer från din Shopify admin.

  2. Klicka på Mallar.

  3. Klicka på den mall som du vill redigera.

  4. Lägg till kodblocket <s-barcode type="qrcode" value="" /> i din mall.

  5. Ersätt värdet med textvärdet för din QR-kod.

  6. Valfritt: Klicka på Förhandsgranska för att förhandsgranska din mall.

  7. Klicka på Spara.

Använda ett Google-teckensnitt i en mall

Om du vill använda ett Google-teckensnitt i din mall klistrar du in följande kod i din mall och ersätter sedan variabeln FontName med namnet på ditt Google-teckensnitt:

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

Öka teckenstorleken

För att öka teckenstorleken i din mall, klistra in följande kod i din mall och justera sedan siffran 14 med ett större eller mindre värde:

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

För att öka teckenstorleken på dina rubriker i din mall, klistra in följande kod i din mall och justera sedan värdena bredvid rubriken:

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

Om du har importerat dina mallar från den äldre Order Printer-appen kan du öka teckenstorleken med hjälp av följande kodblock:

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