Pagina prodotto

La pagina prodotto è composta dalla sezione Product e dai suoi blocchi. Nell’editor di temi i blocchi si possono riordinare, nascondere o rimuovere. La sezione contiene fino a 24 blocchi.

Impostazioni della sezione

Gallery

La galleria mostra i contenuti multimediali del prodotto con le miniature e carica per prima la prima immagine.

• Image fit: Fill the frame ritaglia l’immagine in proporzione 4:3, e i clienti possono passare all’immagine intera. Show the full image aggiunge spazio intorno all’immagine.
• Enable sticky gallery on desktop: la galleria resta visibile mentre il cliente scorre il riquadro d’acquisto.
• Show sticky buy bar on phones: mostra il prezzo e un pulsante «Add to cart» in fondo allo schermo quando il pulsante principale esce dalla visuale. Non compare sugli schermi più larghi di 880px.

Scheda «Fitted on car»: una seconda scheda della galleria compare quando il metacampo prodotto custom.on_car_images (elenco di file) contiene immagini. Usarla per le foto del ricambio montato su un’auto.

Una foto per finitura: quando un cliente sceglie una variante, la galleria passa all’immagine di quella variante. Assegnare l’immagine della variante nel pannello di controllo Shopify. Per le opzioni con campioni di colore, si può invece scrivere il valore nel testo alternativo dell’immagine (ad esempio «Gunmetal»).

Blocchi

Ecco i blocchi nell’ordine usato dalla demo.

Breadcrumb

Compare sopra la galleria come Home / collezione / elemento corrente.

• Current item: SKU (il titolo del prodotto se non c’è uno SKU) o Product title.

Subheading

Una piccola riga sopra il titolo del prodotto.

• Text: Product type, Vendor o First collection.
• Add the series: aggiunge dopo un punto centrale il metacampo prodotto custom.series, se il prodotto ne ha uno.

Title

Il titolo del prodotto. Nessuna impostazione.

SKU and stock

• Show SKU.
• Low stock threshold (0–20): mostra «Low stock» quando la quantità è pari o inferiore a questo numero; 0 lo disattiva. Si applica solo alle varianti di cui Shopify monitora le scorte e che non si vendono più a quota zero.
• Show the remaining count with "Low stock".

Short text

Un breve riassunto sotto il titolo.

• Source: Short description metafield o Description excerpt. Il metacampo è custom.short_description (testo multiriga). Se è vuoto, Keld usa il primo paragrafo della descrizione del prodotto (fino a 40 parole).

Price

Mostra il prezzo della variante selezionata con prezzi scontati e prezzi unitari. Accanto compare una nota dal metacampo prodotto custom.price_note (testo a riga singola, ad esempio «per ruota»). «Demo price» compare finché Impostazioni del tema › Fitment › Show "Demo fitment" label è attiva.

Variant picker

Mostra ogni opzione come un gruppo di pulsanti.

• Campioni di colore: le opzioni i cui valori hanno campioni Shopify mostrano un pallino di colore o di immagine. Vedere Campioni di colore più avanti.
• Esaurito e non disponibile: queste combinazioni appaiono tratteggiate ma restano selezionabili, così il cliente capisce perché il pulsante è disattivato.
• Senza JavaScript, il selettore mostra un semplice elenco di varianti.

Quantity

• Maximum quantity per add to cart (1–99). Le regole sulle quantità impostate nella variante in Shopify hanno la precedenza.

Buy buttons

• Show dynamic checkout buttons: mostra Shop Pay, PayPal e pulsanti simili sotto «Add to cart», come configurato nelle impostazioni di pagamento.

Le opzioni esaurite non hanno un link «Notify me». Gli avvisi di ritorno in magazzino richiedono un’app; posizionare il suo blocco app dopo questo blocco.

Complete the kit

Suggerisce ricambi che si abbinano a questo prodotto. Ognuno è una casella di controllo con il suo prezzo, e un pulsante aggiunge al carrello la variante selezionata insieme ai ricambi spuntati, come gruppo.

• Heading, Note (testo piccolo accanto al titolo, ad esempio come è stato scelto l’abbinamento) e Products shown (1–6).
• I prodotti vengono dal metacampo prodotto custom.kit_products (elenco di prodotti). Finché il metacampo è vuoto, non compare nulla.

Vehicle fitment

Confronta l’elenco di compatibilità del prodotto con il veicolo salvato dal cliente. Il blocco non ha impostazioni. I suoi stati sono:

• No vehicle set: chiede al cliente di impostare un veicolo.
• Listed: il veicolo è nell’elenco di compatibilità del prodotto.
• Not listed: il veicolo non è nell’elenco.
• Fitment not set: il prodotto non ha dati di compatibilità.

Il blocco non presenta mai la compatibilità come verificata. Non compare sui prodotti carta regalo. Vedere Compatibilità veicolo.

Pickup availability

Mostra se la variante selezionata si può ritirare nelle sedi del negozio. Il ritiro locale si configura in Impostazioni › Spedizione e consegna.

Collapsible panel

Un pannello che si apre e si chiude. Se ne possono aggiungere quanti ne servono.

• Heading.
• Content:
  • Custom text: il testo inserito in Custom text.
  • Product description.
  • Specifications (metafield custom.spec_sheet): una tabella a due colonne.
  • Listed platforms (metafield custom.fitment): i veicoli per cui il ricambio è indicato. Non mostra nulla se il prodotto non ha dati di compatibilità.
  • Other product metafield: inserire in Metafield key una chiave dello spazio dei nomi custom, ad esempio in_the_box o fitting_notes. Funzionano testo RTF, testo multiriga, testo a riga singola ed elenchi di testo a riga singola; gli altri tipi vengono ignorati.
  • Shop policies: link alle politiche di spedizione e di rimborso.
• Open by default.

La demo usa sei pannelli: Descrizione, Specifiche, Piattaforme compatibili, Contenuto della confezione, Note di montaggio, e Spedizione e resi.

Reviews

Ospita un’app di recensioni. I blocchi app posizionati subito dopo questo blocco compaiono al suo interno. Senza un’app di recensioni il pannello non compare, quindi non mostra mai recensioni vuote o false.

• Heading e Open by default.

Custom Liquid e blocchi app

• Custom Liquid: per aggiungere Liquid o HTML al riquadro d’acquisto, ad esempio lo snippet di un’app.
• Blocchi app: qui si possono aggiungere le app che supportano i blocchi app del tema.

Campioni di colore

Keld mostra pallini di colore nella pagina prodotto e nelle schede prodotto quando un’opzione è collegata al metacampo di categoria Colore di Shopify.

1. Aprire il prodotto nel pannello di controllo Shopify e impostare una Categoria che abbia un attributo colore (quasi tutte lo hanno).
2. In Varianti, fare clic sull’opzione (ad esempio «Finitura»).
3. Fare clic sull’icona Collega metacampo (in alto a destra nell’opzione) e scegliere Colore.
4. Per ogni valore, creare una voce colore: Etichetta, Colore (esadecimale) e Colore base. Fare clic su Fatto, poi su Salva.

Le voci create una volta si possono riutilizzare in altri prodotti. Se i pallini non compaiono dopo il salvataggio, aprire l’opzione, scollegarla, salvare e poi collegarla di nuovo.

Le schede prodotto mostrano fino a 6 pallini, poi «+n».

Carte regalo

I prodotti carta regalo usano la stessa pagina prodotto. Keld aggiunge:

• Send this as a gift: una casella di controllo che mostra email e nome del destinatario, un messaggio (fino a 200 caratteri) e una data di invio.
• Il blocco Vehicle fitment è nascosto sui prodotti carta regalo.

Per crearne uno, nel pannello di controllo Shopify andare su Prodotti › Carte regalo › Aggiungi prodotto carta regalo e impostare i tagli.

Schede prodotto

Le schede prodotto nelle collezioni, nella ricerca e nelle sezioni con prodotti in evidenza mostrano:

• la prima immagine e, al passaggio del mouse, una seconda immagine se il prodotto ne ha una
• le etichette Sold out, Sale (quando il prezzo di confronto di una variante è superiore al suo prezzo) e New (prodotti con il tag New)
• lo SKU e il tipo di prodotto, il nome completo del prodotto e una riga di specifiche da custom.spec_line
• il prezzo, i pallini di colore o il numero di varianti, e un badge di compatibilità quando è impostato un veicolo
• un pulsante di aggiunta rapida per i prodotti disponibili con una sola variante