fb
Schedule a Meeting

Suggerimenti per lo sviluppo di siti Shopify personalizzati migliori

This post is also available in: English (Inglese) Deutsch (Tedesco) Français (Francese)

A differenza delle sue controparti, Shopify è diventato un nome familiare per chiunque contempla di avviare un negozio online. Con una vasta gamma di funzionalità, è riuscito ad attirare i suoi clienti e ha evoluto i suoi temi e la capacità di coprire il maggior numero possibile di tipi di business. Col passare del tempo, molti stormi di Shopify per cercare il tema perfetto per il loro primo negozio.

A partire da Shopify può sembrare ogni eccitante e facile nel primo passaggio, ma può essere molto scoraggiante una volta che si inizia a costruire il tuo sito. Trovare il tuo tema perfetto è solo l’inizio. Quello che segue è molto di più che usare il tema così com’è. Come sviluppatori shopify, è necessario avere un solido ritmo di sviluppo per determinare come il tuo sito andrà a finire. Anche se la piattaforma è più ricercata per la costruzione di un negozio online, ma per voi, è nuovo. Acquisire familiarità con esso può richiedere un po ‘di tempo e richiederà una certa esperienza e conoscenza su come le cose possono essere modificate per lavorare per voi in modo univoco.

In WebBee Global, amiamo la creazione di app e temi Shopify personalizzati. Abbiamo già speso un sacco di tempo in ricerca e sviluppo con una varietà di metodi. Alcuni hanno lavorato mentre altri sono state apprese. Tuttavia, l’esperienza è stata alimentata ed è per questo che abbiamo compilato alcuni punti per gli sviluppatori da tenere a mente durante la costruzione di siti su Shopify.

Usa questi suggerimenti per lo sviluppo come pietre miliari per creare siti Shopify ricchi di funzionalità per te e i tuoi clienti:

1. Utilizzare il controllo della versione per la gestione del lavoro

Molti sviluppatori utilizzano più temi per archiviare e controllare il codice sorgente. Anche se ci può essere la tentazione di farlo, si sarà meglio memorizzare la base di codice in un repository di versione remota. Il motivo è che, tramite questo metodo, il codice rimane organizzato, evitato e offre una cronologia completa di tutte le modifiche. Più tardi, nel caso in cui, le cose vanno a sud, si può sempre tornare a una versione a tema stabile facilmente.

Un altro punto è come gestire temi, rami, funzionalità, più sviluppatori e modifiche che si verificano attraverso l’editor di Shopify online dopo aver iniziato a utilizzare il controllo della versione. Se si dispone di più sviluppatori che lavorano nello stesso archivio, assicurarsi che ogni dev funzioni su rami e temi separati. Mantenere il ramo master “in produzione pronto” e unirlo solo dopo che gli altri rami sono stati testati all’interno del tema. In questo modo non pubblicherai inavvertitamente alcun lavoro a metà operazione.

La buona pratica è che questo caso sarebbe quella di scaricare le modifiche apportate all’interno dell’editor dei temi online e incorporarle nel repository dopo che sono state apportate.

Prestare attenzione a unire le modifiche nell’ordine corretto e sapere quale commit si apporta. In questo modo tutte le modifiche vengono archiviate nel repository prima di passare all’archivio e il repository gestisce il codice e non i temi.

2. Concentrati di più sulla gemma a tema Shopify per svilupparsi a livello locale

Anche se Shopify è basato sul cloud, non puoi sfidare lasciando un’istanza locale del software e ottenere di lavorare in locale. Un approccio migliore sarebbe quello di caricare i file del tema e visualizzare direttamente le modifiche su un negozio Shopify online. Fai uso giudiziario della gemma del tema Shopify attraverso il quale puoi tenere attivamente un orologio sulla tua directory e puoi caricare automaticamente i file sul tema come devi salvare i file.

Tuttavia, nei momenti in cui si lavora su un piccolo progetto con modifiche minime, lavorare sull’editor online è un’opzione sicura. La modifica online significa che non dovrai mai affrontare problemi con la sovrascrittura di un file non sincronizzato con le modifiche locali.

3. Trascorrere un po ‘di tempo con Liquid

Liquid è un linguaggio altamente decifrabile e comunicativo basato su Ruby che funge da intermediario tra i dati di un negozio e i suoi modelli di tema utilizzati da Shopify. Se sei nuovo di zecca di Liquid, è il momento di familiarizzare con esso.

Leggere su Liquid ti aiuterà ad acquisire conoscenze su come puoi sfruttare la potenza dei file di modello e layout alternativi. È più facile di quanto pensi e ti faciliterà personalizzare il tuo sito professionalmente.

4. Consenti Grunt per Sass e JavaScript Compiling

Ricordare che Liquid non deve essere un linguaggio di programmazione, ma essere utilizzato per la creazione di markup per i dati di output che si sta lavorando con è importante. Consegnare i dati a JavaScript è a volte una scelta migliore, soprattutto per i progetti di grandi dimensioni in cui potresti trovarti bloccato in cicli infiniti.

Poiché Shopify ha un parser Sass, è possibile utilizzarlo per compilare e strutturare css e JavaScript. A tale scopo, è possibile utilizzare diversi metodi e modi. Il modo più semplice è quello di creare un nome di cartella ‘Sass’ all’interno della directory principale del tema, per contiene varie cartelle e file.

Consenti l’attività Grunt per la compilazione Sass e JavaScript che la inserisce in un unico file prezioso della directory assets. Questo faciliterà il lavoro per voi e sarà più elegante rispetto all’utilizzo di Liquid per fare lo stesso.

5. Astratto quando possibile

Una semplice regola empirica dice, quando si crea un tema per un client, il tema non deve archiviare i dati. Il tema deve essere costruito senza codifica rigida il più possibile e ricordare di astrarre quando possibile. Poiché il tuo cliente sarà l’utente principale del sito, utilizza contenuti riconoscibili e mantienilo semplice. La ragione di questo è quello di consentire al client di gestire il sito senza preoccuparsi per semplici aggiornamenti.

6. Controllare i tempi di caricamento e le prestazioni

Tieni sempre una scheda sul rendimento del tuo sito con ogni funzionalità che aggiungi durante lo sviluppo. Puoi utilizzare gli strumenti di sviluppo di Google Chrome per testare rapidamente le prestazioni e individuare colli di bottiglia all’interno dei temi.

Controlla immagini, JavaScript e compressione CSS in quanto sono i più ovvi. Ma anche guardare fuori per il calcolo liquido e JavaScript intenso. Se possibile, non eseguire il rendering del contenuto della pagina che è principalmente nascosto.

7. Fare buon uso di frammenti

Un altro ottimo modo per suddividere la logica in file separati è quello di fare uso di frammenti liquidi. I frammenti sono facili da capire rispetto ai markup ed è meglio averli. Aiuta a risparmiare tempo che la maggior parte di noi spreca nella caccia a quel tag div non divulgato che è impossibile da trovare.

Con l’uso di frammenti, il contenuto è organizzato logicamente e il markup diventa facile da seguire. Questo ha eliminato anche la duplicazione. Utilizzare i frammenti per riutilizzare una sezione di markup in più file.

8. Creare endpoint JSON personalizzati per Dynamic Data

L’utilizzo delle viste modello può fare la differenza quando si desidera creare una differenza nel proprio lavoro. Ogni modello può essere utilizzato per uno scopo separato e personalizzato per una particolare vista.

Personalizza le pagine dei prodotti con nomi univoci e parametri di visualizzazione nell’URL per indicare a Shopify di utilizzare un modello specifico. In questo modo verranno creati i dati desiderati in qualsiasi pagina all’interno dell’archivio.

Conclusione

Sono sicuro che i suggerimenti di cui sopra aiuteranno a improvvisare il processo di sviluppo per Shopify. Ogni progetto è unico e ha esigenze diverse, e quindi l’approccio migliore può essere deciso solo dopo aver compreso la complessità del progetto e le esigenze del cliente.

Dovresti attenerti a ciò che funziona per te, ma continuare a cercare modi innovativi per ottimizzare il tuo flusso di lavoro.

Scroll to top
Schedule a Meeting
close slider