Visualizzazione del contenuto nella pagina di stato dell'ordine in base a criteri

Attenzione

Questo è un tutorial avanzato e non è supportato da Shopify. Richiede la conoscenza di linguaggi di web design come HTML, CSS, Javascript e Liquid. Ti consigliamo di rivolgerti a un Partner di Shopify se incontri difficoltà con il tutorial seguente.

Nota

Gli script aggiuntivi per personalizzare la pagina di stato dell'ordine sono deprecati.

I merchant con i piani Basic, Shopify e Advanced possono personalizzare la pagina di stato dell'ordine utilizzando l'editor di check-out e account. I merchant Shopify Plus possono utilizzare Checkout Extensibility per personalizzare la pagina di stato dell'ordine.

Puoi mostrare il contenuto sulla tua pagina di stato dell'ordine in base ai seguenti criteri:

• La posizione dei clienti
• Un ordine per un particolare prodotto
• Una modalità di spedizione

Visualizzazione dei contenuti in base alla posizione dei clienti

Puoi aggiungere alla pagina di stato dell’ordine un messaggio personalizzato che verrà visualizzato solo dai clienti con indirizzi di spedizione in una determinata area geografica. Ad esempio, puoi scegliere di mostrare un messaggio solo ai clienti che vivono a New York, negli Stati Uniti. Puoi specificare tutte le sedi che desideri.

Passaggi:

Desktop

1. Dal pannello di controllo di Shopify passa a Impostazioni > Check-out.
2. Nella casella di testo Script aggiuntivi incolla il codice di esempio seguente:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Modifica il codice per specificare dove devono trovarsi i clienti per ricevere il messaggio personalizzato. Per fare ciò, devi modificare le abbreviazioni del paese e dello stato nella dichiarazione Liquid {% if %} in cima al blocco dei codici. Il messaggio nell'esempio sopra riportato è impostato per essere visualizzato solo dai clienti che vivono a New York, negli Stati Uniti.

   • Per mostrare il messaggio ai clienti in uno stato diverso, sostituisci NY con l’abbreviazione dello stato desiderato. Per trovare l’abbreviazione postale da usare per uno stato degli Stati Uniti, puoi consultare questo elenco delle abbreviazioni degli stati fornito da USPS.
   • Per mostrare il messaggio sia ai clienti di New York che a quelli di un altro stato, aggiungi and checkout.shipping_address.province_code == 'XX', dove XX è l’abbreviazione dello stato desiderato. Per aggiungere altri stati, ripeti questo passaggio.
   • Per mostrare il messaggio ai clienti di un paese diverso, sostituisci US con l’abbreviazione del paese desiderato. Devi inoltre sostituire NY con l’abbreviazione di uno stato o provincia nel nuovo paese. Se preferisci non specificare lo stato o la provincia, elimina quanto segue: and checkout.shipping_address.province_code == 'NY'.
   • Per ulteriori indicazioni sulla scrittura di istruzioni if di Liquid, vedi la sezione Control flow tags (Tag di flusso di controllo) nella guida di riferimento Liquid.

2. Inserisci un ordine di prova per visualizzare i risultati nella pagina di stato dell’ordine.

iPhone

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio, tocca Check-out.
3. Nella casella di testo Script aggiuntivi incolla il codice di esempio seguente:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Modifica il codice per specificare dove devono trovarsi i clienti per ricevere il messaggio personalizzato. Per fare ciò, devi modificare le abbreviazioni del paese e dello stato nella dichiarazione Liquid {% if %} in cima al blocco dei codici. Il messaggio nell'esempio sopra riportato è impostato per essere visualizzato solo dai clienti che vivono a New York, negli Stati Uniti.

   • Per mostrare il messaggio ai clienti in uno stato diverso, sostituisci NY con l’abbreviazione dello stato desiderato. Per trovare l’abbreviazione postale da usare per uno stato degli Stati Uniti, puoi consultare questo elenco delle abbreviazioni degli stati fornito da USPS.
   • Per mostrare il messaggio sia ai clienti di New York che a quelli di un altro stato, aggiungi and checkout.shipping_address.province_code == 'XX', dove XX è l’abbreviazione dello stato desiderato. Per aggiungere altri stati, ripeti questo passaggio.
   • Per mostrare il messaggio ai clienti di un paese diverso, sostituisci US con l’abbreviazione del paese desiderato. Devi inoltre sostituire NY con l’abbreviazione di uno stato o provincia nel nuovo paese. Se preferisci non specificare lo stato o la provincia, elimina quanto segue: and checkout.shipping_address.province_code == 'NY'.
   • Per ulteriori indicazioni sulla scrittura di istruzioni if di Liquid, vedi la sezione Control flow tags (Tag di flusso di controllo) nella guida di riferimento Liquid.

2. Inserisci un ordine di prova per visualizzare i risultati nella pagina di stato dell’ordine.

Android

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio, tocca Check-out.
3. Nella casella di testo Script aggiuntivi incolla il codice di esempio seguente:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Modifica il codice per specificare dove devono trovarsi i clienti per ricevere il messaggio personalizzato. Per fare ciò, devi modificare le abbreviazioni del paese e dello stato nella dichiarazione Liquid {% if %} in cima al blocco dei codici. Il messaggio nell'esempio sopra riportato è impostato per essere visualizzato solo dai clienti che vivono a New York, negli Stati Uniti.

   • Per mostrare il messaggio ai clienti in uno stato diverso, sostituisci NY con l’abbreviazione dello stato desiderato. Per trovare l’abbreviazione postale da usare per uno stato degli Stati Uniti, puoi consultare questo elenco delle abbreviazioni degli stati fornito da USPS.
   • Per mostrare il messaggio sia ai clienti di New York che a quelli di un altro stato, aggiungi and checkout.shipping_address.province_code == 'XX', dove XX è l’abbreviazione dello stato desiderato. Per aggiungere altri stati, ripeti questo passaggio.
   • Per mostrare il messaggio ai clienti di un paese diverso, sostituisci US con l’abbreviazione del paese desiderato. Devi inoltre sostituire NY con l’abbreviazione di uno stato o provincia nel nuovo paese. Se preferisci non specificare lo stato o la provincia, elimina quanto segue: and checkout.shipping_address.province_code == 'NY'.
   • Per ulteriori indicazioni sulla scrittura di istruzioni if di Liquid, vedi la sezione Control flow tags (Tag di flusso di controllo) nella guida di riferimento Liquid.

2. Inserisci un ordine di prova per visualizzare i risultati nella pagina di stato dell’ordine.

Visualizzazione dei contenuti in base a un ordine per un prodotto particolare

Scopri di più su come eseguire l'iterazione tramite checkout.line_items per vedere se il prodotto speciale è presente nell'ordine.

Passaggi:

Desktop

1. Dal pannello di controllo di Shopify passa a Impostazioni > Check-out.
2. Scorri verso il basso fino alla sezione Script aggiuntivi.
3. Copia il codice seguente negli Appunti (command + c su Mac, ctrl + c su PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Incolla il codice nella casella Script aggiuntivi (premi ctrl + V su PC o command + V su Mac)
2. Inserisci un ordine di prova per visualizzare la pagina di stato dell’ordine.

iPhone

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio, tocca Check-out.
3. Scorri verso il basso fino alla sezione Script aggiuntivi.
4. Copia il codice seguente negli Appunti (command + c su Mac, ctrl + c su PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Incolla il codice nella casella Script aggiuntivi (premi ctrl + V su PC o command + V su Mac)
2. Inserisci un ordine di prova per visualizzare la pagina di stato dell’ordine.

Android

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio, tocca Check-out.
3. Scorri verso il basso fino alla sezione Script aggiuntivi.
4. Copia il codice seguente negli Appunti (command + c su Mac, ctrl + c su PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Incolla il codice nella casella Script aggiuntivi (premi ctrl + V su PC o command + V su Mac)
2. Inserisci un ordine di prova per visualizzare la pagina di stato dell’ordine.

Visualizzazione dei contenuti in base alla modalità di spedizione

Puoi utilizzare uno script condizionale con la variabile checkout.shipping_method.title per mostrare il contenuto nella pagina di stato dell'ordine quando per un ordine è stata utilizzata una particolare modalità di spedizione.

Ad esempio, potresti offrire un'opzione di ritiro in negozio ai clienti che vivono abbastanza vicino al tuo negozio fisico tradizionale. Se selezionano l'opzione ritiro in negozio, puoi comunicare loro l'indirizzo del tuo negozio al dettaglio sulla pagina di stato dell'ordine.

Passaggi:

Desktop

1. Dal pannello di controllo di Shopify passa a Impostazioni > Check-out.
2. Scorri verso il basso fino alla sezione Script aggiuntivi.
3. Copia il codice seguente negli Appunti (Cmd + C su Mac, Ctrl + C su PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Incolla il codice nella casella Script aggiuntivi (Cmd + V su Mac, Ctrl + V su PC).
2. Inserisci un ordine di prova per visualizzare la pagina di stato dell’ordine.

iPhone

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio, tocca Check-out.
3. Scorri verso il basso fino alla sezione Script aggiuntivi.
4. Copia il codice seguente negli Appunti (Cmd + C su Mac, Ctrl + C su PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Incolla il codice nella casella Script aggiuntivi (Cmd + V su Mac, Ctrl + V su PC).
2. Inserisci un ordine di prova per visualizzare la pagina di stato dell’ordine.

Android

1. Nell'app di Shopify tocca il pulsante …, quindi tocca Impostazioni.
2. Nella sezione Impostazioni negozio, tocca Check-out.
3. Scorri verso il basso fino alla sezione Script aggiuntivi.
4. Copia il codice seguente negli Appunti (Cmd + C su Mac, Ctrl + C su PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Incolla il codice nella casella Script aggiuntivi (Cmd + V su Mac, Ctrl + V su PC).
2. Inserisci un ordine di prova per visualizzare la pagina di stato dell’ordine.