Come trovare il selettore CSS di una sezione della homepage per un link a scheda (Shopify)

Risposta rapida

Apri la tua homepage attiva, fai clic con il tasto destro sulla sezione e seleziona Ispeziona. Trova il contenitore il cui ID inizia con shopify-section-, anteponi un # ed esegui $$('#questo-id').length nella Console. Se il valore restituito è 1, il selettore rappresenta una destinazione di scorrimento utilizzabile.

Nel configurare una barra a schede inferiore o un menu mobile, i merchant trovano spesso un campo che richiede un «selettore CSS». Poiché i browser eseguono lo scorrimento individuando i nodi corrispondenti nel DOM del negozio, inserire un selettore impreciso o duplicato farà saltare la scheda nel punto sbagliato o non produrrà alcun movimento. Verificare il selettore con gli strumenti di sviluppo assicura una navigazione impeccabile prima di pubblicare le modifiche.

Selettore, ID di sezione e ancore: di cosa ha bisogno il link della scheda

Prima di inserire stringhe di codice nelle impostazioni di navigazione, è opportuno distinguere tre concetti correlati: un selettore CSS, un ID HTML di sezione e un link di ancoraggio. Le app di navigazione e i temi utilizzano queste etichette in modi diversi, e l’impiego di una sintassi errata interromperà il collegamento.

Un selettore CSS è un modello impiegato da stili e script per identificare uno o più elementi HTML. Esempi tipici sono #reviews (che punta all’elemento con ID esatto reviews) o .featured-collection (che seleziona qualsiasi elemento dotato di tale classe). Secondo le specifiche dell’attributo id su MDN Web Docs, un attributo id deve essere univoco nell’intero documento. Anche la documentazione tecnica di Section Store ribadisce questo principio: un ID appartiene a un solo elemento e garantisce quindi di atterrare sempre nel punto corretto.

Un link di ancoraggio (anchor link), al contrario, è un URL completo o relativo contenente un identificatore di frammento, come /#reviews. I browser leggono il simbolo cancelletto # nella barra degli indirizzi e scorrono verso l’elemento associato a quell’ID. Se la tua app di navigazione offre un campo specifico per un «selettore CSS», essa richiede un’espressione di selezione (come #reviews) e non un intero indirizzo web. Per i negozi che configurano collegamenti URL convenzionali con frammento, invitiamo a consultare la nostra guida dedicata alle ancore per schede mobili.

Portare gli utenti su smartphone direttamente alle sezioni chiave della homepage è un elemento essenziale dell’architettura della barra a schede mobile. La seguente tabella illustra le differenze sul piano pratico:

Passaggio 1: Ispeziona la sezione sul tuo negozio online attivo

Per trovare il selettore più appropriato, osserva il tuo negozio esattamente come fa un cliente, evitando di operare all’interno dell’editor del tema Shopify. La pagina online è quella che i clienti caricano davvero, quindi è il posto più sicuro per leggere il markup reale.

Apri una nuova scheda del browser, visita la homepage attiva del negozio e raggiungi la sezione desiderata (ad esempio le recensioni dei clienti, una raccolta in evidenza o un blocco FAQ). Fai clic con il tasto destro sul titolo o sullo sfondo della sezione e seleziona Ispeziona (Inspect).

In alternativa, puoi avviare gli strumenti per sviluppatori tramite scorciatoie da tastiera:

• macOS: Premi Cmd + Option + C (Chrome DevTools Open)
• Windows: Premi Ctrl + Shift + C (Chrome DevTools Open)

Scorciatoie per aprire l'ispettore degli elementi:
macOS:   Cmd + Option + C
Windows: Ctrl + Shift + C

Individua il contenitore shopify-section

All’apertura del pannello Elementi, l’ispettore evidenzia la riga di testo o l’immagine specifica su cui hai fatto clic. Per creare una destinazione affidabile, risali l’albero del DOM fino a individuare il tag che racchiude l’intera sezione.

1. Nel pannello Elementi, sposta il cursore verso l’alto lungo i nodi padre.
2. Cerca un contenitore esterno—di norma un tag <div>—che racchiuda l’intera sezione.
3. Individua il suo attributo id. Nei negozi Shopify, questo ID inizia abitualmente con shopify-section-.

Come indicato nella documentazione ufficiale di Shopify sull’oggetto Section, gli ID delle sezioni incluse nei template JSON vengono generati dinamicamente dalla piattaforma. Un ID può assomigliare a shopify-section-template--18492048593__featured_collection, ma il tuo sarà diverso: copialo dalla tua pagina.

<!-- Esempio di contenitore di sezione Shopify -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
  <!-- Il contenuto della sezione viene visualizzato qui -->
</div>

Trasforma la riga in un selettore (# per ID, . per classe)

Una volta individuato il contenitore, converti l’attributo HTML in una sintassi CSS corretta:

• Se utilizzi il valore dell’id, anteponi un cancelletto #: #shopify-section-template--18492048593__reviews
• Se utilizzi una class, anteponi un punto .: .featured-reviews-grid
• Se un elemento possiede più classi separate da spazi, uniscile con punti: div.shopify-section.reviews-container

Chrome DevTools mette a disposizione anche una comoda scorciatoia: fai clic con il tasto destro sul nodo evidenziato nell’albero, seleziona Copy e clicca su Copy JS Path (Chrome DevTools DOM). Chrome copierà negli appunti un’istruzione:

document.querySelector("#shopify-section-template--18492048593__reviews")

Estrai il testo compreso tra le virgolette. Questa stringa rappresenta il tuo selettore candidato. Prima di applicarlo alla tua barra di navigazione, devi verificare che punti in modo esclusivo a questa sezione.

Passaggio 2: Verifica che il selettore corrisponda esattamente a un elemento

Un errore comune è presumere che qualsiasi selettore ricavato da DevTools funzioni senza problemi. Se il selettore fa riferimento a più sezioni contemporaneamente o non trova riscontro su schermi mobili, la barra a schede non funzionerà come previsto.

Le indicazioni tecniche di UpCharge suggeriscono di cercare sempre classi o ID univoci per definire le posizioni. Verificare l’univocità con gli strumenti per sviluppatori integrati è rapido.

Cerca nel pannello Elementi (Ctrl/Cmd+F)

Il primo controllo rapido avviene direttamente all’interno dell’albero DOM. Come riportato nella documentazione di Chrome DevTools DOM, è possibile eseguire ricerche nell’albero DOM per stringa, selettore CSS o percorso XPath.

1. Fai clic all’interno del pannello Elementi.
2. Premi Ctrl + F (Windows) o Cmd + F (macOS) per aprire la barra di ricerca in basso.
3. Incolla il selettore candidato comprensivo di cancelletto # (ad esempio #shopify-section-template--18492048593__reviews).
4. Esamina il contatore delle corrispondenze a destra (ad esempio 1 of 1).

Controllo di ricerca nel pannello Elementi:
Espressione: #shopify-section-template--18492048593__reviews
Risultato atteso: 1 of 1

Se il conteggio indica 1 of 1, il selettore fa riferimento a un unico nodo nel documento.

Conta le corrispondenze nella Console

Per una verifica tecnica inequivocabile sul fronte degli script, spostati sulla scheda Console di DevTools.

In base alla Console Utilities API di Chrome DevTools, la funzione $$(selector) restituisce un array contenente tutti gli elementi conformi al selettore CSS inserito. Puoi in alternativa utilizzare il metodo standard document.querySelectorAll(selector) (MDN querySelectorAll).

Digita uno dei seguenti comandi nella console e premi Invio:

$$('#shopify-section-template--18492048593__reviews').length

document.querySelectorAll('#shopify-section-template--18492048593__reviews').length

Analizza il valore numerico restituito:

Ripeti questo test in modalità di simulazione mobile. Clicca sull’icona Toggle device toolbar in DevTools. Diversi temi Shopify caricano blocchi separati per desktop e dispositivi mobili, il che può causare la sparizione o la moltiplicazione dei selettori su smartphone.

Illustrazione del concetto: Verifica del conteggio delle corrispondenze nella console per accertare che il selettore punti a un unico elemento.

Passaggio 3: Scegli un selettore che resista alle modifiche del tema

Sebbene l’ID generato automaticamente che inizia con shopify-section- consenta verifiche veloci, farvi affidamento a lungo termine comporta rischi concreti.

Nell’architettura Online Store di Shopify, gli ID delle sezioni caricate mediante template JSON sono generati dinamicamente dalla piattaforma (Shopify Section Object). Lo sviluppatore di temi Fluorescent chiarisce questo aspetto: “Shopify dynamically generates ids for sections but these ids are not stable.” (Shopify genera dinamicamente gli ID delle sezioni, ma questi ID non sono stabili). Poiché questi ID non sono stabili, un collegamento di scheda basato su di essi può smettere di funzionare dopo modifiche al layout, quindi ricontrollalo dopo ogni cambiamento.

Evita anche percorsi articolati su più livelli come div:nth-child(4) > div.grid > div:first-child. Una minima variazione nella struttura della pagina può invalidare questi selettori.

La soluzione sicura: aggiungere un blocco ID con Custom Liquid

Per disporre di un selettore permanente che rimanga invariato durante ogni aggiornamento grafico, assegna un ID personalizzato nell’editor del tema:

1. Nel pannello di amministrazione Shopify, vai su Negozio online > Temi.
2. Duplica il tema attivo per disporre di un backup di sicurezza prima di operare modifiche.
3. Fai clic su Personalizza sul tema di lavoro.
4. Nel layout della homepage, clicca su Aggiungi sezione o Aggiungi blocco subito sopra la sezione da raggiungere.
5. Seleziona Custom Liquid (o Custom HTML, a seconda del tema).
6. Inserisci un tag HTML minimale con l’ID prescelto:

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

Utilizza solo lettere minuscole e trattini (ad esempio recensioni-clienti, sezione-faq o bestseller). In base alle linee guida dell’attributo id di MDN, questo attributo deve essere unico nell’intera pagina.

Il tutorial video seguente a cura di EcomGraduates illustra come ispezionare le sezioni e inserire ID di ancoraggio personalizzati nei layout Shopify:

Casi complessi: nessun ID chiaro, sezioni nidificate e caratteri speciali

Alcune configurazioni dei negozi possono rendere meno immediata l’individuazione di un selettore pulito. Procedere con metodo aiuta a evitare errori.

Sezione priva di un ID esplicito

Alcune sezioni personalizzate o realizzate con costruttori di pagine esterni non mostrano ID standard sul contenitore esterno. Anziché concatenare classi CSS fragili—soggette a modifiche impreviste a ogni ritocco grafico—, adotta la procedura Custom Liquid descritta al Passaggio 3. L’inserimento di <div id="tuo-id"></div> sopra la sezione offre un punto di arrivo inequivocabile senza dover modificare i file liquid del tema.

Sezioni nidificate e blocchi di app

Quando vuoi raggiungere un blocco applicativo situato dentro una sezione nativa (come un widget di recensioni inserito in una griglia prodotto), mirare al contenitore interno dell’app può portare in un punto inatteso, quindi provalo sempre. È consigliabile puntare al contenitore esterno shopify-section o disporre il blocco di ancoraggio direttamente sopra la sezione.

Sezioni visualizzate solo su desktop o solo su mobile

Molti store utilizzano banner distinti per desktop e dispositivi mobili. Se la sezione desktop ha un ID ma quella mobile utilizza un blocco differente, la scheda fallirà sugli smartphone. Ispeziona sempre la pagina nella modalità mobile di DevTools e indirizza il selettore al componente visibile su telefoni.

Caratteri particolari ed escape CSS

Come documentato su MDN querySelector, se il valore di una classe o di un ID non è un identificatore CSS standard (ad esempio ID che iniziano con cifre o contengono due punti, punti o punti interrogativi), esso deve essere trattato con CSS.escape(). Un identificatore come 123-reviews richiede apposito escape nel codice CSS.

Per scongiurare anomalie nelle app di navigazione, evita i caratteri speciali. Utilizza unicamente lettere minuscole, cifre e trattini, ed evita virgolette o parentesi nei campi di input dei link.

Usa il selettore come destinazione di scorrimento della scheda

Dopo aver verificato che il selettore si riferisce a un unico elemento, puoi procedere alla configurazione della barra a schede mobile.

Verifica preventivamente la documentazione della tua app o del tuo tema per accertarti se il campo del collegamento richieda un URL con frammento di ancoraggio (come /#reviews) o un’espressione di selettore CSS pura (come #reviews).

Se l’applicazione prevede un campo per il selettore:

1. Incolla il selettore validato al Passaggio 2 (ad esempio #reviews o #shopify-section-template--custom).
2. Assicurati che rispetti la sintassi richiesta dall’app.
3. Salva la configurazione del menu.

Ricorda che le funzioni di scorrimento agiscono sul documento attivo. Se un visitatore tocca una scheda configurata con un selettore interno mentre si trova su una pagina di prodotto o di collezione, la query restituirà null (MDN querySelector) e non si verificherà alcuno scorrimento. Testa sempre il link partendo dalla homepage.

Registri gli ID creati nella documentazione tecnica interna del negozio, così che nessuno rimuova accidentalmente il blocco Custom Liquid in occasione di successive revisioni grafiche.

Risoluzione dei problemi: la scheda non scorre, finisce sotto l’intestazione o sbaglia punto

Se lo scorrimento della scheda non si comporta come desiderato su mobile, esamina queste casistiche ricorrenti:

La scheda non produce alcuno scorrimento

Apri la console sulla homepage attiva ed esegui nuovamente $$('#tuo-selettore').length. Se il conteggio è 0, l’elemento non è presente nella pagina corrente, l’ID è stato modificato in seguito alla pubblicazione di una versione del tema oppure il selettore contiene un refuso. La presenza di un selettore non corrispondente genera null e interrompe l’esecuzione (MDN querySelector).

La scheda scorre nel punto sbagliato

Se toccando la scheda la schermata salta in cima o in fondo alla pagina anziché alla sezione prefissata, il selettore intercetta più elementi. In tale circostanza, querySelector seleziona sempre la prima occorrenza nel DOM (MDN querySelector). Avvaliti della console per isolare gli ID duplicati e rimpiazzali con un ID Custom Liquid univoco.

Il titolo della sezione è coperto dall’intestazione fissa

Per impostazione predefinita, le istruzioni di scorrimento del browser allineano il margine superiore dell’elemento con il bordo superiore della finestra. Se il negozio adotta un’intestazione fissa o sticky, quest’ultima si sovrapporrà al titolo della sezione.

La documentazione MDN scrollIntoView specifica che è possibile stabilire una distanza tramite la proprietà CSS scroll-margin-top: “To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.” (Per definire una spaziatura personalizzata, utilizzare scroll-margin-top o scroll-margin-bottom. Ciò è spesso utile quando nella pagina è presente un’intestazione fissa).

Misura l’altezza dell’intestazione in DevTools e assegna un margine appropriato nel CSS personalizzato del tema:

/* Creare spazio sotto l'intestazione fissa su mobile */
#reviews {
  /* Replace 80px with your own header height */
  scroll-margin-top: 80px;
}

Un menu laterale (drawer) aperto blocca la visualizzazione

Se la barra a schede coesiste con un menu a scomparsa, toccare una scheda mentre il pannello è ancora aperto può generare anomalie di visualizzazione. L’adozione dei criteri ottimali per un menu drawer mobile permette la chiusura automatica dei pannelli sovrapposti all’attivazione di un link esterno.

Il caricamento differito (lazy-load) delle immagini sposta il punto di arrivo

Qualora la homepage presenti immagini pesanti al di sopra della sezione desiderata, il caricamento asincrono può ricalcolare le dimensioni della pagina a scorrimento già terminato, spostando leggermente la sezione. Effettua il test di scorrimento quando tutti i contenuti multimediali risultano interamente caricati.

Illustrazione del concetto: Risoluzione della sovrapposizione dell’intestazione fissa sul titolo di sezione tramite la proprietà CSS scroll-margin-top.

Compromessi: quando il selettore non è la soluzione corretta

Benché lo scorrimento verso una sezione offra un’esperienza gradevole su un’unica schermata, non sempre rappresenta la scelta architettonica più efficace per un negozio online.

Contenuti ampi che richiedono una pagina dedicata

Se i contenuti a cui colleghi sono un catalogo prodotti esteso, politiche dettagliate o risposte di supporto approfondite, comprimerli in una sola sezione della homepage li rende più difficili da trovare e condividere. Pagine di collezione o di policy autonome hanno ciascuna un proprio URL, a cui una scheda può puntare direttamente invece di affidarsi a uno scorrimento nella pagina.

Sovraccarico della barra a schede mobile

Una barra a schede inferiore è concepita per facilitare il passaggio rapido tra le aree fondamentali del negozio. Riservare troppe schede a semplici sezioni interne della homepage appesantisce la barra e perde di utilità man mano che l’utente naviga in profondità nel catalogo. Come approfondito nella nostra guida sulla navigazione oltre il menu hamburger, le schede inferiori devono rimanere riservate agli snodi prioritari.

Dipendenza dal tema e oneri di manutenzione

Tutti i selettori ancorati a codice autogenerato del tema richiedono nuove verifiche a ogni cambio di template. Quando le modifiche ai menu nativi diventano complesse da gestire, è utile valutare i limiti dei menu dei temi per capire se una soluzione di navigazione professionale rappresenti una risposta migliore a lungo termine.

Il ruolo di Navi+

Navi+ offre strumenti di navigazione avanzati per i merchant Shopify attraverso i moduli Tab Bar e Mobile Menu. Ciascuna voce dispone di un campo Link To dedicato, in grado di accogliere normali indirizzi web così come comandi operativi speciali.

Per chi desidera uno scorrimento fluido a una sezione specifica, Navi+ supporta la sintassi scroll:OnPage(#section-id), riportata nel centro assistenza ufficiale sotto la dicitura «Scroll to a section by CSS selector» (tipologie di link in Navi+). Questa funzionalità è inclusa nei piani Business ed Elite.

Durante la configurazione, inserisci il selettore univoco verificato al Passaggio 2. Poiché il comando opera sul DOM del documento attualmente aperto, la sezione deve essere fisicamente presente nella pagina visualizzata dall’utente. Esegui sempre le verifiche direttamente su uno smartphone partendo dalla homepage.

Se utilizzi Navi+ Tab Bar, incolla il selettore appena verificato nel campo Link To della scheda come scroll:OnPage(#tuo-id), quindi provalo sul tuo telefono partendo dalla homepage. L’elenco completo dei tipi di link è disponibile nel centro assistenza Navi+.

Lista di controllo operativa

Segui questa checklist in 7 punti per individuare e attivare correttamente il selettore della tua sezione:

• Apri la homepage attiva sul browser del computer (fuori dall’editor del tema).
• Fai clic con il tasto destro sulla sezione bersaglio, scegli Ispeziona e individua il contenitore esterno il cui ID inizia con shopify-section-.
• Annota l’ID del contenitore e convertilo in selettore anteponendo un #.
• Esegui $$('#tuo-selettore').length nella console di DevTools per assicurarti che il risultato sia esattamente 1.
• Attiva la visualizzazione mobile in DevTools per accertarti che il selettore esista e resti univoco su smartphone.
• Se desideri stabilità a lungo termine, inserisci un blocco Custom Liquid con <div id="tuo-id"></div> sopra la sezione.
• Incolla il selettore verificato nelle impostazioni della scheda, imposta scroll-margin-top se l’intestazione copre il titolo e prova il funzionamento su uno smartphone reale.

Domande frequenti (FAQ)

Dove posso vedere l’ID di una sezione in Shopify?

Gli ID di sezione non sono visibili nel pannello di amministrazione Shopify standard. Per vederli, apri il negozio attivo nel browser, fai clic con il tasto destro sulla sezione, seleziona Ispeziona e leggi l’attributo id sul contenitore esterno shopify-section (Shopify Section Object, MDN querySelectorAll).

Perché il selettore della mia sezione ha smesso improvvisamente di funzionare?

Shopify genera dinamicamente gli ID per i template JSON, e questi identificatori possono variare se la sezione viene modificata o ricreata (Shopify Section Object, Fluorescent). L’aggiunta di un blocco Custom Liquid con un ID fisso assicura una stabilità costante.

Come posso verificare che il mio selettore corrisponda a un solo elemento?

Accedi alla scheda Console negli strumenti per sviluppatori e digita $$(selector).length oppure document.querySelectorAll(selector).length (Chrome DevTools Console Utilities, Chrome DevTools DOM). Il valore 1 convalida l’univocità nel documento attivo.

È consigliabile usare la funzione «Copy selector» di DevTools?

La funzione «Copy selector» o «Copy JS Path» di Chrome rappresenta un punto di partenza utile per i test, ma le lunghe catene di selettori risultanti sono soggette a rotture con i cambi di layout. È molto più affidabile ricondurre l’espressione all’ID univoco della sezione.

Cosa succede se il selettore corrisponde a più sezioni?

Quando un selettore intercetta più elementi, le funzioni JavaScript come querySelector selezionano unicamente il primo elemento nell’ordine del DOM (MDN querySelector). La scheda potrebbe quindi scorrere verso una sezione inattesa collocata più in alto.

Perché il titolo della sezione viene nascosto dall’intestazione dopo lo scorrimento?

I browser allineano la parte superiore dell’elemento al limite superiore dello schermo. Se il negozio presenta un’intestazione fissa, questa si sovrapporrà al titolo. Applicando la proprietà CSS scroll-margin-top alla sezione bersaglio si ottiene la distanza necessaria per una visualizzazione corretta (MDN scrollIntoView).

Fonti

• Shopify Developer Documentation: Section Liquid Object — Approfondimento sulla creazione dinamica degli ID di sezione nei template JSON.
• Fluorescent Documentation: Custom Liquid Developer Guide — Dettagli sull’instabilità degli ID dinamici e l’impiego di ancore con ID personalizzati.
• MDN Web Docs: HTML id global attribute — Standard tecnici che impongono l’univocità dell’attributo ID nell’intero documento.
• MDN Web Docs: Document.querySelector() — Funzionamento del primo elemento intercettato, valori nulli e regole di escape per i selettori.
• MDN Web Docs: Document.querySelectorAll() — Meccanica delle NodeList statiche per il controllo dei selettori.
• MDN Web Docs: Element.scrollIntoView() — Allineamento nel viewport e correzione degli offset con scroll-margin-top.
• Chrome for Developers: Chrome DevTools DOM Inspection — Funzionalità di ricerca nell’albero DOM e copia delle espressioni di nodo.
• Chrome for Developers: Console Utilities API — Guida per la funzione ausiliaria di selezione $$(selector).
• Chrome for Developers: Open Chrome DevTools — Tasti di scelta rapida per avviare la modalità di ispezione.
• Section Store Help: Custom Placement: Finding a CSS Selector — Considerazioni dei vendor sull’univocità degli ID degli elementi.
• UpCharge Help Center: Selector Settings Guide — Consigli pratici per individuare classi e ID univoci.
• Navi+ Help Center: Navigation Item Link Types — Specifiche ufficiali della sintassi scroll:OnPage(#section-id) per i piani Business ed Elite.