Aggiungi contenuto - Prodotti

Ultimo aggiornamento: 15 luglio 2024
  • Argomenti:

Creato per:

  • Principiante
  • Intermedio
  • Utente

Utilizza il tipo di contenuto Prodotti per aggiungere un elenco di prodotti alla Page Builder fase, utilizzando un layout griglia o carosello. Utilizzare lo strumento Aggiungi contenuto - Blocco per posizionare il blocco nella fase Page Builder e quindi inserire un elenco di prodotti all'interno del blocco. In alternativa, puoi aggiungere l’elenco dei prodotti direttamente in una riga di una pagina.

Linee guida per l’utilizzo del carosello del prodotto

Il carosello di prodotti offre un modo potente e coinvolgente per mostrare i tuoi prodotti. Per ottenere il massimo da esso, si raccomandano le seguenti linee guida:

  • Aggiungi i caroselli di prodotti direttamente ai contenitori con larghezza di pagina, come righe, schede o layout a una colonna. L’utilizzo di layout a larghezza di pagina garantisce una visualizzazione reattiva dei prodotti. Page Builder riduce il numero di prodotti visualizzati in base alla larghezza della pagina, non alla larghezza del contenitore.

  • Non aggiungere un carosello di prodotti a una colonna stretta. Come indicato, Page Builder determina per impostazione predefinita il numero di prodotti da visualizzare in base alla larghezza della pagina, non alla larghezza della colonna.

  • Se si desidera che il carosello di prodotti scorra automaticamente in modo continuo, impostare Autoplay e Infinite Loop su Yes. Se Riproduzione automatica è impostato su Yes ma Ciclo infinito è impostato su No, lo scorrimento automatico si interrompe alla fine dell'elenco dei prodotti.

  • Impostare Carousel Mode su Continuous per evidenziare, centrare e scorrere un prodotto alla volta all'interno del carosello. Gli altri prodotti sono visibili nell’elenco, ma trasparenti per evidenziare il prodotto centrato.

    Elenco prodotti in modalità carosello continuo

  • Per visualizzare e scorrere fino a cinque prodotti alla volta all'interno del carosello, mantenere Carousel Mode impostato su Default.

    Elenco prodotti in modalità carosello predefinita

Le istruzioni seguenti mostrano come aggiungere un elenco di prodotti a un blocco. Puoi quindi utilizzare un widget per posizionare il blocco in una posizione specifica in qualsiasi pagina dell'archivio.

NOTE
Se si apportano modifiche significative al contenuto di Page Builder, è consigliabile aumentare la durata della sessione di amministrazione per evitare il timeout della sessione mentre si lavora.

Casella degli strumenti Prodotti

StrumentoIconaDescrizione
Sposta Icona Sposta Sposta il contenitore prodotti e il relativo contenuto in un'altra posizione sullo stage.
Impostazioni Icona Impostazioni Apre la pagina Modifica prodotti, in cui è possibile scegliere l'elenco dei prodotti e modificare le proprietà del contenitore.
Nascondi Icona Nascondi Nasconde il contenitore prodotti corrente e il relativo contenuto.
Spettacolo Mostra icona Mostra il contenitore prodotti nascosto e il relativo contenuto.
Duplica Icona duplicata Crea una copia del contenitore dei prodotti e del relativo contenuto.
Rimuovi Icona Rimuovi Elimina dall’area di visualizzazione il contenitore prodotti e il relativo contenuto.
NOTE
Gli elementi nascosti vengono memorizzati nel database e invisibili ai clienti. Tuttavia, questi elementi sono visibili ai motori di ricerca e ad altri bot che eseguono la ricerca per indicizzazione del sito. Vengono inoltre restituiti come parte del contenuto se richiesto tramite una chiamata API con un attributo di invisibilità, a meno che non vengano rimossi dall’area di visualizzazione.

Creare un blocco per l’elenco dei prodotti

  1. Nella barra laterale Admin, passa a Content > Elements>Blocks.

  2. Fare clic su Add New Block.

  3. Immettere Block Title e Identifier.

  4. Scegli Store View dove il blocco deve essere disponibile.

  5. Scorrere verso il basso e fare clic su Edit with Page Builder o nell'area di anteprima del contenuto per aprire l'area di lavoro Page Builder.

  6. Nel pannello Page Builder, espandere Add Content e trascinare un segnaposto Products nell'area di visualizzazione.

    Aggiungi tipo di contenuto prodotti

Configurare il contenitore dell’elenco dei prodotti

Passa il puntatore del mouse sul contenitore Products vuoto per visualizzare la casella degli strumenti e fai clic sull'icona Settings ( Settings ).

Casella degli strumenti prodotti

Completa le Impostazioni in base alle sezioni seguenti:

Aspetto

  1. Per determinare la modalità di visualizzazione dell'elenco dei prodotti nella pagina, scegliere uno dei tipi di aspetto riportati di seguito.

    TipoDescrizione
    Griglia prodottiVisualizza i prodotti all'interno di una griglia che mostra cinque prodotti per riga (per impostazione predefinita), con tutte le righe necessarie per visualizzare il numero immesso nell'impostazione Number of Products to Display.
    Carosello prodottoVisualizza i prodotti all’interno di un carosello (noto anche come dispositivo di scorrimento). Il carosello mostra fino a cinque prodotti per diapositiva.

    Avviso reattività: quando selezioni questo aspetto, è consigliabile aggiungere il tipo di contenuto Prodotti direttamente a un layout di riga, scheda o colonna in cui è reattivo, mostrando un numero inferiore di prodotti per lato su schermi più piccoli. Se lo aggiungi a tipi di contenuto più stretti della larghezza della pagina (ad esempio, una colonna stretta), il carosello visualizza più prodotti per diapositiva di quanto consentito dal contenitore, indipendentemente dalle dimensioni dello schermo.

    Aspetto del prodotto

    Se scegli il carosello del prodotto, devi anche configurare le impostazioni carosello.

  2. Per Select Products By, scegliere il metodo per la selezione del prodotto:

    Puoi selezionare i prodotti per categoria, SKU o condizione. Queste opzioni si escludono a vicenda. Ad esempio, non è possibile selezionare l’opzione Categoria, utilizzare il selettore Categoria, quindi passare all’opzione Condizione per aggiungere alcune condizioni. I prodotti vengono selezionati solo in base a quanto impostato per una di queste tre opzioni.

    • Category - Scegliere questa opzione per visualizzare i prodotti utilizzando una categoria selezionata.

      Selezione prodotti per categoria

      Se selezionata, questa opzione fornisce un selettore Category. Fare clic sulla freccia ed eseguire il drill-down per scegliere la categoria di prodotti da visualizzare. Ad esempio, nei dati di esempio di Commerce, l'espansione e la selezione di Donne > Punte > Tette consentono di visualizzare tutti i prodotti per tale categoria.

      Selezione di una categoria di catalogo

    • SKU - Scegliere questa opzione per visualizzare i prodotti utilizzando uno o più SKU

      Se selezionata, questa opzione fornisce una casella di testo Product SKUs in cui è necessario immettere un elenco separato da virgole di SKU da visualizzare.

      Selezione prodotto per SKU

    • Condition - Scegliere questa opzione per visualizzare i prodotti in base a una o più condizioni definite.

      Quando è selezionata, sono disponibili strumenti per aggiungere condizioni alla selezione dei prodotti. Ad esempio, puoi selezionare solo i prodotti con un Genere impostato su Unisex.

      Selezione prodotto per condizione

      NOTE
      Se si seleziona l'opzione Categoria o SKU, verrà visualizzata l'opzione Sort By di Position. Con questa opzione di ordinamento, i prodotti vengono visualizzati nello stesso ordine in cui sono visualizzati nel catalogo.
      Per l'opzione Categoria, l'ordinamento per posizione consente di visualizzare i prodotti nello stesso ordine in cui sono visualizzati nel catalogo. Per l'opzione SKU, l'ordinamento in base alla posizione consente di visualizzare i prodotti nell'ordine in cui sono stati immessi nella casella di testo Product SKUs.

  3. Per Sort By, scegliere l'ordinamento per i prodotti nell'elenco:

    OpzioneDescrizione
    Position (solo per le opzioni Categoria e SKU)Quando si seleziona l'opzione Categoria, la posizione visualizza i prodotti nello stesso ordine della loro posizione nel catalogo. Quando selezionate l'opzione SKU, la posizione visualizza i prodotti nello stesso ordine degli SKU all'interno della casella di testo SKU prodotto (Product SKUs).
    Newest products firstOrdina i prodotti in base alla data in cui sono stati aggiunti al catalogo, visualizzando per primi i prodotti con le date di immissione più recenti.
    Oldest products firstOrdina i prodotti in base alla data in cui sono stati aggiunti al catalogo, visualizzando prima i prodotti con le date di immissione meno recenti.
    Name: A - ZOrdina i prodotti in ordine alfabetico.
    Name: Z - AOrdina i prodotti in ordine alfabetico inverso.
    SKU: ascendingOrdina i prodotti per SKU in ordine alfanumerico.
    SKU: descendingOrdina i prodotti per SKU in ordine alfanumerico inverso.
    Stock: low stock firstOrdina i prodotti dal magazzino più basso a quello più alto disponibile.
    Stock: high stock firstOrdina i prodotti dal magazzino più alto a quello più basso disponibile.
    Price: high to lowOrdina i prodotti dal prezzo più alto a quello più basso.
    Price: low to highOrdina i prodotti dal prezzo più basso a quello più alto.

    Opzioni di ordinamento dei prodotti

  4. Immettere Number of Products to Display nel carosello o nella griglia.

    I valori possono essere compresi tra 1 e 999. Il valore predefinito è 5 per una griglia e 20 per un carosello.

    NOTE
    Alcuni prodotti nelle impostazioni Categoria, SKU o Condizione potrebbero non essere visualizzati nella griglia o nel carosello dei prodotti. Ad esempio, i prodotti disabilitati, i prodotti contrassegnati come non visibili, i prodotti esauriti e i prodotti assegnati a un altro sito Web non vengono visualizzati.
    IMPORTANT
    I prezzi per i prodotti configurabili, raggruppati e raggruppati (prezzo dinamico) non sono definiti nell’amministratore. Pertanto, questi prodotti non vengono visualizzati in Preview se sono filtrati in base al prezzo. Questi prodotti non possono essere ordinati correttamente in Preview se ordinati per prezzo.

Impostazioni carosello

  1. Per determinare la modalità di visualizzazione dei prodotti all'interno del carosello, scegliere Carousel Mode:

    OpzioneDescrizione
    DefaultIl carosello visualizza cinque prodotti per diapositiva per impostazione predefinita e riduce responsively tale numero in base alle esigenze.
    ContinuousPer impostazione predefinita, il carosello visualizza cinque prodotti per diapositiva (con metà di un prodotto a destra e a sinistra), ma centra e scorre un prodotto alla volta in un ciclo infinito. I prodotti a destra e a sinistra del prodotto centrato vengono oscurati in modo da evidenziare il prodotto centrale.

    Se passi da una modalità all'altra, le altre impostazioni del carosello vengono mantenute, ad eccezione dell'impostazione Infinite Loop, che è sempre impostata su Yes in modalità Continua e il campo è disabilitato.

    Impostazioni carosello

  2. Se necessario, impostare Autoplay su Yes.

    Quando la riproduzione automatica è abilitata, il carosello inizia a scorrere automaticamente al caricamento della pagina. Se si lascia l'impostazione predefinita (No), il cliente deve fare clic sulla navigazione della diapositiva (punti o frecce) per visualizzare ogni diapositiva in sequenza.

    Se si abilita questa funzione, immettere Autoplay Speed per specificare il ritardo in millisecondi tra ciascuna diapositiva. Il valore predefinito è 4000 (4 secondi).

  3. Se necessario, impostare Infinite Loop su Yes.

    Quando è attivato il ciclo infinito, la presentazione viene ripetuta indefinitamente mentre la pagina è aperta. Se si lascia l'impostazione predefinita (No), la presentazione verrà riprodotta una sola volta.

    NOTE
    Se si imposta Infinite Loop su No e Autoplay su Yes, la riproduzione automatica si interrompe alla fine del numero di prodotti da visualizzare.

  4. Se necessario, impostare Show Arrows su Yes.

    Quando questa opzione è abilitata, ogni diapositiva include avanti e precedente frecce di navigazione a sinistra e a destra. Se si lascia l'impostazione predefinita (No), le diapositive non visualizzano le frecce di spostamento.

  5. Se necessario, impostare Show Dots su No.

    Se è impostata l'impostazione predefinita (Yes), nella parte inferiore del dispositivo di scorrimento del carosello vengono visualizzati dei punti di navigazione. Se disattivi questa impostazione, il cursore del carosello non mostra i punti di navigazione.

Avanzate

  1. Per controllare il posizionamento dell'elenco Prodotti all'interno del contenitore padre, scegliere Alignment:

    OpzioneDescrizione
    DefaultApplica l'impostazione predefinita di allineamento specificata nel foglio di stile del tema corrente.
    LeftAllinea l'elenco lungo il bordo sinistro del contenitore principale, tenendo conto di eventuali spaziature specificate.
    CenterAllinea l'elenco al centro del contenitore padre, tenendo conto di eventuali spaziature specificate.
    RightAllinea l'elenco lungo il bordo destro del contenitore principale, tenendo conto di qualsiasi spaziatura specificata.

  2. Imposta lo stile Border applicato a tutti e quattro i lati del contenitore Prodotti:

    OpzioneDescrizione
    DefaultApplica lo stile di bordo predefinito specificato dal foglio di stile associato.
    NoneNon fornisce alcuna indicazione visibile dei bordi del contenitore.
    DottedIl bordo del contenitore viene visualizzato come una linea tratteggiata.
    DashedIl bordo del contenitore viene visualizzato come una linea tratteggiata.
    SolidIl bordo del contenitore viene visualizzato come linea continua.
    DoubleIl bordo del contenitore viene visualizzato come una doppia riga.
    GrooveIl bordo del contenitore viene visualizzato come una linea scanalata.
    RidgeIl bordo del contenitore viene visualizzato come una linea scanalata.
    InsetIl bordo del contenitore viene visualizzato come una linea interna.
    OutsetIl bordo del contenitore viene visualizzato come una linea di contorno.

  3. Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

    OpzioneDescrizione
    Border ColorSpecificate il colore scegliendo un campione, facendo clic sul selettore del colore oppure immettendo un nome di colore valido o un valore esadecimale equivalente.
    Border WidthImmettere il numero di pixel per lo spessore della linea del bordo.
    Border RadiusImmettere il numero di pixel per definire la dimensione del raggio utilizzato per arrotondare ogni angolo del bordo.

  4. (Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore.

    Separare più nomi di classe con uno spazio.

  5. Immettere i valori, in pixel, per Margins and Padding per determinare i margini esterni e la spaziatura interna del contenitore Prodotti.

    Immettere i valori corrispondenti nel diagramma.

    Area contenitoreDescrizione
    MarginsQuantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore. Opzioni: Top / Right / Bottom / Left
    PaddingQuantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore. Opzioni: Top / Right / Bottom / Left