Accedi
Inizia la prova gratuita

Creazione e personalizzazione dei modelli Shopify Order Printer

Puoi personalizzare i modelli in diversi modi e crearne di nuovi. L'app Shopify Order Printer supporta i modelli realizzati con variabili HTML, CSS e Liquid. Prima di personalizzare i modelli, assicurati di conoscere il riferimento alle variabili Liquid e ai filtri per Shopify Order Printer per tutte le personalizzazioni dei modelli supportate.

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

Su questa pagina

Puoi aggiungere il logo al tuo modello.

Passaggi:

  1. Dal pannello di controllo Shopify vai su Contenuti > File.

  2. Clicca su Carica file, quindi seleziona il file immagine che desideri caricare.

  3. Per copiare l'URL dell'immagine del logo, clicca sull'icona del link.

  4. Clicca su Impostazioni > App e canali di vendita.

  5. Clicca su Order Printer.

  6. Clicca su Modelli.

  7. Clicca sul nome del modello da modificare.

  8. Nell'editor di codice, incolla il seguente blocco di codice:

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

  1. Sostituisci YOUR_IMAGE_URL_HERE nel codice con l'URL dell'immagine.
  2. Facoltativo: per allineare il logo, modifica il valoretext-align in left, righto center.
  3. Facoltativo: per regolare la larghezza del logo, modifica il valore width in un valore maggiore o minore come 8em o 2em.
  4. Facoltativo: per visualizzare l'anteprima del modello, clicca su Anteprima.
  5. Clicca su Salva.

Esempio:

Esamina il seguente esempio di visualizzazione del codice HTML dopo aver aggiunto il logo al modello:

Un esempio che mostra un blocco di codice su come aggiungere un logo a un modello

Aggiungi immagini a un modello

Puoi aggiungere immagini al modello.

Passaggi:

  1. Dal pannello di controllo Shopify vai su Contenuti > File.

  2. Clicca su Carica file, quindi seleziona il file immagine che desideri caricare.

  3. Per copiare l'URL dell'immagine, clicca sull'icona del link.

  4. Clicca su Impostazioni > App e canali di vendita.

  5. Clicca su Order Printer.

  6. Clicca su Modelli.

  7. Clicca sul nome del modello da modificare.

  8. Nell'editor di codice, incolla il <img src=”Image Source” /> blocco di codice.

  9. Sostituisci Image Source nel codice con l'URL dell'immagine.

  10. Clicca su Salva.

Creazione di tabelle con larghezza al 100%

Puoi aggiungere bordi alla tabella e allargarla fino al 100%. Devi aggiungere la classe table-tabular alla tua tabella.

Passaggi:

  1. Dal pannello di controllo Shopify vai a Impostazioni > App e canali di vendita.

  2. Clicca su Order Printer.

  3. Clicca su Apri app.

  4. Clicca su Modelli.

  5. Clicca sul modello che desideri modificare.

  6. Nell'editor di codice, trova la tabella che desideri modificare e aggiungici la classe table-tabular.

  7. Facoltativo: per visualizzare l'anteprima del modello, clicca su Anteprima.

  8. Clicca su Salva.

Esempio:

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

Visualizzazione delle miniature dei prodotti

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

Passaggi:

  1. Dal pannello di controllo Shopify vai a Impostazioni > App e canali di vendita.

  2. Clicca su Order Printer.

  3. Clicca su Apri app.

  4. Clicca su Modelli.

  5. Clicca sul modello che desideri modificare.

  6. Aggiungi il blocco di codice liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} al tuo modello.

  7. Facoltativo: per visualizzare l'anteprima del modello, clicca su Anteprima.

  8. Clicca su Salva.

Aggiunta dei dettagli degli ordini

Puoi aggiungere al modello dettagli dell'ordine quali il nome, la quantità e il costo degli articoli acquistati.

Passaggi:

  1. Dal pannello di controllo Shopify vai a Impostazioni > App e canali di vendita.

  2. Clicca su Order Printer.

  3. Clicca su Apri app.

  4. Clicca su Modelli.

  5. Clicca sul modello che desideri modificare.

  6. Nell'editor di codice, utilizza le variabili Liquid per aggiungere dettagli dell'ordine e HTML per aggiungere la formattazione. Ad esempio, l'utilizzo del codice {{ line_item.price | money }} mostra il prezzo dell'articolo.

  7. Facoltativo: per visualizzare l'anteprima del modello, clicca su Anteprima.

  8. Clicca su Salva.

Esempio:

Nyla vuole modificare il suo modello di documento di trasporto per includere un elenco degli articoli in consegna e aggiunge il seguente codice in fondo al modello Documento di trasposto nell'applicazione Shopify Order Printer. Di conseguenza, i documenti di trasporto di Nyla ora includono una tabella che elenca gli articoli acquistati.

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>

Aggiungi un codice a barre a un modello

Puoi aggiungere un codice a barre al modello

Passaggi:

  1. Dal pannello di controllo Shopify vai a Impostazioni > App e canali di vendita.

  2. Clicca su Order Printer.

  3. Clicca su Apri app.

  4. Clicca su Modelli.

  5. Clicca sul modello che desideri modificare.

  6. Aggiungi il <s-barcode value="a" />blocco di codice al tuo modello.

  7. Sostituisci il `` valore con il valore del testo del codice a barre.

  8. Facoltativo: per visualizzare l'anteprima del modello, clicca su Anteprima.

  9. Clicca su Salva.

Aggiungi il codice QR a un modello

Puoi aggiungere un codice QR al tuo modello.

Passaggi:

  1. Dal pannello di controllo Shopify vai a Impostazioni > App e canali di vendita.

  2. Clicca su Order Printer.

  3. Clicca su Apri app.

  4. Clicca su Modelli.

  5. Clicca sul modello che desideri modificare.

  6. Aggiungi il <s-barcode type="qrcode" value="" />blocco di codice al tuo modello.

  7. Sostituisci il `` valore con il valore del testo del codice QR.

  8. Facoltativo: per visualizzare l'anteprima del modello, clicca su Anteprima.

  9. Clicca su Salva.

Utilizzo di un font Google in un modello

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

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

Aumento della dimensione del font

Per aumentare la dimensione del font nel modello, incolla nel modello il seguente codice e regola il14 numero con un valore maggiore o inferiore:

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

Per aumentare la dimensione dei font delle intestazioni nel modello, incolla nel modello il seguente codice e regola i valori accanto al titolo:

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

Se hai importato i template dall'app obsoleta Order Printer puoi aumentare la dimensione dei font utilizzando il seguente blocco di codice:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>
Non trovi le risposte che stai cercando? Siamo qui per aiutarti.