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

I migliori tipi di immagine di prodotto per Supply

Le foto ad alta risoluzione appaiono più eleganti e professionali in Supply, quindi il formato delle immagini dovrebbe essere di almeno 1.024 x 1.024 px. Se necessario, le immagini vengono automaticamente ridimensionate.

Le foto ad alta risoluzione sono particolarmente importanti se selezioni Abilita zoom immagine. Puoi farlo aprendo la pagina di prodotto nell'anteprima dell'editor del tema e cliccando su Prodotto nella scheda Sezioni.

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

Riduci l'altezza dell'header

Esistono più modi per ridurre la sezione superiore della pagina.

Se il tuo logo è troppo grande, puoi ridurne le dimensioni regolando la sua larghezza massima dalle impostazioni del tema. Poiché Shopify ridimensiona il logo mantenendone inalterate le proporzioni, riducendo la larghezza si riduce anche l'altezza. Utilizzando l'editor del tema, dalla sezione Header, regola il valore della larghezza logo personalizzato. Il valore predefinito in pixel è 305. Scegli un valore in pixel inferiore per ridurre le dimensioni del logo e ridurrai di conseguenza l'altezza dell'header.

Il logo potrebbe contenere anche pixel bianchi o invisibili che occupano lo spazio sopra o sotto ad esso. Puoi usare un programma come Photoshop per tagliare quei pixel dall'immagine del logo. Dopo aver ritagliato il logo, caricalo di nuovo attraverso l'editor del tema. Riducendo lo spazio vuoto intorno al logo, potrai ridurre significativamente l'altezza dell'header.

Ridimensiona la presentazione

Utilizza immagini in formato panoramico, cioè con larghezza maggiore rispetto all'altezza.

Sebbene l'editor del tema suggerisca di caricare immagini di 1.000 px in larghezza e 500 px in altezza, puoi utilizzare immagini più piccole. È consigliabile una larghezza di 1.000 pixel, perché evita che sugli schermi più grandi appaia dello spazio bianco a destra e a sinistra delle slide. Le immagini con larghezza inferiore saranno centrate nella presentazione:

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 dei menu a tendina al menu principale, devi creare dei menu dalla pagina di Navigazione.

Best practice per il Menu principale

Se nel menu principale dovessero essere presenti più articoli di quelle che entrano 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:

  • Rendi meno ingombranti i link di navigazione riducendo la dimensione del font per il Menu principale da Caratteri tipografici nella scheda Impostazioni tema.
  • 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.

Un errore comune è quello 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 tuo 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. Apri una pagina di collezione nell'anteprima dell'editor del tema. Nella scheda Sezioni, clicca su Collezione, quindi seleziona l'opzione Per gruppo.

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, clicca sul link timber.scss.liquid per aprire il foglio di stile del tema nell'editor di codice online.

  2. In fondo al file, aggiungi:

.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.

Devi impostare il tipo di carrello a "pagina" se desideri aggiungere una delle seguenti funzionalità alla pagina del carrello:

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

Per passare al carrello a "pagina":

  1. Clicca su Impostazioni tema.

  2. Clicca su Carrello.

  3. Dall'elenco a discesa Tipi di carrello, seleziona Pagina.

  4. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis