Questa pagina visualizza un gruppo di prodotti o contenuti correlati.
Con Concept , un tema Shopify OS 2.0 , hai la possibilità di aggiungerevarie sezioni su ogni pagina. Ciò significa che puoi personalizzare completamente l'aspetto della pagina della tua collezione aggiungendo le sezioni che desideri. Basta fare clic sul pulsante Aggiungi sezione e scegliere le sezioni che desideri vengano visualizzate sulla tua pagina. Con questo, puoi creare una pagina di raccolta visivamente accattivante che manterrà i tuoi visitatori coinvolti e informati.
Per impostazione predefinita, le pagine di raccolta hanno le seguenti sezioni:
- Bandiera della raccolta
- Griglia del prodotto
- Immagini con testo sovrapposto
- Visualizzato recentemente
1. Banner di raccolta
| Descrizione | ||
|---|---|---|
| Bandiera della raccolta Aggiungi una descrizione o un'immagine modificando la tua raccolta. Saperne di più . | ||
| Consenti intestazione trasparente | Consente di visualizzare l'intestazione trasparente. Questa impostazione si applica solo quando questa sezione è la prima. | |
| Mostra l'immagine della collezione | Consente di mostrare le immagini della raccolta. Per ottenere risultati ottimali, utilizza un'immagine con proporzioni 16:9. Saperne di più . | |
| Immagine | Scegli/Carica l'immagine della sezione. Per impostazione predefinita è l'immagine della raccolta. | |
| Altezza del tavolo | Determina l'altezza dell'immagine quando viene visualizzata sul desktop:
| |
| Posizione del contenuto del desktop | Imposta la posizione del contenuto sul desktop: | |
| Allineamento dei contenuti del desktop | Imposta l'allineamento del contenuto sul desktop: | |
| Disposizione mobile | ||
| Altezza mobile | Determina l'altezza dell'immagine quando viene visualizzata su dispositivo mobile:
| |
| Posizione dei contenuti mobili | Imposta la posizione del contenuto sul browser mobile: | |
| Allineamento dei contenuti mobili | Imposta l'allineamento del contenuto sul browser mobile: | |
| Colore | Facoltativamente è possibile personalizzare i colori della sezione, inclusi i seguenti:
| |
| Sezione | ||
| Puoi regolare il riempimento superiore e il riempimento inferiore da 0px a 120px con incrementi di 4px. | ||
| Mostra divisore di sezione | Mostra un divisore di linea sopra questa sezione. | |
| Rendi la sezione a larghezza intera | Rende il contenitore a tutta larghezza. | |
| Rendi la sezione arrotondata | Applica un bordo arrotondato ai due angoli superiori. | |
| Abilita l'effetto parallasse | Abilita l'effetto parallasse, che crea l'illusione della profondità in un'immagine o scena bidimensionale. La direzione della parallasse può essere scelta tra le 3 seguenti opzioni: | |
| CSS personalizzato | Aggiunge CSS personalizzato a questa sezione. | |
Blocchi disponibili:
- 1.1 Titolo della raccolta
- 1.2 Descrizione della collezione
- 1.3 Pangrattato
- 1.4 Spazio vuoto
1.1 Le impostazioni per il cartiglio Collezione.
La dimensione del testo può essere impostata su una delle seguenti opzioni:
1.2 Le impostazioni per il blocco Descrizione collezione.
| Descrizione | ||
|---|---|---|
| Descrizione della collezione | ||
| Dimensione del testo | La dimensione del testo può essere impostata su una delle seguenti opzioni: L'opzione personalizzata ti consente di impostare la dimensione del testo su qualsiasi valore desideri, da 12px a 128px, aumentando aritmeticamente di 2px. | |
| Carattere del testo | Scegli tra 2 opzioni per la formattazione del testo: Corpo o Intestazione . | |
| Usa il colore secondario | Consente di visualizzare il colore secondario. | |
1.3 Le impostazioni per il blocco breadcrumb.
Consente di mostrare la pagina delle raccolte nell'elenco breadcrumb.
1.4 Le impostazioni per il blocco Spazio vuoto.
| Descrizione | ||
|---|---|---|
| Spazio vuoto | ||
| Altezza del tavolo | Determina l'altezza dello spazio vuoto quando visualizzato sul desktop. Può variare da 0px a 120px, aumentando aritmeticamente di 4px. L'impostazione predefinita è 40px. | |
| Altezza mobile | Determina l'altezza dello spazio vuoto quando visualizzato su dispositivo mobile. Può variare da 0px a 120px, aumentando aritmeticamente di 4px. L'impostazione predefinita è 28px. | |
2. Griglia prodotti
| Impostazioni della sezione | Impostazioni | Descrizione |
|---|---|---|
| Griglia del prodotto | ||
| Prodotti per pagina | Il numero di prodotti mostrati nella pagina, modificato da 6 a 50. | |
| Numero di colonne sul desktop | Il numero di colonne mostrate nella pagina, regolato da 1 a 5. | |
| Numero di colonne su dispositivi mobili | Personalizza il numero di colonne visualizzate sul browser mobile: 1 colonna o 2 colonne . | |
| Filtraggio e ordinamento | ||
| Abilita il filtraggio | Consente ai clienti di filtrare i prodotti della collezione in base ai filtri nelle impostazioni di Navigazione. Personalizza i filtri con l'app Search & Discovery. Saperne di più . | |
| Comprimi filtri | Abilita i filtri di compressione. | |
| Disposizione dei filtri sul desktop | Scegli il layout del filtro desktop che preferisci: Barra laterale o Cassetto . | |
| Abilita campioni di colore | Abilita i campioni di colore. Visualizza le istruzioni di configurazione . | |
| Abilita l'ordinamento | Consente ai clienti di ordinare i prodotti della collezione in base a quanto segue:
| |
| Sezione | ||
| Può regolare l'imbottitura nell'imbottitura superiore e nell'imbottitura inferiore da 0px a 120px, aumentando aritmeticamente di 4px. | ||
| Mostra divisore di sezione | Mostra un divisore di linea sopra questa sezione. | |
| Rendi la sezione a larghezza intera | Rende il contenitore a tutta larghezza. | |
| Rendi la sezione arrotondata | Applica un bordo arrotondato ai due angoli superiori. | |
| CSS personalizzato | Aggiunge CSS personalizzato a questa sezione. | |
Blocchi disponibili:
- 2.1 Descrizione della collezione
- 2.2 Sottoraccolte
- 2.3 Promozione
2.1 Le impostazioni per il blocco Descrizione collezione.
Nessuna impostazione personalizzabile disponibile.
2.2 Le impostazioni per il blocco Sottoraccolta.
| Impostazioni di blocco | Descrizione | |
|---|---|---|
| Sottoraccolte I collegamenti alle raccolte dal tuo menu verranno visualizzati qui. Saperne di più . | ||
| Menù | Sceglie/seleziona il menu che si desidera visualizzare. | |
| Sottoraccolte per riga | Sceglie il numero di sottoraccolte da visualizzare per riga, da 2 a 5. | |
| Mostra il conteggio della raccolta | Visualizza il numero di prodotti in ciascuna collezione. | |
2.3 Le impostazioni per il blocco Promozione.
| Impostazioni di blocco | Descrizione | |
|---|---|---|
| Promozione I blocchi potrebbero essere nascosti se non sono visibili abbastanza prodotti. | ||
| Posizione nella griglia | Le coordinate del blocco nella griglia, da sinistra a destra e dall'alto in basso. | |
| Immagine | Scegli/carica l'immagine del blocco. | |
| Icona | Scegli/carica l'immagine dell'icona. | |
| Intestazione | Il titolo del blocco. | |
| Descrizione | Il testo descrittivo dell'intestazione viene posizionato sotto l'intestazione. | |
| Etichetta del pulsante | Il testo visualizzato sul pulsante. | |
| Collegamento pulsante | L'URL del pulsante. | |
| Posizione del contenuto del desktop | Imposta la posizione del contenuto sul desktop: | |
| Allineamento dei contenuti del desktop | Imposta l'allineamento del contenuto sul desktop: | |
| Disposizione mobile | ||
| Immagine mobile | Immagine della sezione sul browser mobile. | |
| Posizione dei contenuti mobili | Imposta la posizione del contenuto sul browser mobile: | |
| Allineamento dei contenuti mobili | Imposta l'allineamento del contenuto sul browser mobile: | |
| Colore | Facoltativamente è possibile personalizzare i colori della sezione, inclusi i seguenti:
| |
3. Immagini con testo
Questa sezione ti consente di visualizzare fino a 5 immagini contemporaneamente fornendo una maggiore flessibilità di progettazione per la tua pagina.
| Impostazioni della sezione | Descrizione | |
|---|---|---|
| Immagini con testo sovrapposto | ||
| Consenti intestazione trasparente | Questa impostazione si applica solo quando questa sezione è la prima | |
| Altezza del tavolo | Determina l'altezza dell'immagine quando viene visualizzata sul desktop:
| |
| Larghezza del contenuto del desktop | Determina la larghezza dell'immagine quando viene visualizzata sul desktop: | |
| Posizione del contenuto del desktop | Imposta la posizione del contenuto sul desktop: | |
| Allineamento dei contenuti del desktop | Imposta l'allineamento del contenuto sul desktop: | |
| Immagine #1 #2 #3 #4 #5 | Le immagini per la sezione sul browser desktop. | |
| Disposizione mobile | ||
| Altezza mobile | Determina l'altezza dell'immagine quando viene visualizzata su dispositivo mobile:
| |
| Posizione dei contenuti mobili | Imposta la posizione del contenuto sul browser mobile: | |
| Allineamento dei contenuti mobili | Imposta l'allineamento del contenuto sul browser mobile: | |
| Colore | Facoltativamente è possibile personalizzare i colori della sezione, inclusi i seguenti:
| |
| Sezione | ||
| Può regolare l'imbottitura nell'imbottitura superiore e nell'imbottitura inferiore da 0px a 120px, aumentando aritmeticamente di 4px. | ||
| Mostra divisore di sezione | Mostra un divisore di linea sopra questa sezione. | |
| Rendi la sezione a larghezza intera | Rende il contenitore a tutta larghezza. | |
| Rendi la sezione arrotondata | Applica un bordo arrotondato ai due angoli superiori. | |
| Abilita l'effetto parallasse | Abilita la visualizzazione dell'effetto parallasse, che crea l'illusione della profondità in un'immagine o scena bidimensionale. | |
| CSS personalizzato | Aggiunge CSS personalizzato a questa sezione. | |
Blocchi disponibili:
- 3.1 Intestazione
- 3.2 Sottotitolo
- 3.3 Testo
- 3.4 Pulsante
- 3.5 Collegamento
- 3.6 Immagine
- 3.7 Liquido personalizzato
- 3.8 Spazio vuoto
3.1 Le impostazioni per il blocco Titolo.
| Descrizione | ||
|---|---|---|
| Intestazione | ||
| Intestazione | Il titolo del blocco. | |
| Dimensione dell'intestazione | La dimensione dell'intestazione può essere impostata su una delle seguenti opzioni: Piccola , Media , Grande o Molto grande . | |
| Etichetta di intestazione | Seleziona il tag di intestazione per strutturare e organizzare i tuoi contenuti per il SEO. | |
| Testo evidenziato | ||
| Testo evidenziato | Scegli tra una delle 6 opzioni seguenti per formattare il testo:
| |
| Scarabocchio evidenziato Richiede che lo stile del testo evidenziato sia impostato su Scarabocchio disegnato a mano. | Questa impostazione offre 5 modi per evidenziare il testo:
| |
3.2 Le impostazioni per il blocco Sottotitoli.
| Descrizione | ||
|---|---|---|
| Sottotitolo | ||
| Sottotitolo | Il sottotitolo dell'intestazione. | |
| Dimensione del sottotitolo | Dimensione della sottovoce: | |
| Usa il colore secondario | Applica un colore leggermente più chiaro in base al colore del testo. | |
3.3 Le impostazioni per il blocco Testo.
| Descrizione | ||
|---|---|---|
| Testo | ||
| Testo | Aggiunta del testo. | |
| Dimensione del testo | La dimensione del testo può essere impostata su una delle seguenti opzioni: L'opzione personalizzata ti consente di impostare la dimensione del testo su qualsiasi valore desideri, da 12px a 128px, aumentando aritmeticamente di 2px. | |
| Carattere del testo | Scegli tra 2 opzioni per la formattazione del testo: Corpo o Intestazione . | |
| Usa il colore secondario | Abilita colore secondario. | |
| Testo evidenziato | ||
| Testo evidenziato | Scegli tra una delle 6 opzioni seguenti per formattare il testo:
| |
| Scarabocchio evidenziato Richiede che lo stile del testo evidenziato sia impostato su Scarabocchio disegnato a mano. | Questa impostazione offre 5 modi per evidenziare il testo:
| |
3.4 Le impostazioni per il blocco Button.
| Descrizione | ||
|---|---|---|
| Pulsante | ||
| Etichetta del pulsante | Il testo visualizzato sul pulsante. | |
| Collegamento pulsante | L'URL del pulsante. | |
| Dimensione del pulsante | Regola la dimensione del pulsante in 3 opzioni: Piccolo, Medio o Grande | |
| Utilizza lo stile del pulsante di contorno | Utilizza lo stile di struttura per il pulsante. | |
3.5 Le impostazioni per il blocco Link.
| Descrizione | ||
|---|---|---|
| Collegamento | ||
| Testo | Il testo del collegamento, che si trova proprio accanto al pulsante. | |
| Collegamento | Aggiunge l'URL che desideri collegare. | |
3.6 Le impostazioni per il blocco Immagine.
| Descrizione | ||
|---|---|---|
| Immagine | ||
| Immagine | Seleziona un'immagine per il blocco. | |
| Larghezza dell'immagine | Sceglie una delle due opzioni di larghezza dell'immagine:
| |
3.7 Le impostazioni per il blocco liquido personalizzato.
Puoi aggiungere il tuo codice Liquid per creare un blocco personalizzato.
3.8 Le impostazioni per il blocco Spazio vuoto.
| Descrizione | ||
|---|---|---|
| Spazio vuoto | ||
| Altezza del tavolo | Determina l'altezza dello spazio vuoto quando visualizzato sul desktop. Può variare da 0px a 120px, aumentando aritmeticamente di 4px. L'impostazione predefinita è 40px. | |
| Altezza mobile | Determina l'altezza dello spazio vuoto quando visualizzato su dispositivo mobile. Può variare da 0px a 120px, aumentando aritmeticamente di 4px. L'impostazione predefinita è 28px. | |
4. Visti di recente
Aiuta i tuoi clienti a trovare i prodotti che avevano precedentemente visitato e spingerli all'acquisto. In questo modo è più facile per i tuoi clienti ritrovarli piuttosto che orientarsi attraverso il menu di navigazione.
| Descrizione | ||
|---|---|---|
| Visualizzato recentemente | ||
| Numero di prodotti recenti | Il numero di prodotti complementari può variare da 2 a 12. | |
| Numero di colonne sul desktop | Personalizza il numero di colonne visualizzate sul browser desktop da 1 colonna a 5 colonne | |
| Abilita il carosello sul desktop | Visualizza un carosello di prodotti della collezione su un browser desktop. | |
| Disposizione mobile | ||
| Numero di colonne su dispositivi mobili | Personalizza il numero di colonne visualizzate sul browser mobile: 1 colonna o 2 colonne . | |
| Abilita lo scorrimento sul cellulare | Imposta la visualizzazione mobile su una riga con scorrimento orizzontale. | |
| Intestazione | ||
| Intestazione | Il titolo della sezione. | |
| Dimensione dell'intestazione | La dimensione dell'intestazione può essere impostata su una delle seguenti opzioni: Piccola , Media , Grande o Molto grande . | |
| Allineamento della rotta | L'intestazione può essere allineata a sinistra , al centro o a destra . | |
| Etichetta di intestazione | Seleziona il tag di intestazione per strutturare e organizzare i tuoi contenuti per il SEO. | |
| Sottotitolo | Il sottotitolo dell'intestazione è posizionato sopra l'intestazione. | |
| Descrizione | Il testo descrittivo dell'intestazione viene posizionato sotto l'intestazione. | |
| Testo evidenziato | ||
| Testo evidenziato | Scegli tra una delle 6 opzioni seguenti per formattare il testo:
| |
| Scarabocchio evidenziato Richiede che lo stile del testo evidenziato sia impostato su Scarabocchio disegnato a mano. | Questa impostazione offre 5 modi per evidenziare il testo:
| |
| Colore | Facoltativamente è possibile personalizzare i colori della sezione, inclusi i seguenti:
| |
| Sezione | ||
| Può regolare l'imbottitura nell'imbottitura superiore e nell'imbottitura inferiore da 0px a 120px, aumentando aritmeticamente di 4px. | ||
| Mostra divisore di sezione | Mostra un divisore di linea sopra questa sezione. | |
| Rendi la sezione a larghezza intera | Rende il contenitore a tutta larghezza. | |
| Rendi la sezione arrotondata | Applica un bordo arrotondato ai due angoli superiori. | |
| CSS personalizzato | Aggiunge CSS personalizzato a questa sezione. | |
Questa sezione non supporta l'aggiunta di blocchi.
Speriamo che questo articolo sia stato utile. Se hai domande o dubbi su questa funzionalità, non esitare a contattare il nostro team per ricevere supporto.
