Skapa och anpassa mallar för Shopify Order Printer

Du kan anpassa dina mallar på många sätt och skapa dina egna mallar. Appen Shopify Order Printer stöder mallar med HTML-, CSS- och Liquid-variabler. Bekanta dig med Referensen för Liquid-variabler och filter för Shopify Order Printer för alla mallanpassningar som stöds innan du anpassar dina mallar.

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

På den här sidan

Lägga till din logotyp i en mall

Du kan lägga till din logotyp i mallen.

Steg:

Gå till Innehåll > Filer från Shopify-admin.
Klicka på Ladda upp filer och välj sedan den bildfil du vill ladda upp.
Klicka på länkikonen om du vill kopiera URL:en för logotypbilden.
Klicka på Inställningar > Appar och försäljningskanaler.
Klicka på Order Printer.
Klicka på Mallar.
Klicka på namnet på den mall du vill redigera.
I kodredigeraren klistrar du in följande kodblock:

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

Byt ut YOUR_IMAGE_URL_HERE i koden mot din bild-URL.
Valfritt: Justera logotypen genom att ändra värdet text-align till left, right eller center.
Valfritt: Om du vill justera din logotypbredd så ändrar du värdet width till ett större eller ett mindre värde, som till exempel 8em eller 2em.
Valfritt: Klicka på Förhandsgranska för att förhandsgranska mallen.
Klicka på Spara.

Exempel:

Granska följande exempel på hur din HTML bör visas efter att du har lagt till en logotyp i mallen:

Lägg till bilder i en mall

Du kan lägga till bilder i din mall.

Steg:

Gå till Innehåll > Filer från Shopify-admin.
Klicka på Ladda upp filer och välj sedan den bildfil du vill ladda upp.
Klicka på länkikonen om du vill kopiera URL:en för bilden.
Klicka på Inställningar > Appar och försäljningskanaler.
Klicka på Order Printer.
Klicka på Mallar.
Klicka på namnet på den mall du vill redigera.
I kodredigeraren klistrar du in kodblocket <img src=”Image Source” />.
Byt ut Image Source i koden mot din bild-URL.
Klicka på Spara.

Gör tabellbredder 100 %

Du kan lägga till kantlinjer till tabellen och utvidga den till 100 % bredd. Du måste lägga till klassen table-tabular i tabellen.

Steg:

Gå till Inställningar > Appar och försäljningskanaler från Shopify-admin.
Klicka på Order Printer.
Klicka på Öppna app.
Klicka på Mallar.
Klicka på den mall som du vill redigera.
Leta reda på den tabell som du vill redigera i kodredigeraren och lägg sedan till klassentable-tabular i tabellen.
Valfritt: Klicka på Förhandsgranska för att förhandsgranska mallen.
Klicka på Spara.

Exempel:

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

Visa produktminiatyrer

Du kan lägga till produktminiatyrer i ordermallen. Du måste infoga ett anpassat kodblock i mallen.

Steg:

Gå till Inställningar > Appar och försäljningskanaler från Shopify-admin.
Klicka på Order Printer.
Klicka på Öppna app.
Klicka på Mallar.
Klicka på den mall som du vill redigera.
Lägg till kodblocket liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} i mallen.
Valfritt: Klicka på Förhandsgranska för att förhandsgranska mallen.
Klicka på Spara.

Lägg till orderinformation

Du kan lägga till orderinformation i din mall, till exempel namn, kvantitet och kostnad för köpta artiklar.

Steg:

Gå till Inställningar > Appar och försäljningskanaler från Shopify-admin.
Klicka på Order Printer.
Klicka på Öppna app.
Klicka på Mallar.
Klicka på den mall som du vill redigera.
I kodredigeraren använder du Liquid-variabler för att lägga till orderinformation och HTML för att lägga till formatering. Om du till exempel använder {{ line_item.price | money }} så visas priset för artikeln.
Valfritt: Klicka på Förhandsgranska för att förhandsgranska mallen.
Klicka på Spara.

Exempel:

Anna vill redigera sin följesedelsmall för att inkludera en lista över de varor som levereras. Hon lägger till följande kod längst ner i Följesedel-mallen i appen Shopify Order Printer. Detta gör att Annas följesedlar nu kommer inkludera en tabell som listar köpta artiklar.

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

Gå till Inställningar > Appar och försäljningskanaler från Shopify-admin.
Klicka på Order Printer.
Klicka på Öppna app.
Klicka på Mallar.
Klicka på den mall som du vill redigera.
Lägg till kodblocket <s-barcode value="a" /> till din mall.
Ersätt värdet `` med streckkodens textvärde.
Valfritt: Klicka på Förhandsgranska för att förhandsgranska mallen.
Klicka på Spara.

Lägg till en QR-kod till en mall

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

Steg:

Gå till Inställningar > Appar och försäljningskanaler från Shopify-admin.
Klicka på Order Printer.
Klicka på Öppna app.
Klicka på Mallar.
Klicka på den mall som du vill redigera.
Lägg till kodblocket <s-barcode type="qrcode" value="" /> till din mall.
Ersätt värdet `` med QR-kodens textvärde.
Valfritt: Klicka på Förhandsgranska för att förhandsgranska mallen.
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 teckensnittsstorleken

För att öka teckensnittsstorleken i din mall klistrar du in följande kod i din mall och justerar sedan 14-numret med ett större eller mindre värde:

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

För att öka teckensnittsstorleken på rubrikerna i din mall klistrar du in följande kod i mallen och justerar sedan värdena intill rubriken:

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

Om du har importerat mallar från den föråldrade Order Printer-appen så kan du öka typsnittsstorleken med hjälp av följande kodblock:

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