Pop

Un tema minimalista, progettato per mantenere accessibili i tuoi contenuti. Pop è ideale per negozi con inventari di piccole e medie dimensioni. È basato su un’ampia sidebar di navigazione che rende i tuoi contenuti facilmente accessibili.

Esempio di negozio online con Pop

Sezioni, le Sezioni sono dei blocchi personalizzabili di contenuti che determinano il layout del tuo negozio online. Ciascun tema include delle sezioni statiche e delle sezioni dinamiche. ### Sezioni statiche, le Sezioni statiche si trovano sempre in posizioni specifiche del tuo negozio online. Puoi modificare le sezioni statiche, ma non puoi riorganizzarle o rimuoverle. Ogni tipo di pagina sul tuo negozio online include diverse sezioni statiche.

Pop include le sezioni statiche seguenti:

  • Logo e menu
  • Barra degli annunci
  • Footer
  • Pagine di prodotto
  • Pagine delle collezioni
  • Pagina con l'elenco delle collezioni
  • Articolo

Sezioni dinamiche che puoi aggiungere, riorganizzare e rimuovere per personalizzare il layout della tua home page. Ogni tema offre una serie unica di sezioni dinamiche tra cui scegliere.

Pop include le sezioni dinamiche seguenti:

  • Articoli del blog
  • Elenco delle collezioni
  • Collezione in evidenza
  • Immagine con testo
  • Presentazione
  • Sezione "prodotto in primo piano"
  • Newsletter
  • Mappa
  • Rich text
  • Video
  • HTML personalizzato

Pagine di prodotto

Nella sezione pagina di Prodotto , puoi aggiungere o rimuovere i seguenti elementi:

  • Brand o fornitore del prodotto
  • Zoom immagine
  • Prodotti simili
  • Selettore di quantità
  • Pulsante di check-out dinamico
  • Icone per la condivisione sui social

Per modificare le impostazioni delle pagine di prodotto:

  1. Dal menu a tendina della barra in alto, seleziona Pagine di prodotto.

  2. Clicca su Sezioni.

  3. Clicca su Pagina di prodotto.

  4. Per mostrare il brand o il fornitore del prodotto, seleziona Indica fornitore prodotto. Affinché vengano mostrati il brand o il fornitore, devi aggiungere un fornitore al prodotto.

  5. Per consentire ai clienti di ingrandire un'immagine di prodotto scorrendovi sopra con il mouse, seleziona Abilita zoom immagine.

  6. Per mostrare una selezione di prodotti simili in fondo alla pagina, seleziona Mostra prodotti simili. La collezione a cui appartiene il prodotto determina i prodotti simili visualizzati. Affinché vengano mostrati i prodotti simili, devi creare una collezione per il prodotto o aggiungerlo a una collezione esistente. Se il prodotto non fa parte di una collezione, non verranno visualizzati prodotti simili.

  7. Per mostrare un selettore di quantità, seleziona Mostra selettore quantità.

  8. Per mostrare un pulsante di check-out dinamico, seleziona Mostra pulsante di check-out dinamico.

  9. Per mostrare le icone per la condivisione sui social, seleziona Permetti condivisione del prodotto.

  10. Clicca su Salva.

Newsletter

Puoi inserire nella tua home page un'opzione per iscriversi a una newsletter. In questo modo puoi raccogliere gli indirizzi email dei clienti per campagne di marketing via email. Maggiori informazioni sull'email marketing nel blog di Shopify.

La sezione di un sito web dedicata alla newsletter. Sono disponibili un campo in cui i clienti possono inserire un indirizzo email e un pulsante che consente l'invio.

Per inserire nella tua home page un'opzione per iscriversi a una newsletter:

  1. Trova Pop e clicca su Personalizza.

  2. Clicca su Sezioni.

  3. Fai clic su Aggiungi sezione > Newsletter.

  4. Digita il titolo dell'opzione di iscrizione alla newsletter nel campo Titolo. Il titolo predefinito è "Iscriviti alla nostra newsletter".

  5. Inserisci un sottotitolo per l'opzione di iscrizione alla newsletter nel campo Sottotesto. Il testo predefinito è "Promozioni, nuovi prodotti e offerte. Direttamente nella tua casella di posta elettronica.".

  6. Imposta il colore di sfondo della sezione per l'iscrizione alla newsletter facendo clic sul campione Colore sfondo e scegliendo una tinta.

  7. Clicca su Salva.

Video

Puoi aggiungere un video di YouTube o Vimeo alla tua home page. I video coinvolgono i clienti e generano interesse verso la tua attività.

Per aggiungere un video alla tua home page:

  1. Trova Pop e clicca su Personalizza.

  2. Clicca su Sezioni.

  3. Fai clic su Aggiungi sezione > Video.

  4. Digita il titolo del video nel campo Titolo.

  5. Inserisci il link di condivisione del video nel campo Link video.

    I link di condivisione di YouTube sono simili a questo: https://youtu.be/OTJXAUZY9t0. Per informazioni su come copiare il link di condivisione di un video di YouTube, leggi questo articolo pubblicato da Guida di YouTube.

    I link di condivisione di Vimeo sono simili a questo: https://vimeo.com/281332510. Per informazioni su come copiare il link di condivisione di un video di Vimeo, leggi questo articolo pubblicato da Vimeo Help Center.

  6. Clicca su Salva.

HTML personalizzato

Nella sezione HTML personalizzato , puoi utilizzare il codice HTML per creare un contenuto personalizzato per la tua home page. Ad esempio, puoi usare il codice HTML per formattare blocchi, creare tabelle o incorporare un contenuto da un sito web di terzi.

Per aggiungere un HTML personalizzato alla tua home page:

  1. Trova Pop e clicca su Personalizza.

  2. Clicca su Sezioni.

  3. Clicca su Aggiungi sezione.

  4. Nell'area Layout avanzato fai clic su HTML personalizzato > Aggiungi.

  5. Clicca su HTML personalizzato e inserisci il codice HTML che desideri aggiungere alla tua home page.

  6. Clicca su Salva.

Pop include le impostazioni del tema seguenti:

  • Colori
  • Caratteri tipografici
  • favicon
  • Pagina del carrello
  • Social media
  • Check-out

Colori

Puoi scegliere i colori per le diverse parti del tuo negozio online. Per personalizzare i colori:

  1. Trova Pop e clicca su Personalizza.
    1. Clicca su Impostazioni del tema. 2. Fai clic su Colori. 3. Per ciascun tipo di contenuto, clicca sul campione di colore per utilizzare il selettore di colore:
      Il selettore di colore nell'editor del tema
      - Nell'area Recentemente selezionato sono mostrati i colori che hai recentemente selezionato per il tuo tema. - Nell'area Attualmente utilizzato sono mostrati i colori attualmente usati in altre parti del tema. Per impostare il colore su trasparente, clicca su Nessuno. 4. Fai clic su Salva.

Caratteri tipografici

Puoi scegliere i caratteri tipografici per il testo sul tuo negozio online.

Procedura:

  1. Accanto a **, clicca su **Personalizza.

  2. Clicca su Impostazioni tema.

  3. Fai clic su Caratteri tipografici.

  4. Per ogni tipo di testo, clicca su Modifica per utilizzare il selettore di font:

    Il pulsante

  5. Esplora i font utilizzando il campo di ricerca o cliccando su Caricane altri.

    Per visualizzare tutti i font disponibili, controlla la Libreria dei font di Shopify.

  6. Clicca sul nome del font che desideri utilizzare.

  7. Per modificare il font con uno stile diverso, ad esempio grassetto o corsivo, clicca su Standard. In seguito, fai clic sullo stile che desideri utilizzare e poi clicca su Seleziona :

    Una selezione dei pesi dei font disponibili sul selettore di font

  8. Clicca su Salva.

Social media

Puoi aggiungere pulsanti di condivisione sui social per i tuoi prodotti e articoli del blog e link ai tuoi account social media.

Per personalizzare le impostazioni dei social media:

  1. Trova Pop e clicca su Personalizza.

  2. Clicca su Impostazioni tema.

  3. Fai clic su Social media.

  4. Per caricare un’immagine per condivisione social, nell’area Immagine per condivisione social clicca su Seleziona immagine o Esplora immagini gratuite.

  5. Puoi aggiungere link ai tuoi account sui social media negli appositi campi all’interno dell’area Account social. Inserisci link completi, come ad esempio https://instagram.com/shopify o https://twitter.com/shopify.

    I link ai tuoi account sui social media vengono visualizzati nel piè di pagina del tuo negozio online.

  6. Per aggiungere pulsanti di condivisione social ai tuoi prodotti e agli articoli sul blog, seleziona una o tutte le caselle di spunta nell’area Opzioni di condivisione sui social.

    Puoi aggiungere i pulsanti di condivisione seguenti:

- Condividi su Facebook - Twitta su Twitter - Pinna su Pinterest (non disponibile per la condivisione di articoli sul blog)

  1. Clicca su Salva.

Aggiungi dei sottomenu alla sidebar

Per aggiungere dei menu a tendina al menu principale, devi creare dei menu dalla pagina di Navigazione. Questo articolo ti guiderà nei passaggi da seguire.

Dimensione ottimale per il logo del negozio

Un logo dalle proporzioni compatte è l'ideale per il tema Pop, che mostra il logo nella sidebar. I loghi rettangolari sviluppati in larghezza sono inadatti a questo tema.

La larghezza massima per il logo è di 450 pixel e l'altezza massima è di 200 pixel. Una volta caricato, il logo verrà ridimensionato perché si adatti a questi limiti.

Il formato ideale è il PNG.

Aumenta la dimensione del logo sui dispositivi mobili

Innanzitutto, per ingrandire il logo in qualsiasi layout, è estremamente importante tagliare tutti gli spazi negativi o i pixel trasparenti che circondano la grafica del logo prima di caricare il file su Shopify.

Ecco un logo con molto spazio negativo intorno:

Ecco lo stesso logo una volta rifilato — quando tutto lo spazio negativo attorno ad esso è stato tagliato:

Ecco il risultato grafico che si ottiene inserendo sul tema Pop un logo non rifilato:

Invece, ecco il risultato grafico che si ottiene inserendo sul tema Pop un logo rifilato:

Quando avrai fatto in modo che il logo non risulti più piccolo a causa dello spazio negativo intorno, potrai regolare l'altezza dell'header su mobile in modo da permettere al logo di espandersi. Di conseguenza, il logo apparirà più grande.

Vai all'editor del tema e, nella sezione Header e Navigazione , aumenta il valore "Dimensioni > Altezza Menu Mobile".

Ingrandisci il logo nella sidebar

Innanzitutto, per ingrandire il logo in qualsiasi layout, è estremamente importante tagliare tutti gli spazi negativi o i pixel trasparenti che circondano la grafica del logo prima di caricare il file su Shopify.

Ecco un logo con molto spazio negativo intorno:

Ecco lo stesso logo una volta rifilato — quando tutto lo spazio negativo attorno ad esso è stato tagliato:

Ecco il risultato grafico che si ottiene inserendo sul tema Pop un logo con spazio negativo:

Invece, ecco il risultato grafico che si ottiene inserendo sul tema Pop un logo rifilato:

Quando avrai fatto in modo che il logo non risulti più piccolo a causa dello spazio negativo intorno, potrai regolare l'ampiezza della sidebar permettendo al logo di espandersi. Di conseguenza, il logo apparirà più grande.

Vai all'editor del tema e, nella sezione Header e Navigazione , aumenta il valore di "Dimensioni > Larghezza menu desktop".

Riduci lo spazio bianco attorno al logo nella sidebar

Prima di rimuovere l'eventuale bordo aggiunto dal tema Pop sopra e sotto il logo, è estremamente importante tagliare l'eventuale bordo incluso nell'immagine stessa. È necessario che tagli lo spazio negativo o i pixel trasparenti che circondano la grafica del logo prima di caricare il file su Shopify.

Ecco un logo con molto spazio negativo intorno:

Ecco lo stesso logo una volta rifilato — lo spazio negativo intorno ad esso è stato tagliato:

Ecco il risultato grafico che si ottiene inserendo sul tema Pop un logo non rifilato:

Invece, ecco il risultato grafico che si ottiene inserendo sul tema Pop un logo rifilato:

Una volta caricato nelle risorse del tema il logo rifilato, puoi modificare la larghezza della sidebar dall'editor del tema. Nella sezione Header e Navigazione , modifica a tuo piacimento il valore "Dimensioni > Larghezza menu desktop".

Come ultima alternativa non supportata, se desideri ridurre il bordo sopra e sotto il logo, procedi come segue:

  1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

  2. In Risorse, fai clic su timber.scss.liquid per aprire il foglio di stile del tema nell'editor di codice online o vai su questo URL.

  3. In fondo al file, aggiungi:

```sass {% comment %} La funzione di query media seguente produce: @media screen and (min-width: 1025px) { ... } La barra laterale è visualizzata solo quando la larghezza è superiore a 1025 pixel. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Salva il file.

Modifica le impostazioni della pagina di prodotto

Nella sezione pagina di Prodotto , puoi aggiungere o rimuovere i seguenti elementi:

  • Brand o fornitore del prodotto
  • Zoom immagine
  • Prodotti simili
  • Selettore di quantità
  • Pulsante di check-out dinamico
  • Icone per la condivisione sui social

Per modificare le impostazioni delle pagine di prodotto:

  1. Dal menu a tendina della barra in alto, seleziona Pagine di prodotto.

  2. Clicca su Sezioni.

  3. Clicca su Pagina di prodotto.

  4. Per mostrare il brand o il fornitore del prodotto, seleziona Indica fornitore prodotto. Affinché vengano mostrati il brand o il fornitore, devi aggiungere un fornitore al prodotto.

  5. Per consentire ai clienti di ingrandire un'immagine di prodotto scorrendovi sopra con il mouse, seleziona Abilita zoom immagine.

  6. Per mostrare una selezione di prodotti simili in fondo alla pagina, seleziona Mostra prodotti simili. La collezione a cui appartiene il prodotto determina i prodotti simili visualizzati. Affinché vengano mostrati i prodotti simili, devi creare una collezione per il prodotto o aggiungerlo a una collezione esistente. Se il prodotto non fa parte di una collezione, non verranno visualizzati i prodotti simili.

  7. Per mostrare un selettore di quantità, seleziona Mostra selettore quantità.

  8. Per mostrare un pulsante di check-out dinamico, seleziona Mostra pulsante di check-out dinamico.

  9. Per mostrare le icone per la condivisione sui social, seleziona Permetti condivisione del prodotto.

  10. Clicca su Salva.

I migliori tipi di immagine di prodotto per Pop

Le foto ad alta risoluzione appaiono più eleganti e professionali nel tema Pop, pertanto dovresti utilizzare immagini di almeno 1024 pixel in larghezza e 1024 pixel in altezza. Se necessario, le immagini vengono automaticamente ridimensionate, perciò maggiore è la loro qualità meglio è.

Le foto ad alta risoluzione sono particolarmente importanti se utilizzi la funzione Zoom Immagine , che puoi attivare nell'editor del tema dalla sezione Pagine Prodotto :

Idealmente, le immagini in primo piano dei prodotti avranno tutte lo stesso rapporto tra larghezza e altezza, in modo da apparire al meglio sulle pagine di collezione.

Sei pronto/a per iniziare a vendere con Shopify?

Provalo, è gratis