Risoluzione dei problemi del tema del negozio online

Le immagini potrebbero essere visualizzate in modo diverso da quanto previsto, ma ciò potrebbe essere dovuto al fatto che l'immagine stessa non è compatibile con l'uso che ne fai nel tema. Verifica che le dimensioni dell'immagine che stai utilizzando siano corrette. Consulta il seguente elenco di problemi di visualizzazione comuni che possono verificarsi quando si carica un'immagine non compatibile:

• Se l'header viene visualizzato più grande e l'immagine del logo più piccola del previsto, la causa potrebbe essere lo spazio bianco nel file dell'immagine del logo. Lo spazio bianco nel file può far sì che il logo appaia più piccolo e l'header più grande. Modifica il file immagine per verificare che sia ritagliato intorno al logo e che non ci siano spazi bianchi.
• Se l'immagine della presentazione viene ritagliata, si tratta di una scelta di design per garantire che le immagini vengano visualizzate allo stesso modo sui dispositivi mobili e desktop. Poiché i contenuti appaiono molto più piccoli sullo schermo di un dispositivo mobile, molti dettagli andrebbero persi ridimensionandoli. I contenuti vengono invece ritagliati per garantire che i dettagli non vadano persi. Un'immagine verticale (più alta che larga) può anche occupare molto spazio sul desktop. Per questo motivo, le immagini della presentazione hanno un'altezza massima. Puoi aggiungere un punto focale alle immagini della presentazione per garantire che il punto focale sia sempre al centro dell'immagine.

  Opzione altezza adattiva: molti temi Shopify includono un'impostazione di altezza adattiva per le presentazioni che regola l'altezza della presentazione in modo che corrisponda alla prima slide, riducendo il ritaglio su schermi di dimensioni diverse. Questa funzionalità è disponibile in tutti i temi attualmente supportati e sviluppati da Shoify.

• Se un'immagine GIF non viene visualizzata correttamente ed è stata aggiunta alla vetrina virtuale con il rich text editor, ad esempio nella descrizione del prodotto o in un articolo del blog, la causa potrebbero essere le dimensioni dell'immagine. Puoi risolvere il problema cliccando sulla GIF nel rich text editor e quindi su Modifica immagine. Nel menu a discesa Dimensioni immagine, seleziona Originale. Potrai quindi ridimensionare la GIF cliccando e trascinando gli angoli dell'immagine verso l'interno per rimpicciolirla o verso l'esterno per ingrandirla.
• Se le immagini sulla vetrina virtuale presentano un cambiamento di colore significativo rispetto all'originale, è possibile che non siano nei colori standard Red Green Blue (sRBG). Per risolvere questo problema, salva il file in un'applicazione di fotoritocco come sRBG. I termini comuni per questa operazione sono “Ottimizza per il web”, “Adatta immagine per il web” o “Salva per il web”. Scopri di più sui profili colore.
• Se le immagini dei prodotti nelle pagine di collezione non sono allineate, potrebbe essere necessario regolare le proporzioni nei file delle immagini dei prodotti in modo che abbiano lo stesso rapporto altezza/larghezza e quindi caricarle di nuovo. Puoi anche utilizzare un'app di fotoritocco dallo Shopify App Store.

Esamina i seguenti problemi e i relativi passaggi per la risoluzione:

• Prodotti mancanti: se mancano dei prodotti sulla vetrina virtuale, potrebbe essere necessario controllare lo Stato e i Canali di vendita nella sezione Pubblicazione del prodotto nel pannello di controllo Shopify. Verifica che lo stato del prodotto sia Attivo e che il prodotto sia disponibile per il Negozio online.
• Collezioni mancanti: se mancano delle collezioni sulla vetrina virtuale, potrebbe essere necessario controllare i Canali di vendita nella sezione Pubblicazione della collezione nel pannello di controllo Shopify. Verifica che la collezione sia disponibile per il Negozio online e che sia stata aggiunta ai menu.
• Collezioni visualizzate ma prodotti mancanti: se le collezioni vengono visualizzate ma mancano dei prodotti, potrebbe essere necessario controllare eventuali filtri per tag per la collezione nelle impostazioni dei Menu. Verifica che non ci siano tag nel campo Filtra collezione per tag che potrebbero impedire la visualizzazione dei prodotti.
• Valuta non corretta: se la valuta non viene visualizzata correttamente per i prodotti o nelle collezioni, ti consigliamo di controllare la Visualizzazione valuta nella sezione Impostazioni predefinite negozio in Impostazioni > Generali per verificare che non sia presente codice aggiuntivo. Scopri di più su come formattare la visualizzazione della valuta per i clienti.
• Alcuni prodotti vengono visualizzati in modo diverso: se alcuni prodotti o collezioni vengono visualizzati in modo diverso dagli altri, controlla il Modello di tema assegnato ai prodotti o alle collezioni nel pannello di controllo Shopify.
• Impossibile modificare i modelli di prodotto o di collezione: se i modelli di prodotto o di collezione predefiniti sono disattivati (in grigio) e non selezionabili nell'editor del tema, devi rendere disponibile almeno 1 prodotto o collezione per il canale di vendita Negozio online. Non puoi modificare questi modelli predefiniti senza avere prodotti o collezioni disponibili per visualizzare in anteprima le modifiche. Maggiori informazioni sulla modifica della disponibilità di una collezione e sull'impostazione della disponibilità dei prodotti nei canali di vendita.

Se i contenuti tradotti non vengono visualizzati correttamente o risultano mancanti nella vetrina virtuale, potrebbero esserci traduzioni obsolete o mancanti. I contenuti potrebbero anche trovarsi in un modello specifico per un mercato. Ogni volta che aggiungi nuovi contenuti nella lingua predefinita, ricorda di eseguire di nuovo la traduzione automatica o di aggiungere manualmente nuove traduzioni.

Ai contenuti tradotti possono essere applicati i seguenti stati:

• Tradotto: per i contenuti sono disponibili traduzioni.
• Obsoleto: i contenuti nella lingua predefinita sono stati aggiornati, ma le traduzioni non riflettono gli aggiornamenti.
• Non tradotto: non sono presenti traduzioni per questo tipo di contenuto.

Quando esamini i contenuti tradotti, aggiorna tutti quelli non tradotti o obsoleti; a quel punto, i contenuti tradotti dovrebbero essere visualizzati correttamente.

Scopri di più su come tradurre e localizzare il tuo negozio.

Se la vetrina virtuale e l’editor del tema non mostrano le stesse informazioni, controlla il modello di tema che stai modificando. Potrebbe essere necessario apportare modifiche ai modelli di tema per visualizzare le informazioni corrette.

Le personalizzazioni del mercato ti consentono di creare diverse vetrine virtuali per mercati diversi e di mostrare contenuti tradotti. Potresti aver lavorato involontariamente all'interno di un mercato specifico o B2B durante l'esecuzione degli aggiornamenti. Individua il contenuto con il menu a discesa Mercato nell'editor del tema per assicurarti che sia nei mercati corretti.

Scopri di più sulle personalizzazioni del mercato.

Tutti i temi disponibili nel Theme Store di Shopify sono temi adattivi, il che significa che il tema si adatta alle dimensioni dello schermo. Nell’editor del tema, puoi cambiare la visualizzazione per dimensioni dello schermo durante la modifica del tema per verificare che le pagine e le immagini vengano visualizzate correttamente. Scopri di più sulla visualizzazione delle diverse dimensioni dello schermo nell’editor del tema.

Molte sezioni e molti blocchi dispongono di impostazioni per dispositivi mobili che puoi personalizzare. Ad esempio, puoi impostare il Numero di colonne su dispositivo mobile nella sezione Prodotti correlati. Puoi controllare le impostazioni della sezione relative ai dispositivi mobili per ogni modello per risolvere eventuali problemi di visualizzazione sulle dimensioni dello schermo dei dispositivi mobili.

Alcune funzionalità del tema potrebbero essere visualizzate in modo diverso sui dispositivi mobili rispetto ai desktop per garantire che il tema sia accessibile su schermi di tutte le dimensioni. Ad esempio, su uno schermo di un desktop, la presentazione potrebbe avere una sovrapposizione di testo, in cui il testo viene visualizzato sopra l'immagine, spesso con un'opacità del colore dell'immagine o un'ombreggiatura del testo. Tuttavia, sugli schermi dei dispositivi mobili, il testo potrebbe essere visualizzato sotto la presentazione. Si tratta di una funzionalità di accessibilità progettata in modo che il testo sia leggibile su schermi di qualsiasi dimensione. Se il testo fosse invece una sovrapposizione, verrebbe visualizzato in modo molto piccolo sui dispositivi mobili, rendendone difficile la lettura.

Se la sezione della collezione in evidenza o le pagine di collezione mostrano dimensioni incoerenti o non sono allineate quando visualizzi la vetrina virtuale su un dispositivo mobile, il problema potrebbe essere dovuto a proporzioni incoerenti. Le griglie di immagini, come le immagini dei prodotti visualizzate all'interno di una collezione o di una collezione in evidenza, sono create per essere adattive alle dimensioni dello schermo. Se le immagini all'interno della griglia hanno proporzioni incoerenti, potrebbero essere visualizzate in modo diverso a seconda delle dimensioni dello schermo. Le immagini quadrate dei prodotti di 2048 x 2048 px di solito funzionano meglio nelle griglie di prodotti. Aggiorna le immagini in modo che abbiano proporzioni coerenti per l'ottimizzazione su tutte le dimensioni dello schermo. Scopri di più sulle proporzioni delle immagini.

A volte il codice HTML aggiunto nel rich text editor è in conflitto con il codice del tema. Se il problema si presenta su una singola pagina, come una pagina di prodotto, una pagina o un articolo del blog, potrebbe essere dovuto a codice HTML aggiuntivo. A volte può essere aggiunto copiando e incollando testo da un altro sito.

Controllo del codice HTML

Puoi controllare il codice HTML nel rich text editor.

Passaggi:

1. Vai alla pagina nel pannello di controllo.
2. Fai clic sul pulsante Mostra HTML per controllare il codice HTML.
3. Individua ed elimina qualsiasi codice HTML che potrebbe causare problemi di visualizzazione.
4. Fai clic su Salva.

Cancellazione della formattazione

Puoi evidenziare una parte del testo e cancellare la formattazione HTML.

Passaggi:

1. Vai alla pagina nel pannello di controllo.
2. Evidenzia il testo con problemi di formattazione.
3. Fai clic sul pulsante 🚫.
4. Fai clic su Salva.

Scopri di più sul rich text editor.

Se la vetrina virtuale include codice che reindirizza gli utenti a URL non collegati al tuo negozio, verifica che il reindirizzamento sia stato disattivato quando visiti l’editor del tema.

Ad esempio, questo tipo di reindirizzamento potrebbe essere aggiunto a una vetrina virtuale per indirizzare i clienti a diversi negozi Shopify a seconda della loro posizione. Questo tipo di codice di reindirizzamento potrebbe esistere nel tema o in un'app che hai installato.

Per verificare che il reindirizzamento non interferisca con l'esperienza dell'editor, utilizza un riferimento alla variabile window.Shopify.designMode in JavaScript per disattivare il reindirizzamento quando visiti l'editor del tema. Questa variabile è impostata su true quando la vetrina virtuale viene caricata nell'editor e su false in caso contrario.

Se hai blocchi comprimibili o altri blocchi del tema che mostrano lo stesso contenuto su tutte le pagine di prodotto, devi configurare le origini dinamiche con i metafield. Questo accade comunemente quando i merchant aggiungono informazioni specifiche sul prodotto, come ingredienti o istruzioni per la cura, a un prodotto, ma queste vengono visualizzate su tutti i prodotti.

I blocchi comprimibili mostrano lo stesso testo su tutti i prodotti

Quando aggiungi contenuti direttamente a un blocco comprimibile nell'editor del tema, tali contenuti vengono visualizzati su tutte le pagine dei prodotti. Per mostrare contenuti specifici del prodotto, devi utilizzare origini dinamiche con metafield:

1. Nel pannello di controllo Shopify, vai su Impostazioni > Metafield > Prodotti.
2. Fai clic su Aggiungi definizione.
3. Inserisci un Nome per il metafield, quindi fai clic su Seleziona tipo di contenuto.
4. Seleziona Testo e Testo su più righe.
5. Fai clic su Salva.
6. Vai a una pagina di prodotto nel pannello di controllo e scorri fino alla sezione dei metafield in fondo alla pagina.
7. Aggiungi i contenuti specifici del prodotto al metafield che hai creato.
8. Nell’editor del tema, vai al modello di prodotto e trova la sezione Riga comprimibile.
9. Nell’impostazione Contenuto riga, fai clic sul pulsante .
10. Seleziona il tuo metafield tra le opzioni disponibili.
11. Salva le modifiche.

Ora ogni prodotto mostrerà il proprio contenuto quando il metafield è compilato e non verrà mostrato alcun contenuto se il metafield per quel prodotto è vuoto.

Scopri di più su come visualizzare i metafield nel negozio online e su come utilizzare i metafield e i metaobject con le origini dinamiche.

Se nel codice del tema è presente un errore di sintassi, nell’editor del tema viene visualizzato un messaggio di avviso HTML error found o Theme error. Il messaggio di errore mostra il file Liquid che contiene l'errore.

Un messaggio di avviso The theme you're looking for couldn't be found potrebbe essere visualizzato in presenza di codice HTML corrotto. Il caricamento di una pagina nell'editor del tema può non riuscire per molti motivi, ad esempio:

• problemi di connessione di rete
• codice Liquid non valido nel tema

Puoi individuare le modifiche apportate nel codice del tema e correggere il codice. Se riesci a identificare il file esistente interessato, puoi ripristinarlo a una versione precedente disponibile nella visualizzazione Sequenza temporale dell’editor di codice.

Passaggi:

1. Fai clic sul file della sezione .liquid collegato nel messaggio di errore o controlla i file per le modifiche recenti. Verrai reindirizzato alla pagina Modifica HTML/CSS (Cascading Style Sheets) e il file si aprirà nell’editor di codice.
2. Sfoglia il codice nel file e cerca di trovare HTML o Liquid non validi. L’editor del codice mostra i potenziali errori di sintassi in rosso. I problemi più comuni includono:
   • Tag HTML di chiusura in più, ad esempio un </div> di chiusura senza un <div> di apertura
   • Tag HTML non chiusi, ad esempio un <div> di apertura senza un <div> di chiusura
   • Tag HTML malformati, ad esempio <div class="my-class" senza >
   • Codice Liquid malformato
   • HTML errato in un file frammento del tema incluso
3. Dopo aver individuato il problema, correggi il codice nel file del tema. Se usi la visualizzazione Sequenza temporale dell’editor di codice per selezionare una versione precedente e selezioni Ripristina contenuto, l’intero contenuto del file viene sostituito. Copia prima il contenuto attuale in un luogo sicuro se desideri conservare eventuali modifiche.
4. Fai clic su Salva.
5. Clicca su Modifica tema per tornare all’editor del tema e conferma che il messaggio di errore è scomparso.
6. Vai alla vetrina virtuale per verificare che venga visualizzata come previsto.

Errore «Exceeded maximum number of unique handles»

Se sulla homepage viene visualizzato un messaggio di errore Liquid come «Exceeded maximum number of unique handles for all_products», di solito significa che hai aggiunto troppe sezioni Prodotto in evidenza alla homepage (in genere più di 20 sezioni nella maggior parte dei temi).

Per risolvere il problema:

1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.
2. Trova il tema attuale e clicca su Modifica tema.
3. Vai alla homepage.
4. Rimuovi alcune sezioni Prodotto in evidenza per non superare i limiti del tema.
5. Valuta la possibilità di utilizzare le sezioni Collezione in evidenza, che possono mostrare più prodotti in modo più efficiente e migliorare le prestazioni del negozio.

Le icone di pagamento sono in genere incluse per impostazione predefinita nei footer della maggior parte dei temi per mostrare ai clienti quali metodi di pagamento accetti. Se le icone di pagamento non vengono visualizzate nel footer del tema, puoi controllare quanto segue:

1. Nell’editor del tema, vai alla sezione Footer e verifica che l’impostazione Mostra icone di pagamento sia attivata.
2. Dal pannello di controllo Shopify, vai a Impostazioni > Pagamenti e verifica che ci sia almeno un metodo di pagamento attivo. Per alcuni metodi di pagamento, potrebbe essere necessario completare la configurazione dell’account prima che vengano visualizzate le relative icone.
3. Se utilizzi un canale di pagamento di terze parti, le icone di pagamento potrebbero non essere visualizzate a causa delle limitazioni della piattaforma.

Se hai verificato queste impostazioni e le icone di pagamento continuano a non essere visualizzate, potrebbe essere necessario ricevere assistenza per il tema.