Suggerimenti per Brooklyn

Questo articolo illustra alcuni suggerimenti e best practice utili che possono aiutarti a configurare Brooklyn per il tuo negozio online.

Suggerimenti per la navigazione

Aggiungi un menu a tendina

Per aggiungere dei menu a tendina al menu principale, devi creare dei menu sulla pagina Navigazione. Per maggiori informazioni, vedi Imposta menu a tendina nel negozio online.

Menu principale di un negozio online. Il mouse passa sopra il link

Il menu principale diventa un menu sidebar

Se occupa molto spazio, il menu principale si trasforma in un menu sidebar che si apre quando clicchi su un pulsante nella sezione dell'header:

Menu sidebar sul lato sinistro di un negozio online. Nel menu sidebar appaiono i link del menu principale, ad esempio

Puoi impedire al menu principale di passare al formato sidebar seguendo questa procedura:

  • Aggiungi non più di quattro o cinque link al menu principale.
  • Usa un font stretto per i link del menu principale. Puoi modificare il font Testo in risalto nelle impostazioni dei caratteri tipografici.
  • Crea voci di menu con un numero limitato di caratteri. Ad esempio, potresti utilizzare "FAQ" anziché "Domande frequenti" o "Contatti" anziché "Contattaci".

Suggerimenti per le immagini

I migliori tipi di immagine di prodotto per Brooklyn

  • Visto che le immagini ad alta risoluzione sono eleganti e professionali, quelle dei tuoi prodotti dovrebbero essere di almeno 1024 x 1024 pixel. Il quadrato è il formato migliore per le immagini dei tuoi prodotti.

  • Le tue immagini dovrebbero avere preferibilmente un colore di sfondo uniforme. Un colore uniforme è un colore pieno senza sfumature o punti luce. Tutte le tue immagini dovrebbero avere lo stesso colore di sfondo.

  • Per rimuovere la cornice intorno alle tue immagini di prodotto, imposta su trasparente il colore di Sfondo del prodotto nelle impostazioni del colore:

Due inserzioni di prodotto su sfondi bianchi. Anche lo sfondo del negozio online è bianco e non ci sono cornici attorno alle immagini di prodotto.

Dimensioni ottimali per le immagini delle presentazioni

Entrambe le slide immagine che appaiono nel negozio demo Brooklyn hanno una risoluzione di 1200 x 800 pixel. È consigliabile che tutte le tue slide abbiano lo stesso formato.

Ritaglio degli immagini su schermi di piccole dimensioni

Su dispositivi di piccole dimensioni le slide immagine riempiono completamente lo schermo, dal margine superiore a quello inferiore. Le slide vengono ridimensionate per far sì che l'altezza corrisponda a quella dello schermo del dispositivo. Per riempire lo schermo senza nessuna distorsione dell'immagine, le slide vengono ritagliate a sinistra e a destra.

Sugli schermi di grandi dimensioni le slide immagine vengono ridimensionate per far sì che la larghezza si adatti a quella della finestra del browser. Per riempire la finestra senza nessuna distorsione dell'immagine, le slide vengono ritagliate in fondo.

L'esempio che segue mostra la versione desktop e su dispositivo mobile dello stesso negozio online:

La versione desktop della presentazione mostra un'immagine più larga che alta. La versione per dispositivo mobile mostra la stessa immagine con la stessa altezza, ma con entrambi i lati ritagliati per permettere all'immagine di adattarsi allo schermo stretto.

Mostra un'immagine a tutto schermo per una collezione

Per mostrare un'immagine a tutto schermo, la tua collezione deve avere un'immagine in evidenza.

Nel negozio demo store Brooklyn puoi vedere come appare un'immagine di collezione a tutto schermo. L'immagine collezione visualizzata in alto ha una risoluzione di 1405 x 800 pixel.

La versione desktop della presentazione mostra un'immagine più larga che alta.

La versione per dispositivo mobile mostra la stessa immagine con la stessa altezza, ma con entrambi i lati ritagliati per permettere all'immagine di adattarsi allo schermo stretto.

Imposta un'immagine per gli articoli del blog

La prima immagine di un articolo del blog viene utilizzata come immagine in evidenza per la pagina del blog. Puoi trovare maggiori informazioni su come aggiungere un'immagine a un articolo di blog in Scrivere articoli del blog.

Suggerimenti sul prodotto

Aggiungi ai prodotti badge per saldi e offerte

Puoi aggiungere a un prodotto un badge per saldi e offerte impostando un prezzo di confronto maggiore rispetto al prezzo regolare. Il badge viene visualizzato sull'immagine di quel prodotto nelle pagine di collezione.

Imposta i prodotti che dovranno apparire più grandi sulle pagine della collezione

Se imposti le pagine di collezione per visualizzare i prodotti in stile collage, alcuni dei prodotti avranno immagini grandi mentre altri avranno immagini ridotte. La dimensione dell'immagine dipende dall'ordine dei prodotti nella loro collezione. All'interno del pannello di controllo puoi modificare l'ordine dei prodotti nella Pagina di collezione. Fai clic sulla collezione che vuoi modificare, quindi, nell'area Prodotti, seleziona Manualmente nel menu a tendina Ordina. In seguito, trascina e rilascia i prodotti nell'ordine in cui vuoi che appaiano sul tuo negozio online.

Pagina Collezioni nel pannello di controllo Shopify.

Per ogni gruppo di sei prodotti, il primo e il sesto hanno immagini di grandi dimensioni. Ad esempio, la 1ª, 6ª, 7ª, 12ª, 13ª e 18ª immagine della collezione saranno più grandi:

Pagina di collezione con i prodotti visualizzati in stile collage. I numeri sopra i prodotti indicano la relazione tra l'ordine dei prodotti e la dimensione dell'immagine.

Per visualizzare una griglia di prodotti con immagini delle stesse dimensioni, imposta le collezioni sulla visualizzazione di prodotti in stile griglia.

Animazione a scorrimento quando si seleziona una variante

Nella pagina del prodotto, se la descrizione del prodotto è abbastanza breve da adattarsi allo schermo senza richiedere uno scorrimento, quando si seleziona una variante con un'immagine viene visualizzata un'animazione a scorrimento. Se la descrizione è troppo lunga per essere adattata allo schermo senza scorrere verso il basso, l'immagine in alto viene semplicemente sostituita dall'immagine della variante e non si ha alcuna animazione di scorrimento.

Se preferisci l'animazione a scorrimento, usa delle descrizioni brevi per i tuoi prodotti.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis