Si può collegare una scheda della barra mobile a una sezione della homepage su Shopify? (Guida ai link di ancoraggio)

La risposta breve: sì, con un link di ancoraggio

Sì. Assegna un ID alla sezione della homepage (ad esempio reviews), quindi imposta il link della scheda su /#reviews. I browser scorrono fino all’elemento il cui ID corrisponde alla parte dopo #. Usa un ID personalizzato, poiché gli ID generati automaticamente da Shopify possono variare.

I link di ancoraggio HTML consentono di saltare direttamente a qualsiasi elemento della homepage. Il browser individua l’ID nel DOM e lo mostra subito. Per gli standard web, l’ID deve essere univoco nell’intero documento. Poiché Shopify genera ID dinamici nei modelli JSON, essi rischiano di variare nel tempo. Dichiarare un ID stabile garantisce piena affidabilità.

La barra di navigazione mobile è un menu fisso posto in basso sullo schermo. Strutturare un’architettura della barra di navigazione mobile efficace connette gli acquirenti alle mete principali, come collezioni o recensioni in homepage.

Come funzionano i link di ancoraggio sulla homepage di Shopify

Cosa significa esattamente /#reviews

Un percorso come /#reviews fornisce tre istruzioni: / rimanda alla homepage, # separa il frammento e reviews indica l’ID HTML. Il browser scorre la pagina per mostrare l’elemento, come in scrollIntoView(). Indicare solo #reviews funziona in homepage ma fallisce altrove. La barra iniziale garantisce il ritorno alla homepage.

ID di sezione generati automaticamente vs ID personalizzati

Ciascuna sezione Shopify è racchiusa in un div con class="shopify-section" e un id che inizia con shopify-section-. Nelle sezioni Liquid statiche, l’ID è il nome del file privo di .liquid. Nei modelli JSON, l’ID viene generato dinamicamente da Shopify (rif. Liquid Objects: Section), ad esempio shopify-section-template--123456__reviews. Questo ID basta per un test rapido, ma ricreando la sezione può cambiare e rompere il link. Un ID personalizzato rende il link indipendente dal generatore di ID di Shopify.

Passaggio 1: Assegnare un ID stabile alla sezione

Per configurare un salto verso un’ancora, il browser mobile richiede un ID ben definito. Esistono due modalità: ispezionare il codice del tema per un test rapido oppure inserire un blocco di ancoraggio dedicato per la massima affidabilità in produzione.

Per un test rapido, ispeziona il DOM da computer. Le sezioni risiedono in un div con class="shopify-section" e un ID come shopify-section-template--123456__reviews (rif. Section Rendering API). Copiare l’ID serve per verificare il flusso, ma può cambiare e invalidare il link.

La soluzione duratura consiste nel creare un ID personalizzato. Se il tuo tema include un blocco o una sezione Custom Liquid o HTML personalizzato, inseriscilo subito sopra la sezione nel personalizzatore del tema con un tag di ancoraggio leggero:

<div id="reviews"></div>

Nomina l’ancora con minuscole e trattini. L’attributo id di MDN Web Docs prevede che l’ID sia univoco nel documento. Se duplicato, il salto non è più affidabile. Duplica sempre il tema prima delle modifiche.

Figura 1: Illustrazione concettuale — ID di sezione generato automaticamente a confronto con un ID stabile creato tramite Custom Liquid.

Passaggio 2: Inserire il link di ancoraggio nella scheda

Barre del tema native (blocchi di link personalizzati)

Alcuni temi includono una barra di navigazione inferiore. La documentazione del tema Zest descrive il proprio blocco come strumento per reindirizzare i clienti alla pagina collegata. Questa documentazione non cita le ancore, quindi prova e verifica: nel personalizzatore, apri la barra mobile e inserisci /#reviews.

Barre d’accesso rapido tramite app dedicate

Se gestisci la barra con un’app, consulta la relativa documentazione per verificare il supporto ai cancelletti di ancoraggio. Alcune app hanno una sintassi propria per scorrere fino a un elemento (ad esempio scroll:OnPage di Navi+, descritta in seguito).

Formatta sempre la destinazione come /#reviews anziché #reviews se la barra è globale. Dalla scheda prodotto, un link con solo #reviews non troverà nulla. La barra iniziale / forza il browser a rientrare nella homepage prima di scorrere all’ancora.

Per un’analisi approfondita sulle architetture di navigazione mobile nei temi moderni di Shopify, consulta la nostra recensione del tema Horizon.

Passaggio 3: Testare su smartphone (scorrimento fluido e offset dell’intestazione fissa)

Simulare la visualizzazione mobile non riproduce l’ergonomia tattile. Esegui il test direttamente su uno smartphone reale: toccando la scheda dalla homepage e da una scheda prodotto.

Di default, il passaggio all’ancora è istantaneo. Per una transizione fluida, applica scroll-behavior: smooth; nel CSS. Come descritto su MDN Web Docs CSS scroll-behavior, imposta lo scorrimento durante la navigazione:

html {
  scroll-behavior: smooth;
}

Risolvi la sovrapposizione dell’intestazione fissa. Allineando il bordo superiore con la finestra, l’intestazione copre il titolo. Come documentato su MDN Web Docs Element: scrollIntoView(), scroll-margin-top è consigliato con intestazioni fisse. Aggiungi la proprietà:

#reviews {
  scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}

Nota: Il valore di 80px è un esempio: misura l’altezza reale dell’intestazione mobile e adatta i pixel. Controlla anche che la barra inferiore non nasconda i pulsanti alla fine della sezione.

Figura 2: Illustrazione concettuale — Titolo coperto dall’intestazione fissa a confronto con la corretta spaziatura tramite scroll-margin-top.

Quando il link di ancoraggio non funziona

Se toccando la scheda non rilevi movimento o la schermata si ferma nel punto sbagliato, verifica queste cinque cause comuni:

1. ID rigenerato dopo modifiche al tema: Se utilizzavi un ID generato (shopify-section-...), riorganizzare la sezione ha creato un nuovo codice. Usa Custom Liquid.

2. ID duplicati nella pagina: Se più blocchi condividono lo stesso ID, il browser salterà solo al primo. Verifica che l’ID sia univoco nell’intera pagina.

3. Widget di app esterne: Le sezioni caricate da app di terze parti spesso non permettono di modificare l’ID. Inserisci un tag vuoto <div id="reviews"></div> subito sopra.

4. Spostamenti da caricamento ritardato: Sezioni ricche di immagini differite possono alterare l’altezza. Tocca la scheda una seconda volta per verificare se la posizione si corregge.

5. Menu a cassetto aperto: Se un menu a scomparsa per dispositivi mobili resta aperto, copre la schermata. Accertati che il tocco della scheda lo chiuda automaticamente.

Link di ancoraggio o pagina/collezione separata

Sebbene collegare una scheda a una sezione della homepage crei una comoda scorciatoia, non è sempre la soluzione migliore. Scegliere tra un salto sulla stessa pagina e una pagina dedicata richiede di bilanciare indicizzazione SEO ed ergonomia mobile.

I link ad ancora sono ottimali per contenuti da homepage, come testimonianze, lookbook o brevi FAQ. Gli acquirenti consultano i segnali di affidabilità subito, senza ricaricare la pagina o perdere la posizione.

Tuttavia, per la visibilità SEO, i frammenti sono inadeguati. Google generalmente non supporta i frammenti per indicizzare contenuti separati (rif. Linee guida sugli URL di Google Search Central). Non aspettarti che /#reviews compaia nei risultati di ricerca come pagina a sé. Se vuoi posizionare archivi di recensioni, crea URL dedicate (quali /pages/reviews o /collections/all).

Le barre inferiori nascono per alternare viste di primo livello. Troppi salti ad ancore appesantiscono l’interfaccia. Limita le ancore a una o due schede al massimo. Per approfondire, consulta la nostra guida sulla navigazione oltre il menu hamburger.

Il ruolo di Navi+

Se gestisci la barra con la Tab Bar di Navi+ per Shopify, lo scorrimento verso una sezione è supportato nativamente.

Nel pannello di Navi+, ogni scheda offre un campo Link To. Nei piani Business ed Elite, supporta la sintassi scroll:OnPage(#reviews), attivando uno scorrimento fluido verso il selettore CSS indicato.

Navi+ adotta convenzioni chiare: lasciare vuoto il campo Link To rimanda alla homepage. I link interni impiegano percorsi brevi privi del dominio, come /collections/all. Il simbolo # singolo serve solo per espandere sottomenu senza navigare: non confonderlo con scroll:OnPage(#reviews).

Anche con la sintassi dell’app, i principi di base restano immutati: la sezione deve avere un ID stabile (Passaggio 1) e devi calibrare l’offset dell’intestazione fissa con scroll-margin-top su smartphone (Passaggio 3). Poiché scroll:OnPage scorre fino a un elemento della pagina corrente, prova la scheda dalla homepage e da altre pagine prima di farci affidamento.

Se utilizzi la Tab Bar di Navi+, inserisci scroll:OnPage(#reviews) nel campo Link To della scheda e verifica il risultato sul tuo smartphone: l’elenco completo dei collegamenti supportati è disponibile nel centro assistenza di Navi+. Esplora la guida sui tipi di link di Navi+ per i dettagli.

Checklist operativa

• Scegli la sezione della homepage verso cui indirizzare gli utenti.
• Inserisci un blocco Custom Liquid vuoto (<div id="reviews"></div>) per un ID stabile.
• Imposta il link della scheda su /#your-id (o sintassi dell’app come scroll:OnPage).
• Aggiungi html { scroll-behavior: smooth; } nel CSS per lo scorrimento fluido.
• Applica scroll-margin-top nel CSS per evitare che l’intestazione copra il titolo.
• Esegui il test su smartphone sia dalla homepage sia da una scheda prodotto.
• Registra l’ID nelle note del negozio per non rimuovere il blocco durante future modifiche.

Domande frequenti (FAQ)

Dove trovo l’ID di una sezione su Shopify?

Ogni sezione è racchiusa in un div con un ID del tipo shopify-section-.... Visualizzalo facendo clic destro su Ispeziona elemento da desktop.

Perché il mio link di ancoraggio ha smesso di funzionare?

Shopify genera ID dinamici nei modelli JSON. Se la sezione viene ricreata, l’ID cambia. Un ID personalizzato tramite Custom Liquid assicura stabilità.

Perché il titolo della sezione resta coperto dall’intestazione dopo il salto?

Il browser allinea l’elemento in cima alla finestra e l’intestazione fissa lo copre. Aggiungere scroll-margin-top nel CSS crea lo spazio necessario.

Posso utilizzare lo stesso ID due volte all’interno della stessa pagina?

No. Lo standard HTML impone che l’attributo id sia rigorosamente univoco nell’intero documento. Riutilizzare gli ID causa salti imprevisti.

Google indicizzerà /#reviews come una pagina a sé stante?

No. Google non supporta i frammenti URL per indicizzare contenuti separati. Se desideri il posizionamento, crea una pagina o collezione dedicata.

Navi+ supporta il collegamento di una scheda a una sezione?

Sì. Nella Tab Bar di Navi+, inserisci scroll:OnPage(#section-id) nel campo Link To per lo scorrimento fluido tramite selettore CSS (Business ed Elite).

Fonti

• Shopify Developer Documentation: Liquid Objects: Section
• Shopify Developer Documentation: Section Rendering API
• MDN Web Docs: HTML id attribute
• MDN Web Docs: Element: scrollIntoView() method
• MDN Web Docs: CSS scroll-behavior
• Google Search Central: URL Structure Guidelines
• FoxEcom Zest Theme Documentation: Mobile Navigation Bar
• Navi+ Help Center: Menu Item Link Types