Creazione e personalizzazione dei modelli di Shopify Order Printer

Puoi personalizzare i modelli in molti modi e crearne di tuoi. L'app Shopify Order Printer supporta i modelli realizzati con HTML, CSS e variabili Liquid. Prima di personalizzare i modelli, assicurati di acquisire familiarità con il riferimento a variabili e filtri Liquid per Shopify Order Printer per tutte le personalizzazioni di modelli supportate.

Esamina i seguenti esempi per scoprire come personalizzare i modelli di Shopify Order Printer.

In questa pagina

Aggiungi il logo a un modello

Puoi aggiungere il logo al modello.

Passaggi:

Dal pannello di controllo Shopify, vai a Contenuti > File.
Clicca su Carica file, quindi seleziona il file immagine che desideri caricare.
Per copiare l'URL dell'immagine del logo, clicca sull'icona Link.
Clicca su Impostazioni > App.
Clicca su Order Printer.
Clicca su Modelli.
Clicca sul nome del modello che desideri modificare.
Nell'editor di codice, incolla il seguente blocco di codice:

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

Sostituisci YOUR_IMAGE_URL_HERE nel codice con l'URL della tua immagine.
Facoltativo: per allineare il logo, modifica il valore text-align in left, right o center.
Facoltativo: per regolare la larghezza del logo, modifica il valore width impostandolo su un valore maggiore o minore, ad esempio 8em o 2em.
Facoltativo: per visualizzare in anteprima il modello, clicca su Anteprima.
Clicca su Salva.

Esempio:

Controlla il seguente esempio di come dovrebbe essere visualizzato il tuo codice HTML dopo aver aggiunto il logo al modello:

Aggiungere immagini a un modello

Puoi aggiungere immagini al tuo modello.

Passaggi:

Dal pannello di controllo Shopify, vai a Contenuti > File.
Clicca su Carica file, quindi seleziona il file immagine che desideri caricare.
Per copiare l'URL della tua immagine, clicca sull'icona Link.
Clicca su Impostazioni > App.
Clicca su Order Printer.
Clicca su Modelli.
Clicca sul nome del modello che desideri modificare.
Nell'editor di codice, incolla il blocco di codice <img src=”Image Source” />.
Sostituisci Image Source nel codice con l'URL della tua immagine.
Clicca su Salva.

Impostare la larghezza della tabella sul 100%

Puoi aggiungere bordi alla tabella ed estenderla al 100% della larghezza. Dovrai aggiungere la classe table-tabular alla tabella.

Passaggi:

Dal pannello di controllo Shopify, vai su App > Order Printer.
Clicca su Modelli.
Clicca sul modello che desideri modificare.
Nell'editor di codice, trova la tabella che desideri modificare, quindi aggiungi la classe table-tabular alla tabella.
Facoltativo: per visualizzare in anteprima il modello, clicca su Anteprima.
Clicca su Salva.

Esempio:

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

Visualizzare le anteprime dei prodotti

Puoi aggiungere anteprime dei prodotti al modello dell'ordine. Devi inserire un blocco di codice personalizzato nel modello.

Passaggi:

Dal pannello di controllo Shopify, vai su App > Order Printer.
Clicca su Modelli.
Clicca sul modello che desideri modificare.
Aggiungi il blocco di codice {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} al tuo modello.
Facoltativo: per visualizzare in anteprima il modello, clicca su Anteprima.
Clicca su Salva.

Aggiungere i dettagli dell'ordine

Puoi aggiungere i dettagli dell'ordine al modello, come nome, quantità e prezzo degli articoli acquistati.

Passaggi:

Dal pannello di controllo Shopify, vai su App > Order Printer.
Clicca su Modelli.
Clicca sul modello che desideri modificare.
Nell'editor di codice, usa le variabili Liquid per aggiungere i dettagli dell'ordine e il codice HTML per la formattazione. Ad esempio, utilizzando {{ line_item.price | money }} viene visualizzato il prezzo dell'articolo.
Facoltativo: per visualizzare in anteprima il modello, clicca su Anteprima.
Clicca su Salva.

Esempio:

Nyla desidera modificare il suo modello di documento di trasporto per includere un elenco degli articoli in spedizione. Aggiunge il seguente codice in fondo al suo modello Documento di trasporto nell'app Order Printer di Shopify. Di conseguenza, i documenti di trasporto di Nyla ora includono una tabella con l'elenco degli articoli acquistati.

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

Aggiungere un codice a barre a un modello

Puoi aggiungere un codice a barre al tuo modello

Passaggi:

Dal pannello di controllo Shopify, vai su App > Order Printer.
Clicca su Modelli.
Clicca sul modello che desideri modificare.
Aggiungi il blocco di codice <s-barcode value="a" /> al tuo modello.
Sostituisci il valore `` con il valore di testo del codice a barre.
Facoltativo: per visualizzare in anteprima il modello, clicca su Anteprima.
Clicca su Salva.

Aggiungere un codice QR a un modello

Puoi aggiungere un codice QR al tuo modello.

Passaggi:

Dal pannello di controllo Shopify, vai su App > Order Printer.
Clicca su Modelli.
Clicca sul modello che desideri modificare.
Aggiungi il blocco di codice <s-barcode type="qrcode" value="" /> al tuo modello.
Sostituisci il valore `` con il valore di testo del codice QR.
Facoltativo: per visualizzare in anteprima il modello, clicca su Anteprima.
Clicca su Salva.

Utilizzare un font di Google in un modello

Per utilizzare un font di Google nel modello, incolla il seguente codice, quindi sostituisci la variabile FontName con il nome del font di Google:

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

Aumentare la dimensione del font

Per aumentare la dimensione del font nel modello, incolla il seguente codice, quindi modifica il numero 14 con un valore maggiore o minore:

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

Per aumentare la dimensione del font delle intestazioni nel modello, incolla il seguente codice, quindi modifica i valori accanto all'intestazione:

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

Se hai importato i modelli dall'app legacy Order Printer, puoi aumentare la dimensione del font utilizzando il seguente blocco di codice:

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