ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

Hoppy Free Shipping offre due tipi di posizionamento principali per la barra di spedizione gratuita:

• 📌 Punti di default
• 🧩 Posizionamenti personalizzati

Nella maggior parte dei casi, le aree di collocamento di default funzionano perfettamente bene.

Tuttavia, a volte i commercianti possono desiderare una maggiore flessibilità e preferiscono posizionare la barra di spedizione gratuita in una posizione completamente personalizzata a seconda del layout del negozio.

Questo è esattamente dove Posizione personalizzata caratteristica diventa utile ✨

Utilizzando posizione personalizzata, la barra di spedizione gratuita può essere posizionata:

• Dentro Shopify Blocchi app
• All'interno di sezioni liquide personalizzate
• File di tema
• All'interno controllati manualmente le posizioni

Questa documentazione spiega come attivare correttamente la posizione personalizzata e come posizionare la barra di spedizione gratuita utilizzando entrambi i metodi disponibili.

⚠️ Comprensione delle differenze di flusso di lavoro

Il comportamento della posizione personalizzata dipende dal tipo di flusso di lavoro selezionato durante la creazione della configurazione Free Shipping Upsell.

🎯 Sulla base degli obiettivi (posizione multipla)

The Sulla base degli obiettivi il flusso di lavoro include più aree di collocamento:

• Pagina del prodotto
• Cassetto portaoggetti
• Pagina del carrello
• Banner

Per questo flusso di lavoro:

→ Aprire la scheda di posizionamento che si desidera personalizzare
→ Cambiare il suo posizionamento a Posizione personalizzata

Una volta abilitato:

→ Codice della barra di spedizione Snippet diventa disponibile

⚠️ Importante:

La scheda di collocamento deve essere effettivamente cambiata Posizione personalizzata.

Altrimenti, la barra di spedizione gratuita continuerà a utilizzare il comportamento di posizionamento predefinito.

📍 Sulla base del posizionamento (posizione singola)

The Sulla base del posizionamento il flusso di lavoro controlla solo un'area di collocamento.

Per questo flusso di lavoro, due metodi di posizione personalizzata diventano disponibili:

1. 🆔 ID della barra di trasporto
2. 🧩 Codice della barra di spedizione Snippet

🆔 ID della barra di trasporto

Questo metodo viene utilizzato principalmente con Shopify Blocchi app.

L'ID della barra di spedizione collega il blocco dell'app storefront con la configurazione di spedizione gratuita selezionata.

🧩 Codice della barra di spedizione Snippet

Questo metodo fornisce una flessibilità di posizionamento più avanzata.

Il codice snippet può essere:

• Aggiunto all'interno di un blocco liquido personalizzato
• Aggiunto direttamente in Shopify File di tema

🛠️ Fase 1 — Apri Hoppy Free Shipping

Aprire Hoppy Free Shipping app dalla tua Shopify Admin.

📂 Passo 2 — Aprire o creare una spedizione gratuita

Puoi anche:

→ Aprire una configurazione Free Shipping Upsell esistente
→ O creare una nuova configurazione

⚙️ Passo 3 — Passare alle impostazioni di posizionamento

Il passo successivo dipende dal tipo di flusso di lavoro attualmente in uso.

🎯 Sulla base del flusso di lavoro degli obiettivi

Se stai usando Sulla base degli obiettivi flusso di lavoro:

→ Aprire la scheda di posizionamento in cui si desidera posizionare manualmente la barra di spedizione gratuita

Esempi:

• Pagina del prodotto
• Cassetto portaoggetti
• Pagina del carrello
• Banner

📍 Sulla base del flusso di lavoro di posizionamento

Se stai usando Sulla base del posizionamento flusso di lavoro:

→ Navigare direttamente al Luogo scheda

Poiché questo flusso di lavoro controlla solo un posizionamento, tutte le impostazioni relative al posizionamento verranno visualizzate lì.

🎯 Fase 4 — Cambia posizione in posizione personalizzata

All'interno delle impostazioni di Posizionamento:

→ Cambiare Visualizza su (Incluso) o Luogo opzione a:

Posizione personalizzata

Allora:

→ Cliccare Salva

⚠️ Importante:

Attivare la posizione personalizzata rimuove la barra di spedizione gratuita dalle aree di posizionamento predefinite.

La barra di spedizione gratuita ora apparirà solo dove si posiziona manualmente.

ℹ️ Se si utilizza Sulla base degli obiettivi flusso di lavoro, vai a Metodo 2.

🆔 Metodo 1 — Utilizzo dell'ID della barra di trasporto

Questo metodo è ideale quando si desidera posizionare la barra di spedizione gratuita direttamente utilizzando Shopify’s Theme Editor.

ℹ️ Questo metodo è disponibile principalmente per Sulla base del posizionamento flusso di lavoro.

🎨 Fase 5 — Apri Shopify Tema Editor

Da Shopify Admin:

→ Vai a Canali di vendita → Online Store
→ Cliccare Modifica tema

Questo apre il Shopify Theme Editor.

➕ Passo 6 — Aggiungi il Blocco di app di spedizione gratuito

All'interno del Theme Editor:

→ Navigare alla sezione in cui si desidera che la barra di spedizione gratuita venga visualizzata
→ Passare intorno a sezioni compatibili fino al colore blu ➕ icona appare
→ Cliccare Aggiungi blocco

Allora:

→ Aprire il Apps categoria
→ Selezionare Spedizione gratuita

Il Blocco App verrà ora aggiunto all'area riservata selezionata.

🔗 Passo 7 — Aggiungi l'ID della barra di trasporto

Una volta aggiunto l'App Block:

→ Inserisci l'ID della barra di spedizione all'interno delle impostazioni del blocco dell'app

Allora:

→ Salvare il Shopify Tema
→ Salvare la configurazione di Spedizione gratuita all'interno Hoppy Free Shipping così come

⚠️ Importante:

Entrambi i risparmi sono necessari.

Altrimenti, la barra di spedizione gratuita potrebbe non apparire correttamente sul negozio.

🧩 Metodo 2 — Utilizzo del codice della barra di trasporto Snippet

Questo metodo è utile quando si desidera una maggiore flessibilità di posizionamento avanzata.

La spedizione Bar Codice Snippet può essere:

• Aggiunto utilizzando un blocco liquido personalizzato
• Aggiunto direttamente in Shopify File di tema

ℹ️ Questo è l'unico metodo di posizione personalizzata disponibile per Sulla base degli obiettivi flusso di lavoro.

➕ Passo 8 — Aggiungere un blocco liquido personalizzato

Dentro Shopify Tema Editor:

→ Navigare nella zona in cui si desidera che la barra di spedizione gratuita venga visualizzata
→ Passare intorno a sezioni compatibili fino al colore blu ➕ icona appare
→ Ricerca per Liquido personalizzato

Allora:

→ Aggiungi il codice della barra di spedizione Snippet all'interno del blocco liquido personalizzato

Questo consente alla Free Shipping Bar di rendere nella posizione di storefront selezionata.

💻 Aggiungere il codice Snippet direttamente in file tema

Se necessario, il Shipping Bar Code Snippet può anche essere aggiunto direttamente in Shopify File di codice tema.

Questo è utile quando:

• Blocchi app non sono disponibili
• Le sezioni liquide personalizzate non sono supportate
• Personalizzazione avanzata del negozio è necessario

⚙️ Apertura Shopify Codice Editore

Per aprire il Shopify Codice Editore:

→ Vai a Canali di vendita → Online Store
→ Fare clic sul menu a tre punti accanto al Modifica tema pulsante pulsante
→ Cliccare Modifica del codice

⚠️ Importante:

Non consigliamo di modificare Shopify File tema a meno che:

• Sei comodo lavorare con Shopify codice
• O capisci quali cambiamenti sono fatti

Modifiche non corrette all'interno I file tema possono influenzare il comportamento di negozio.

🧩 Identificare l'Area Corsa

Prima di inserire il Shipping Bar Code Snippet, è importante identificare l'esatta posizione di negozio in cui dovrebbe apparire la barra di spedizione gratuita.

Un modo semplice per farlo:

→ Apri il tuo negozio nel browser
→ Fare clic con il tasto destro vicino alla zona dove si desidera la barra di spedizione gratuita
→ Cliccare Controllo

Questo apre il browser Strumenti di sviluppo.

Da lì:

→ Ispezionare la struttura HTML circostante
→ Identificare nomi di classe utili o riferimenti di sezione
→ Abbina quelle sezioni con la corrispondente Shopify .liquid file nel Codice Editor

Questo ti aiuta a individuare il file Teme corretto più accuratamente ✨

---

🔍 Trovare il file tema corretto

Dopo l'apertura Shopify Codice Editore:

→ Navigare attraverso i file Tema sul lato sinistro
→ Individuare il .liquid responsabile per l'area in cui si desidera che la barra di spedizione gratuita venga visualizzata
→ Cercare qualsiasi riferimento id/class utilizzando la funzione di ricerca del Code Editor.
→ Clicca sul più promettente .liquid file

Per esempio:

• Le sezioni relative al prodotto possono esistere all'interno:
• • main-product.liquid
  • product-template.liquid
• Le sezioni relative al carrello possono esistere all'interno:
• • cart.liquid
  • cart-drawer.liquid
• Le sezioni personalizzate possono esistere all'interno:
• • sections/*.liquid

➕ Aggiungi il codice della barra di spedizione Snippet

Una volta corretto .liquid il file è identificato:

→ Incolla il codice della barra di spedizione Snippet nella posizione desiderata all'interno del file

⚠️ Importante:

Assicurarsi che lo snippet venga aggiunto con attenzione nella posizione corretta.

Il posizionamento non corretto può causare:

• Questioni di layout
• rendering improprio
• Comportamento di vetrina inaspettato

💾 Salvare il file tema

Dopo aver inserito il codice snippet:

→ Cliccare Salva

Allora:

→ Aggiornare l'anteprima del negozio
→ Verificare che la barra di spedizione gratuita appare correttamente nella posizione personalizzata selezionata ✨

🎉 Risultato finale

Una volta configurato con successo:

✅ La barra di spedizione gratuita può apparire in posizioni di negozio completamente personalizzate
✅ Shopify Blocchi app possono connettersi correttamente utilizzando l'ID della barra di trasporto
✅ Il posizionamento avanzato del negozio diventa possibile utilizzando Code Snippets
✅ I commercianti guadagnano molta più flessibilità rispetto alla visibilità del negozio ✨

Aggiornato il: 10/09/2026