Suggerimenti per Supply

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

Suggerimenti per le immagini

Immagini di prodotto

Le foto ad alta risoluzione in Supply hanno un effetto più raffinato e professionale, quindi le immagini dovrebbero essere di almeno 1024 pixel di larghezza per 1024 di altezza. Le immagini vengono ridimensionate automaticamente se necessario. Le foto ad alta risoluzione sono particolarmente importanti se abiliti lo zoom delle immagini nelle pagine di prodotto.

Il formato larghezza/altezza ottimale per le foto dei tuoi prodotti è quadrato.

Ridimensiona la presentazione

Per fare in modo che la presentazione occupi meno spazio verticale nella tua home page devi utilizzare immagini orizzontali, cioè più larghe che alte. Devi caricare immagini con una larghezza di 1000 pixel in modo che le tue slide non abbiano spazi vuoti a sinistra e a destra nelle visualizzazioni più ampie. Le immagini con larghezza inferiore vengono visualizzate al centro della presentazione.

Suggerimenti per l'header

Se l'header è troppo alto, puoi abbassarlo regolando il logo. Se il logo è troppo grande, puoi ridurne le dimensioni regolando la larghezza massima. Il logo potrebbe contenere anche pixel invisibili o bianchi che si aggiungono allo spazio vuoto sopra e sotto. Puoi tagliare quei pixel dall'immagine del logo utilizzando un software di modifica delle immagini come Photoshop. Dopo aver ritagliato il logo, caricalo nuovamente. Tagliare lo spazio vuoto nell'immagine del logo può ridurre significativamente l'altezza dell'header.

  1. Clicca su Header. 5. Inserisci la nuova larghezza nel campo Personalizza larghezza logo (in pixel). Il valore predefinito in pixel è 305. Usa un valore in pixel inferiore per ridurre le dimensioni del logo e ridurrai di conseguenza l'altezza dell'header. Riducendo la larghezza del logo se ne riduce anche l'altezza, perché il logo viene ridimensionato mantenendo le proporzioni. 6. Clicca su Salva.

Suggerimenti per la navigazione

I seguenti suggerimenti possono aiutarti a migliorare la navigazione nel tuo negozio se utilizzi Supply.

Aggiungi un menu a tendina

Per aggiungere menu a tendina al menu principale, devi creare dei menu dalla pagina Navigazione.

Best practice per il menu principale

Se nel menu principale dovessero essere presenti più articoli di quelli che rientrano in una riga, i link in eccedenza verranno inseriti in un menu a tendina Altro.

Questo aspetto non è legato solo al numero dei link nel menu principale, ma in genere si può evitare riducendo il numero dei link a 5 o 6. Per includere più link:

  • Rimpicciolisci i link di navigazione. La dimensione dei font di questi link è controllata dalla dimensione del font del menu principale nelle impostazioni dei caratteri tipografici.
  • Utilizza meno caratteri per ogni link. Ad esempio, sostituisci "Domande frequenti" con "FAQ", "Contattaci" con "Contatti" e così via.

La presenza di troppe voci nei menu di navigazione può incidere negativamente sull'usabilità del sito. Con troppe voci di menu, gli occhi dei visitatori rischiano di soffermarsi su elementi attualmente non importanti. Cerca di limitare la navigazione a cinque o sei voci di menu. Utilizza i menu a tendina se desideri consentire l'accesso a più di sei pagine.

Dovresti evitare di aggiungere il link di ogni collezione al menu principale. Invece, prova a elencare le collezioni in un menu a tendina sotto il link "Negozio" o "Catalogo". Puoi anche suddividere le collezioni in gruppi, assegnando a ciascun gruppo un menu a tendina. Oppure, puoi utilizzare i tag del prodotto per creare delle sottocategorie di prodotti.

Rimuovi la barra laterale

Per rimuovere la barra laterale dal tuo negozio, devi aggiungere del codice a due file del tema.

  1. Nella directory Sezioni, clicca su collection-template.liquid.

  2. Trova has_sidebar nel file. Elimina le seguenti righe di codice:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. Clicca su Salva.

  2. Nella directory Sezioni, clicca su collection-list-template.liquid.

  3. Trova has_sidebar nel file. Elimina le seguenti righe di codice:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. Clicca su Salva.

Suggerimenti sul prodotto

I seguenti suggerimenti ti aiuteranno a presentare i tuoi prodotti con Supply.

Utilizza gruppi di filtri avanzati

Se disponi di molti prodotti, puoi attivare dei sottogruppi che aiutino i clienti a suddividere i prodotti.

  1. Definisci i gruppi. Nell'immagine sopra, i gruppi sono Brand, Lunghezza Focale e Risoluzione.

  2. Esporta tutti i prodotti in un file .csv.

  3. Anteponi a tutti i tag esistenti il nome del gruppo in cui desideri inserirli, con il formato Nome Gruppo_Tag. Nell'esempio, alcuni dei tag sarebbero Brand_Canon, Lunghezza Focale_18 - 55mm e Risoluzione_12 MP. A sinistra del trattino basso va inserito il nome del gruppo e a destra il tag del prodotto. Gli spazi possono essere inclusi da entrambi i lati del trattino basso.

  4. Salva il file .csv e importa nuovamente i prodotti nel tuo negozio. Quando carichi il file, assicurati di selezionare Sostituisci tutti i prodotti esistenti con lo stesso handle per evitare la creazione di prodotti duplicati.

  5. Abilita il filtraggio per gruppo nelle pagine di collezione:

    1. Dal pannello di controllo Shopify passa a Negozio online > Temi.
    2. Accanto a Supply, clicca su Personalizza.
    3. Dal menu a tendina nella parte superiore della pagina o dal menu Template, seleziona Pagine di collezione.
    4. Clicca sulla sezione Collezione.
    5. Sotto Filtri di prodotto Sidebar, seleziona Per gruppo.
    6. Clicca su Salva.

Riordina gruppi di filtri e tag

I gruppi sono mostrati in ordine alfabetico, così come i tag elencati all'interno dei gruppi. Un esperto Shopify può aiutarti a personalizzare l'ordine.

Suggerimenti per i prezzi

I seguenti suggerimenti ti aiutano a impostare i prezzi con Supply.

Disattiva l'arrotondamento degli importi di vendita

  1. A sinistra, sotto Risorse, apri timber.scss.liquid.

  2. In fondo al file, aggiungi il codice seguente:

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. Clicca su Salva.

Suggerimenti per il carrello

Il seguente suggerimento garantisce che il carrello del tuo negozio funzioni correttamente in caso di aggiunta di codice JavaScript a Supply.

Cambia tipo di carrello in modo che funzioni JavaScript avanzato

Con Supply, qualsiasi codice JavaScript aggiunto a cart.liquid non viene eseguito nella finestra o nel carrello modal. Verrà eseguito solo se aggiungi /cart all'URL del negozio. Ad esempio, http://your.store.url/cart.

Se desideri aggiungere una qualsiasi delle seguenti funzionalità alla pagina del carrello, devi impostare il tipo di carrello su pagina:

  • un calcolatore delle tariffe di spedizione
  • più valute
  • confezione regalo
  • convalida attributi carrello
  • selezionatore di data
  • casella di spunta “Accetto i termini”.

Procedura:

  1. Clicca su Impostazioni tema. 2. Clicca su Carrello. 3. Nell'elenco a tendina Tipo di carrello, seleziona Pagina. 4. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis