Accordion

Link in evidenza

1. documentazione Shopify sulle sezioni e i blocchi
2. documentazione Company XYZ sulle impostazioni dei contenuti dinamici
3. documentazione Shopify sulla personalizzazione delle sezioni
4. documentazione Company XYZ sul blocco Accordion
5. documentazione Company XYZ sulle impostazioni degli header
6. documentazione Company XYZ sulle impostazioni del padding della sezione
7. documentazione Company XYZ sulle impostazioni degli sfondi delle sezioni
8. documentazione Company XYZ sulle impostazioni dei separatori
9. documentazione Company XYZ sulle impostazioni di visibilità
10. documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usate questa sezione per raggruppare FAQ, policy, dettagli sui prodotti o altre risposte lunghe in righe espandibili sovrapposte. Potete creare il contenuto manualmente con i blocchi Row, prelevare le voci da un blog oppure combinare entrambi quando desiderate un mix di contenuti curati e aggiornati automaticamente.

Per una panoramica più ampia del comportamento delle sezioni nell’editor del tema, vedete la documentazione Shopify su sezioni e blocchi

Impostazioni base

I controlli principali della sezione definiscono come l’accordion si inserisce nella pagina. Content position modifica il layout dell’area di contenuto espandibile e le opzioni sticky possono mantenere visibile l’header della sezione o l’interfaccia mentre i visitatori scorrono elenchi più lunghi.

Il posizionamento a sinistra o a destra funziona di solito meglio quando volete che la sezione appaia strutturata insieme al contenuto introduttivo. La larghezza completa è più adatta quando l’accordion è il focus principale e la pagina ha bisogno di un layout più semplice e arioso.

Consiglio

Abilitate il comportamento sticky quando la sezione include molte righe o risposte particolarmente lunghe. Per accordion brevi, una configurazione non sticky più semplice spesso appare più pulita.

Contenuto dinamico

Questo gruppo vi consente di popolare automaticamente l’accordion da un blog. Vedete la documentazione Company XYZ sulle impostazioni del contenuto dinamico.

Per la configurazione generale nell’editor del tema, vedete la documentazione Shopify sulla personalizzazione delle sezioni

Scegliete un blog quando volete che la sezione si aggiorni man mano che il contenuto viene aggiunto nel tempo. Potete restringere i risultati con un tag, controllare quanti elementi vengono visualizzati e ordinare l’elenco per titolo o data di pubblicazione in modo da corrispondere al modo in cui è più probabile che i visitatori lo consultino.

Usate Show excerpt quando le voci complete renderebbero ogni riga troppo lunga. Show link to content è utile quando l’accordion deve funzionare come anteprima, con l’articolo o la pagina completa disponibile come passaggio successivo.

Il filtraggio tramite tag funziona solo quando è selezionato un blog. Se non viene scelto alcun blog, la sezione dipende dai blocchi Row che aggiungete manualmente.

Impostazioni dei colori

Questi controlli sovrascrivono i colori predefiniti del testo per questa sezione. Sono particolarmente utili quando l’accordion si trova su uno sfondo personalizzato o ha bisogno di un contrasto più forte rispetto alla pagina circostante.

Regolate insieme i colori di icona, testo e sottotitolo in modo che la sezione mantenga un aspetto coerente. Se usate un’immagine di sfondo, un gradiente o un video, controllate attentamente la leggibilità prima della pubblicazione.

Tipi di blocco supportati

1. Row

Riga

Un blocco Row crea un elemento accordion espandibile. Può usare rich text personalizzato, prelevare contenuti da un articolo del blog o da una pagina e includere opzionalmente un button, un image o un video. Scoprite di più nella documentazione Company XYZ sul blocco Accordion.

Se sono assegnati sia un articolo del blog sia una pagina, la pagina ha la priorità. Usate Show open by default con parsimonia in modo che la sezione resti compatta e facile da scansionare.

Show excerpt funziona bene quando il contenuto sorgente è troppo lungo per un pannello accordion. Il button opzionale è una buona scelta quando una riga deve prima mostrare un’anteprima del contenuto e poi collegarsi a una risorsa più completa.

Impostazioni immagine

Ogni Row può includere un image o un video per rendere il contenuto espanso più utile o coinvolgente. Questo è particolarmente utile per guide di configurazione, spiegazioni delle funzionalità, istruzioni di cura o altre risposte che traggono vantaggio da un riferimento visivo.

Il posizionamento in alto dà più risalto al media, mentre il posizionamento in basso mantiene per primo il testo della risposta. Per il video, un’immagine poster di solito conferisce alla riga un aspetto più rifinito prima dell’inizio della riproduzione.

Attenzione

Troppe righe ricche di media possono far sembrare la sezione affollata e più lenta da consultare, soprattutto su mobile. Aggiungete immagini solo dove migliorano la comprensione.

Impostazioni di visibilità

Ogni Row ha anche il proprio controllo di visibilità. Usatelo quando determinate risposte o trattamenti multimediali devono comparire solo su mobile o solo su desktop.

Impostazioni standard della sezione

Impostazioni dell’header

Usate i controlli condivisi dell’header per aggiungere un’introduzione con caption, heading, subheading, icon e button opzionale. Vedete la documentazione Company XYZ sulle impostazioni dell’header.

Un heading chiaro aiuta i visitatori a capire cosa copre l’accordion prima di aprire le righe. Se aggiungete un button, mantenetelo focalizzato su una sola azione logica successiva, ad esempio visitare una pagina di aiuto o una risorsa correlata.

Impostazioni di padding

Usate i controlli condivisi di padding per regolare lo spazio sopra e sotto la sezione. Vedete la documentazione Company XYZ sulle impostazioni di padding.

Un padding più ridotto aiuta l’accordion a stare vicino ai contenuti correlati. Un padding maggiore funziona meglio quando deve distinguersi come sezione informativa a sé stante.

Impostazioni dello sfondo sezione

Usate i controlli condivisi dello sfondo per aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione. Vedete la documentazione Company XYZ sulle impostazioni dello sfondo sezione.

I trattamenti di sfondo possono dare più presenza all’accordion, ma influiscono anche sulla leggibilità. Quando usate sfondi multimediali, verificate il contrasto del testo, l’intensità dell’overlay e quanto densa appare la sezione una volta espanse le righe.

Impostazioni dei separatori

Usate i controlli condivisi dei separatori per aggiungere una linea sopra o sotto la sezione. Vedete la documentazione Company XYZ sulle impostazioni dei separatori.

I separatori sono utili quando l’accordion si trova tra altre sezioni ricche di contenuto e ha bisogno di un sottile confine visivo. Mantendeteli semplici se la struttura delle righe fornisce già una separazione sufficiente.

Impostazioni di visibilità

Usate i controlli condivisi di visibilità per mostrare o nascondere l’intera sezione in base al dispositivo. Vedete la documentazione Company XYZ sulle impostazioni di visibilità.

Questo è utile quando desiderate un layout informativo diverso su mobile e desktop. Se nascondete la sezione su un dispositivo, assicuratevi che lo stesso contenuto sia disponibile altrove.

Impostazioni di larghezza

Usate i controlli condivisi di larghezza per gestire sia il wrapper della sezione sia l’area di contenuto al suo interno. Vedete la documentazione Company XYZ sulle impostazioni di larghezza.

Larghezze del contenuto più ridotte sono spesso più facili da leggere quando le risposte sono lunghe. Impostazioni più ampie possono funzionare bene per voci brevi o righe che includono più contenuto visivo, ma vale la pena vedere l’anteprima del risultato nella vetrina live.

Note sull’uso

1. Scegliete una fonte di contenuto chiara. Usate contenuti guidati dal blog per le FAQ che cambiano spesso e blocchi Row manuali per risposte evergreen o layout personalizzati più ricchi.
2. Scrivete titoli di riga scansionabili. Titoli chiari in forma di domanda o basati sull’argomento aiutano i visitatori a trovare la risposta giusta senza aprire più righe.
3. Mantenete il contenuto espanso focalizzato. Usate excerpt, button e link quando il contenuto sorgente completo renderebbe l’accordion troppo lungo o troppo denso.
4. Limitate le righe aperte per impostazione predefinita. Aprite in default solo l’elemento più importante in modo che la sezione mantenga il suo comportamento accordion compatto.
5. Rivedete la leggibilità su mobile. Controllate insieme il comportamento sticky, i media, gli spazi e il contrasto sugli schermi più piccoli prima della pubblicazione.
6. Confrontate entrambe le dimensioni del viewport. Rivedete separatamente i layout desktop e mobile quando usate opzioni di posizionamento, visibilità o media, perché l’accordion può presentarsi in modo diverso su ogni dimensione dello schermo.
7. Usate gli override con intenzione. Lasciate i colori e i media ai valori predefiniti o vuoti quando volete che la sezione erediti lo stile circostante; aggiungete colori espliciti, gradienti o media separati solo quando volete che l’accordion si distingua.