Salta ai contenuti

Accordion

Organizza FAQ e dettagli aggiuntivi in pannelli espandibili con media e pulsanti opzionali.

Usi questo blocco per organizzare informazioni più lunghe in pannelli comprimibili, più facili da scansionare. È una scelta pratica per FAQ, dettagli sulla spedizione, istruzioni per la cura, policy o qualsiasi contenuto di supporto che deve restare disponibile senza occupare troppo spazio nella pagina. Per una panoramica più ampia della struttura dei contenuti del tema, consulta documentazione Shopify sulle sezioni e i blocchi

Puoi scrivere i contenuti direttamente nel blocco oppure collegarlo a una pagina o a un post del blog esistente. Consulta la guida all’Accordion.

Inizia con il titolo e il contenuto. Il titolo è l’etichetta cliccabile che i clienti vedono per prima, quindi mantienilo breve e specifico, mentre l’area del contenuto è più adatta per la risposta, la spiegazione o i dettagli di supporto.

Puoi scegliere di mostrare l’accordion aperto per impostazione predefinita. Questa opzione funziona bene quando un elemento è particolarmente importante, ma usarla troppo spesso rende il blocco meno compatto.

Il blocco può anche recuperare contenuti da un post del blog o da una pagina. Questa opzione è utile quando desideri riutilizzare contenuti più lunghi altrove, e puoi anche mostrare facoltativamente l’estratto invece del corpo completo quando un’anteprima più breve è sufficiente. Per assistenza con gli estratti, consulta Estratti.

Se sono assegnati sia una pagina sia un post del blog, la pagina ha la priorità.

Puoi aggiungere un’icona in linea accanto al titolo per dare all’elemento dell’accordion un carattere visivo maggiore o per aiutare a differenziare gli argomenti. Mantieni coerenti le scelte delle icone tra elementi correlati, in modo che il blocco appaia intenzionale e non decorativo. Per la configurazione delle icone, consulta Icone.

Se l’accordion è collegato a contenuti esterni, puoi mostrare automaticamente un link a quei contenuti. Puoi anche aggiungere il tuo testo del pulsante, link, icona e stile quando desideri una call to action più mirata.

Scegli uno stile del pulsante che corrisponda all’importanza dell’azione. Gli stili più evidenti funzionano meglio quando il link rappresenta un vero passo successivo, mentre gli stili più piccoli o più semplici sono adatti a percorsi di lettura secondari. I pulsanti mobili a tutta larghezza possono essere utili quando la facilità di tocco è più importante della sottigliezza visiva.

Puoi aggiungere media opzionali per cambiare l’aspetto e la sensazione del contenuto dell’accordion. I media possono comparire sopra o sotto il testo, a seconda che debbano introdurre il messaggio o supportarlo successivamente.

Usa un’immagine quando desideri un semplice miglioramento visivo, oppure usa un video quando il movimento aiuta a spiegare meglio il contenuto. Se aggiungi un link a un servizio video, usa l’URL del video anziché il codice di incorporamento.

Un’immagine poster è particolarmente utile per i video ospitati perché offre al blocco un primo fotogramma più pulito prima che inizi la riproduzione. Le impostazioni del rapporto di aspetto aiutano a controllare come i media si adattano al layout, e il rapporto separato per dispositivi mobili è utile quando un ritaglio che funziona su desktop risulta troppo alto, troppo stretto o troppo ravvicinato su schermi più piccoli.

L’autoplay e il looping sono in genere più adatti a clip brevi e ambientali piuttosto che a contenuti parlati essenziali. Se i clienti devono ascoltare o controllare il video, mantieni disponibili i controlli e verifica lo stato espanso su schermi più piccoli. Per ulteriori indicazioni, consulta Uso dei video.

Usa i controlli di visibilità per mostrare il blocco su tutti i dispositivi oppure nasconderlo su desktop o su mobile. Questo è utile quando desideri contenuti, testi o scelte di media dell’accordion diverse per schermi più piccoli. Consulta Impostazioni di visibilità.

  1. Mantieni chiari i titoli. Scrivi i titoli come domande o argomenti specifici, in modo che i clienti possano scegliere rapidamente l’elemento giusto da aprire.
  2. Usa una sola fonte di contenuto. Inserisci il testo direttamente per contenuti personalizzati brevi, oppure collega una pagina o un post del blog per contenuti riutilizzabili, ma evita di fare affidamento su entrambi contemporaneamente.
  3. Apri con moderazione. Usa l’opzione aperto per impostazione predefinita solo per un elemento prioritario, soprattutto quando più blocchi accordion sono presenti insieme.
  4. Aggiungi media con uno scopo. Scegli immagini o video solo quando migliorano la comprensione, e verifica il layout espanso sia su desktop sia su mobile prima della pubblicazione.
  5. Rendi significative le azioni. Mostra un pulsante o un link al contenuto solo quando i clienti traggono un reale vantaggio dall’andare a una destinazione più completa.
  6. Aspettati uno stile di fallback. Lasciare i colori o altri valori visivi al loro valore predefinito può preservare l’aspetto circostante, mentre le sostituzioni esplicite rendono l’accordion più indipendente dal resto della pagina.