Tilpasse maler med Shopify Order Printer

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

Tips

Du kan gjenopprette en standardmal.

Se gjennom følgende eksempler for å finne ut hvordan du kan tilpasse maler for Shopify Order Printer.

Legg til logoen din i en mal

Du kan legge til en logo i malen.

Trinn:

1. Gå til Innhold > Filer fra Shopify-administrator.
2. Klikk på Last opp filer, og velg bildefilen du ønsker å laste opp.
3. Klikk på ikonet Kobling for å kopiere URL-adressen til logobildet.
4. Klikk på Innstillinger > Apper og salgskanaler.
5. Klikk på Order Printer.
6. Klikk på Maler.
7. Klikk på navnet til malen du vil redigere.
8. Lim inn følgende kodeblokk i koderedigeringsprogrammet:

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

1. Erstatt YOUR_IMAGE_URL_HERE i koden med URL-adressen til bildet.
2. Valgfritt: For å justere logoen, kan du endre verdien text-align til left, right eller center.
3. Valgfritt: For å justere logobredden, kan du endre verdien width til en større eller mindre verdi, som for eksempel 8em eller 2em.
4. Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.
5. 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:

1. Gå til Innhold > Filer fra Shopify-administrator.
2. Klikk på Last opp filer, og velg bildefilen du ønsker å laste opp.
3. Klikk på ikonet Kobling for å kopiere URL-adressen til logobildet.
4. Klikk på Innstillinger > Apper og salgskanaler.
5. Klikk på Order Printer.
6. Klikk på Maler.
7. Klikk på navnet til malen du vil redigere.
8. Lim inn kodeblokken <img src=”Image Source” /> i koderedigeringsprogrammet.
9. Erstatt Image Source i koden med URL-adressen til bildet.
10. Klikk på Lagre.

Gjør tabellbredder til 100 %

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

Trinn:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Order Printer fra siden Apper og salgskanaler.

3. Klikk Åpne app.

4. Klikk på Maler.

5. Klikk på malen du vil redigere.

6. Finn tabellen du ønsker å redigere i koderedigeringsprogrammet, og legg deretter til klassen table-tabular i tabellen.

7. Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.

8. Klikk på Lagre.

Eksempel:

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

Vis produktminiatyrbilder

Du kan legge til miniatyrbilder av produkter i bestillingsmalen. Du må sette inn en egendefinert kodeblokk i malen.

Trinn:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Order Printer fra siden Apper og salgskanaler.

3. Klikk Åpne app.

4. Klikk på Maler.

5. Klikk på malen du vil redigere.

6. Legg til kodeblokken liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} i malen.

7. Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.

8. Klikk på Lagre.

Legg til bestillingsinformasjon

Du kan legge til bestillingsdetaljer i malen, som for eksempel navn, antall og pris for de kjøpte varene.

Trinn:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Order Printer fra siden Apper og salgskanaler.

3. Klikk Åpne app.

4. Klikk på Maler.

5. Klikk på malen du vil redigere.

6. Bruk Liquid-variabler i koderedigeringsprogrammet for å legge til bestillingsdetaljer, og HTML-kode for å legge til formatering. Hvis du for eksempel bruker {{ line_item.price | money }}, vises varens pris.

7. Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.

8. Klikk på Lagre.

Eksempel:

Nyla ønsker å redigere malen for følgesedler, slik at den inneholder en liste over varene som sendes. Hun legger til følgende kode nederst i malen Følgeseddel i Shopify Order Printer-appen. Som en følge av dette inneholder Nylas følgesedler nå en tabell som viser de kjøpte varene.

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>

Legg til en strekkode i en mal

Du kan legge til en strekkode i malen

Trinn:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Order Printer fra siden Apper og salgskanaler.

3. Klikk Åpne app.

4. Klikk på Maler.

5. Klikk på malen du vil redigere.

6. Legg til kodeblokken <s-barcode value="a" /> i malen.

7. Erstatt verdien `` med tekstverdien for strekkoden.

8. Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.

9. Klikk på Lagre.

Legg til en QR-kode i en mal

Du kan legge til en QR-kode i malen.

Trinn:

1. Klikk Innstillinger > Apper og salgskanaler fra Shopify-administrator.

2. Klikk Order Printer fra siden Apper og salgskanaler.

3. Klikk Åpne app.

4. Klikk på Maler.

5. Klikk på malen du vil redigere.

6. Legg til kodeblokken <s-barcode type="qrcode" value="" /> i malen.

7. Erstatt verdien `` med tekstverdien for QR-koden.

8. Valgfritt: Klikk på Forhåndsvisning for å forhåndsvise malen.

9. 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 variabelen FontName 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 til en større eller mindre verdi:

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

For å øke skriftstørrelsen på overskrifter i malen, kan du lime inn følgende kode i malen, og deretter justere verdiene ved siden av overskriften:

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

Hvis du har importert maler 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>