Visualizzazione di Shop Promise nella pagina del prodotto
Il badge Shop Promise viene visualizzato accanto alle date di consegna e nelle pagine dei prodotti per le consegne idonee che si stima siano effettuate a livello nazionale negli Stati Uniti in un massimo di cinque giorni di calendario. Questo badge consente ai clienti di sapere che l'ordine include una consegna veloce e affidabile.
Dopo l'approvazione delle tua richiesta per Shop Promise, dovresti andare alla pagina del prodotto utilizzando l'editor del tema per verificare che il badge Shop Promise venga visualizzato correttamente.
Se il badge non viene visualizzato correttamente, dovrai posizionare manualmente il modulo di Shop Promise.
Su questa pagina
Posizionamento manuale del modulo di Shop Promise
Se sei in grado di leggere e modificare il codice del tema puoi identificare il punto in cui apportare le modifiche e aggiornare la pagina del prodotto.
Identificazione del punto in cui apportare le modifiche
Il codice del modulo di Shop Promise deve essere incluso nel modulo di prodotto nella pagina del prodotto, che avrà un aspetto simile a {%- form 'product', product -%}. Il modulo di Shop Promise si trova in diverse posizioni a seconda del tema. Di seguito sono riportate le posizioni comuni:
-
main-product.liquid -
product-form.liquid -
product-template.liquid -
product.liquid
Aggiornamento della pagina del prodotto
Passaggi:
- Dal pannello di controllo Shopify, vai su Negozio online > Temi.
- Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
- Apri il file pertinente.
- Trova la riga che contiene
{%- if block.settings.show_dynamic_checkout -%}o{{ form | payment_button }}. - Crea una nuova riga direttamente sotto a
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}e incolla il testo seguente su quella riga:
<div class="delivery-promise__promise-container"></div>- Clicca su Salva.
Il risultato dovrebbe avere un aspetto simile a questo:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>- Nell'app di Shopify tocca il pulsante ….
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare, tocca il pulsante … per aprire il menu azioni, quindi tocca Modifica codice.
- Apri il file pertinente.
- Trova la riga che contiene
{%- if block.settings.show_dynamic_checkout -%}o{{ form | payment_button }}. - Crea una nuova riga direttamente sotto a
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}e incolla il testo seguente su quella riga:
<div class="delivery-promise__promise-container"></div>- Tocca Salva.
Il risultato dovrebbe avere un aspetto simile a questo:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>- Nell'app di Shopify tocca il pulsante ….
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare, tocca il pulsante … per aprire il menu azioni, quindi tocca Modifica codice.
- Apri il file pertinente.
- Trova la riga che contiene
{%- if block.settings.show_dynamic_checkout -%}o{{ form | payment_button }}. - Crea una nuova riga direttamente sotto a
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}e incolla il testo seguente su quella riga:
<div class="delivery-promise__promise-container"></div>- Tocca Salva.
Il risultato dovrebbe avere un aspetto simile a questo:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Sostituzione manuale del tema del modulo di Shop Promise
Il modulo di Shop Promise ha un tema scuro e uno chiaro. Il modulo utilizza automaticamente il tema che ha il rapporto di contrasto più alto rispetto al colore di sfondo della pagina del prodotto.
Se sei in grado di leggere e modificare il codice del tema, puoi sostituire il tema selezionato del modulo aggiungendo un attributo dei dati all'elemento di ancoraggio utilizzato per posizionare manualmente il modulo di Shop Promise.
Prima di apportare modifiche, duplica il tema e modifica il tema duplicato, in modo da poter facilmente annullare le modifiche.
Passaggi:
- Segui le istruzioni per posizionare manualmente il modulo di Shop Promise nella pagina del prodotto e tenere aperto l'editor del tema.
- Aggiungi un attributo dei dati del tema all'elemento di ancoraggio appena creato impostato su scuro o chiaro.
- Clicca su Salva.
Il risultato dovrebbe avere un aspetto simile a uno dei seguenti:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Oppure
<div class="delivery-promise__promise-container" data-theme="light"></div>- Segui le istruzioni per posizionare manualmente il modulo di Shop Promise nella pagina del prodotto e tenere aperto l'editor del tema.
- Aggiungi un attributo dei dati del tema all'elemento di ancoraggio appena creato impostato su scuro o chiaro.
- Tocca Salva.
Il risultato dovrebbe avere un aspetto simile a uno dei seguenti:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Oppure
<div class="delivery-promise__promise-container" data-theme="light"></div>- Segui le istruzioni per posizionare manualmente il modulo di Shop Promise nella pagina del prodotto e tenere aperto l'editor del tema.
- Aggiungi un attributo dei dati del tema all'elemento di ancoraggio appena creato impostato su scuro o chiaro.
- Tocca Salva.
Il risultato dovrebbe avere un aspetto simile a uno dei seguenti:
<div class="delivery-promise__promise-container" data-theme="dark"></div>Oppure
<div class="delivery-promise__promise-container" data-theme="light"></div>