Personalizzazione dei modelli di Order Printer

Nel pannello di controllo Shopify, puoi creare e personalizzare fino a 15 modelli per l'app Order Printer. Per impostazione predefinita, l'app Order Printer include due modelli:

• Fattura - Fattura di base che puoi inviare al cliente.
• Documento di trasporto - Stampa dell'indirizzo del negozio e dell'indirizzo di spedizione del cliente.

Per crescere: fatture e documenti di trasporto sono solo un inizio. Aggiungere agli ordini inserti promozionali come campioni di prodotti e coupon, rappresenta un modo ottimale per stabilire un contatto con i clienti.

Crea un nuovo modello Order Printer

Per creare un nuovo modello Order Printer, è necessario avere dimestichezza con HTML, CSS e Liquid. Il servizio di assistenza per i temi di Shopify può aiutarti a effettuare modifiche limitate nell'ambito della Design Policy di Shopify.

Procedura:

1. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.

2. Clicca su Order Printer per aprire l'app.

3. Clicca su Manage templates (Gestisci modelli).

4. Clicca su Add template (Aggiungi modello).

5. Nel campo Nome, inserisci un nome per il nuovo modello.

6. Nel campo Codice aggiungi codice HTML, CSS o Liquid per creare il modello.

7. Quando hai finito, clicca Salva.

Modifica un modello Order Printer

Per modificare i modelli Order Printer, è necessario avere dimestichezza con HTML, CSS e Liquid. Il servizio di assistenza per i temi di Shopify può aiutarti a effettuare modifiche limitate nell'ambito della Design Policy di Shopify.

Procedura:

1. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.

2. Clicca su Order Printer per aprire l'app.

3. Clicca su Manage templates (Gestisci modelli).

4. Clicca sul nome del modello da modificare.

5. Apporta le modifiche al modello aggiungendo o modificando il codice HTML, CSS o Liquid nel campo Codice. Per visualizzare in anteprima degli esempi di personalizzazione dei modelli, consulta gli Esempi di personalizzazione dei modelli.

6. Quando hai finito, clicca Salva.

Esempi di personalizzazione dei modelli

I seguenti esempi spiegano alcuni modi comuni per personalizzare i modelli Order Printer:

• Aggiungi il tuo logo ai modelli Order Printer
• Crea tabelle con larghezza al 100%
• Mostra miniature dei prodotti.
• Aggiungie dettagli dell'ordine

Esempio: aggiunta del tuo logo ai modelli Order Printer

Nota

La seguente personalizzazione richiede una conoscenza di base dell'HTML.

Desktop

1. Dal pannello di controllo Shopify vai su Contenuti > File.
2. Clicca su Carica file e seleziona il file immagine sul computer.
3. Nella pagina File, trova il file caricato e clicca su Copia URL.
4. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.
5. Clicca su Order Printer per aprire l'app.
6. Clicca su Manage templates (Gestisci modelli).
7. Clicca sul nome del modello da modificare.
8. Inserisci il seguente frammento di codice nel punto del modello in cui vuoi posizionare il logo: <img src="your-image-URL">.
9. Sostituisci your-image-URL con l'URL dell'immagine che hai copiato. A seconda del punto in cui vuoi che venga visualizzato il logo potrebbe essere necessario inserire un tag <br/> per aggiungere un'interruzione di riga prima o dopo l'immagine.

iPhone

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio tocca File.
3. Clicca su Carica file e seleziona il file immagine sul computer.
4. Nella pagina File, trova il file caricato e clicca su Copia URL.
5. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.
6. Clicca su Order Printer per aprire l'app.
7. Clicca su Manage templates (Gestisci modelli).
8. Clicca sul nome del modello da modificare.
9. Inserisci il seguente frammento di codice nel punto del modello in cui vuoi posizionare il logo: <img src="your-image-URL">.
10. Sostituisci your-image-URL con l'URL dell'immagine che hai copiato. A seconda del punto in cui vuoi posizionare il logo potrebbe essere necessario inserire un tag <br/> per aggiungere un'interruzione di riga prima o dopo l'immagine.

Android

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio tocca File.
3. Clicca su Carica file e seleziona il file immagine sul computer.
4. Nella pagina File, trova il file caricato e clicca su Copia URL.
5. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.
6. Clicca su Order Printer per aprire l'app.
7. Clicca su Manage templates (Gestisci modelli).
8. Clicca sul nome del modello da modificare.
9. Inserisci il seguente frammento di codice nel punto del modello in cui vuoi posizionare il logo: <img src="your-image-URL">.
10. Sostituisci your-image-URL con l'URL dell'immagine che hai copiato. A seconda del punto in cui vuoi posizionare il logo potrebbe essere necessario inserire un tag <br/> per aggiungere un'interruzione di riga prima o dopo l'immagine.

Nel campo HTML, dovresti visualizzarlo in questo modo:

Esempio: creazione di tabelle con larghezza 100%

Per ottenere tabelle con bordi e larghezza pari al 100%, aggiungi una classe table-tabular alla tua tabella:

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

Esempio: visualizzazione delle miniature dei prodotti

Per includere le anteprime dei prodotti, inserisci nel modello questo codice:

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

Aggiunta dei dettagli degli ordini

Nota

La seguente personalizzazione richiede la conoscenza di HTML e Liquid.

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

1. Dal pannello di controllo Shopify clicca su Impostazioni > App e canali di vendita.

2. Clicca su Order Printer per aprire l'app.

3. Clicca su Manage templates (Gestisci modelli).

4. Clicca sul nome del modello da modificare.

5. Utilizza le variabili Liquid per aggiungere dettagli dell'ordine e HTML per aggiungere la formattazione. Ad esempio, {{ line_item.price | money }} stampa il prezzo dell'articolo.

6. Quando hai finito, clicca Salva.

Ad esempio, Monica 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 Packing slip nell'app Order Printer:

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

Di conseguenza, i documenti di trasporto di Monica ora includono una tabella che elenca gli articoli acquistati.