La pagina prodotto sceglie come mostrare le immagini

Fino a ieri la pagina prodotto mostrava le immagini in un modo solo. Da oggi il negoziante sceglie il layout: miniature sotto l’immagine principale, in colonna a sinistra o a destra, oppure una griglia con tutte le immagini. Su telefono, il default diventa un carosello a scorrimento con contatore.

Dove si imposta

Il gruppo è nuovo e si trova in Sistema > Configurazione > Design > Product Page Gallery, sotto Theme Settings. Contiene tre campi: il layout desktop, il layout telefono e il numero di colonne della griglia. Il campo delle colonne compare solo quando il layout scelto è la griglia.

È nel gruppo Design e non dentro Theme Settings per una ragione precisa: i campi di Theme Settings sono design token che finiscono in theme.css, mentre questi layout funzionano solo con i temi di base.

Cosa cambia davvero

Su desktop il default resta quello di prima, le miniature sotto l’immagine, ma con due differenze visibili: le miniature sono più grandi, 99 px invece di 68 px in una finestra da 1280 px, e quella dell’immagine visibile ha un contorno scuro. Il contorno segue anche il cambio di immagine via miniatura o via swatch.

Su telefono il carosello è il nuovo comportamento predefinito. Per tornare al layout precedente basta impostare Phone Layout su “Thumbnails Below the Image”: l’immagine principale con le miniature sotto.

Le impostazioni non toccano il codice: la gallery mostrava già tutte le immagini, il layout è tutto CSS.

Un dettaglio che di solito si rompe

Quando una variante ha una propria immagine, lo swatch la porta al posto dell’immagine principale. Nella griglia e nel carosello la logica è la stessa: l’immagine dello swatch prende la cella dell’immagine principale, quindi il numero di immagini non cambia dopo la scelta e il visore a schermo intero si apre sull’immagine giusta.

Un valore di layout sconosciuto ricade su “below”, un valore telefono sconosciuto ricade su “carousel”, e il numero di colonne resta tra 1 e 3.

Due cose da sapere prima di attivarlo

• nella griglia la colonna d’acquisto scorre con la pagina: non può restare agganciata accanto a una griglia più alta della finestra;
• il pacchetto legacy mantiene il suo layout per ogni impostazione, con il suo CSS: continua a mostrare l’immagine principale piccola e le miniature grandi.