Personalizzazione dei documenti di trasporto

Puoi personalizzare il modello dei documenti di trasporto. La modifica del modello ti consente di aggiungere il tuo branding e di cambiare l'aspetto del documento di trasporto.

Modifica l'indirizzo del negozio

Se desideri modificare l'indirizzo del negozio, puoi andare su Impostazioni > Generali e modificare le informazioni del negozio.

Se desideri modificare solo l'indirizzo sui documenti di trasporto, segui i passaggi riportati di seguito.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Impostazioni > Spedizione e consegna.

2. Nella sezione Documenti, clicca su Modello distinta di imballaggio.

3. Trova la variabile Liquid {{ shop_address.summary }} che fa riferimento all'indirizzo del negozio. Se non riesci a trovarla, prova con quella seguente:

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}

4. Evidenzia questo codice ed eliminalo.
5. Digita l'indirizzo che desideri visualizzare sui documenti di trasporto in questo spazio vuoto. Ad esempio, potresti digitarlo in questo modo: Via Esempio 123, New York, NY, 10000, Stati Uniti
6. Clicca su Anteprima modello per vedere le modifiche.
7. Clicca su Salva.

Rimuovi le immagini del prodotto

Puoi rimuovere le immagini dei prodotti che vengono visualizzate accanto ai titoli dei prodotti sui documenti di trasporto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Impostazioni > Spedizione e consegna.

2. Nella sezione Documenti, clicca su Modello distinta di imballaggio.

3. Trova le seguenti variabili Liquid che fanno riferimento alle immagini del prodotto:

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}

4. Evidenzia questo codice ed eliminalo.
5. Clicca su Anteprima modello per vedere in anteprima le modifiche.
6. Clicca su Salva.

Modifica logo

Prima di aggiungere il logo del negozio ai documenti di trasporto, devi caricare il logo nel pannello di controllo Shopify. Dopo il caricamento, prendi nota del nome del file caricato per poterlo utilizzare in seguito nel modello di documento di trasporto.

Dopo aver caricato il logo nel negozio, puoi aggiungere il logo e rimuovere il nome del negozio, aggiungere il logo sopra il nome del negozio o aggiungere il logo accanto al nome del negozio.

Passaggi:

1. Dal pannello di controllo Shopify, vai a Contenuti > File.

2. Clicca su Carica file.

3. Seleziona e carica il logo del negozio dal tuo dispositivo.

4. Prendi nota del nome del file al termine del caricamento, inclusa l’estensione del file (ad esempio .png o .jpg).

Aggiungi il logo e rimuovi il nome del negozio

Puoi rimuovere il nome del negozio e sostituirlo con il logo del negozio nella parte superiore dei documenti di trasporto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Impostazioni > Spedizione e consegna.

2. Nella sezione Documenti, clicca su Modello distinta di imballaggio.

3. Trova il seguente codice che fa riferimento al nome del negozio:

<p class="to-uppercase">
  {{ shop.name }}
</p>

4. Evidenzia questo codice ed eliminalo.
5. Nello spazio che hai creato, scrivi il codice seguente utilizzando il nome del file caricato in precedenza:

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

Il filtro file_img_url genera l’URL per il file caricato con la dimensione specificata, mentre il filtro img_tag crea un tag immagine HTML con il testo alternativo fornito.

Ad esempio, se il file caricato è shop_logo.png, il codice Liquid corrispondente sarà:

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}

6. Seleziona Anteprima modello per vedere un'anteprima delle modifiche.
7. Clicca su Salva.

Aggiungi il logo sopra il nome del negozio

Se desideri aggiungere il logo sopra il nome del negozio nella parte superiore dei documenti di trasporto, segui i passaggi riportati di seguito.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Impostazioni > Spedizione e consegna.

2. Nella sezione Documenti, clicca su Modello distinta di imballaggio.

3. Trova la seguente variabile Liquid che fa riferimento al nome del negozio e aggiungi un'interruzione di riga tra le due righe:

<div class="shop-title">
      |
      <p class="to-uppercase">

4. Nello spazio che hai creato, scrivi il codice seguente utilizzando il nome del file caricato in precedenza (ad esempio shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>

5. Seleziona Anteprima modello per vedere un'anteprima delle modifiche.
6. Clicca su Salva.

Aggiungi il logo accanto al nome del negozio

Se desideri aggiungere il logo accanto al nome del negozio nella parte superiore dei documenti di trasporto, segui i passaggi riportati di seguito.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Impostazioni > Spedizione e consegna.

2. Nella sezione Documenti, clicca su Modello distinta di imballaggio.

3. Trova la seguente variabile Liquid che fa riferimento al nome del negozio:

<p class="to-uppercase">
{{ shop.name }}
</p>

4. Evidenzia questo codice ed eliminalo.
5. Nello spazio che hai creato, scrivi il codice seguente utilizzando il nome del file caricato in precedenza (ad esempio shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>

6. Trova le seguenti variabili Liquid:

.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}

7. Aggiungi una nuova riga alla fine delle variabili sopra elencate e incolla il codice seguente:

.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}

8. Seleziona Anteprima modello per vedere un'anteprima delle modifiche.
9. Clicca su Salva.

Personalizza lo stile dei documenti di trasporto con il CSS

Puoi personalizzare il documento di trasporto utilizzando i file CSS che carichi su Shopify. I file CSS ospitati al di fuori di Shopify non verranno visualizzati correttamente.

Passaggi:

1. Dal pannello di controllo Shopify, vai a Contenuti > File.

2. Clicca su Carica file.

3. Seleziona e carica il file CSS.

4. Copia l'URL del file al termine del caricamento.

5. Includi il seguente codice:

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>