Share
Ho usato per la prima volta Shopify non molto tempo dopo il suo lancio nel 2006. Ho apprezzato il fatto che fosse una piattaforma di e-commerce con un prezzo competitivo e semplice da usare. Ma soprattutto, la sua funzione tematica è ciò che mi è piaciuto di più. Esaminiamo alcune semplici tecniche che ti consentono di controllare i tuoi temi Shopify e offrire un'esperienza ancora più artigianale ai tuoi clienti.
I temi di Shopify (di seguito semplicemente i temi) sono facili da costruire. Oltre ai nostri strumenti quotidiani di HTML, CSS, JavaScript, i temi utilizzano un linguaggio modello chiamato Liquid. Voglio andare oltre le nozioni di base in questo articolo per mostrarti alcune tecniche che ho utilizzato recentemente per caricare il tuo sviluppo del tema Shopify. Se non hai familiarità con i temi, puoi saperne di più sul Wiki Shopify.
Tutti i checkout di Shopify sono ospitati in modo sicuro nel dominio di Shopify.
I temi ti consentono di controllare la tua casa, le tue collezioni e le singole pagine dei prodotti. Ecco un tipico URL di Shopify che mostra un singolo prodotto:
http://store.theheadsofstate.com/products/chicago-travel-poster
"The Heads of State" è un sito Shopify prodotto con amore che mette in mostra i loro prodotti molto bene. L'URL sopra riportato ti porta al loro Poster di viaggio di Chicago, ma se tu, come me, sei un po 'un pedante di URL, allora potresti essere tentato di tornare a:
http://store.theheadsofstate.com/products/
Questo URL ti porta a una pagina che sembra non disegnata rispetto al resto del sito. Dubito fortemente che ciò sia dovuto a una mancanza di riflessione da parte dei designer. In realtà è colpa di Shopify; i temi attualmente non supportano un modello nativo per la pagina disponibile su /prodotti (o / collezioni - i due sono intercambiabili in questo contesto). Invece, il file di layout predefinito esegue un elenco delle raccolte disponibili.
Per fortuna, si può rapidamente riprendere il controllo di questa pagina e usarla a proprio vantaggio. Nel tema layout.liquid file, è possibile sostituire content_for_layout con il seguente frammento di codice:
% if template == 'list-collections'% % include 'collection-listing'% % else% content_for_layout % endif%
Quindi, crea un file chiamato raccolta-listing.liquid e salvarlo nella cartella dei frammenti. Se qualcuno visita il / collezioni o /prodotti pagina, il nostro file di layout esegue il rendering e include il nostro frammento di codice anziché l'elenco predefinito.
Ecco un rapido esempio di come è possibile ridisporre l'elenco delle raccolte utilizzando il proprio markup. Nota che abbiamo accesso a Shopify collezioni identificatore in questa pagina:
Collezioni di prodotti
% per raccolta nelle raccolte% % a meno che collection.handle == 'frontpage'%
- collection.title % endunless% % endfor%
Puoi trovare maggiori informazioni sulle variabili a tua disposizione nel collezioni raccolta sull'eccellente foglio dei trucchi di Shopify. Si noti come si usa Liquid logic per escludere la collezione con a maniglia di fronptage. Si tratta di una raccolta utilizzata spesso in temi per la visualizzazione di elementi nella home page, ma la escludiamo perché viene utilizzata più a fini di amministrazione rispetto a un raggruppamento logico di prodotti correlati. Questa tecnica consente di mantenere lo stile coerente e aggiungere dati aggiuntivi o elementi di design come meglio credi.
... le lumache di parole sono conosciute come maniglie.
Quando inizi per la prima volta con i temi, ti viene presentato il concetto di layout. Per impostazione predefinita, Shopify cerca un file di layout predefinito chiamato layout.liquid, che vive nel nome appropriato disposizione cartella.
Ci possono essere occasioni in cui il tuo design richiede un layout alternativo. Un approccio consiste nell'utilizzare le istruzioni condizionali per mostrare / nascondere il contenuto in base a una variabile, ad esempio un particolare prodotto o una pagina di raccolta. Ma un'altra alternativa è usare un file di layout completamente diverso. Questa potrebbe essere una soluzione molto più semplice se hai bisogno di markup diversi. Tutto ciò che serve per applicare un layout alternativo è aggiungere il seguente codice all'inizio del modello:
% layout "prodotto"%
Ciò impone al modello di utilizzare un file di layout chiamato product.liquid trova nel tuo tema layout cartella.
È inoltre possibile specificare che nessun layout debba essere utilizzato specificando nessuna, come questo:
% layout "none"%
Se hai usato WordPress, probabilmente avrai familiarità con l'idea di a lumaca. È un nome univoco assegnato a un post o una pagina specifici utilizzati in un URL. Ad esempio: "my-first-page". In Shopify, le slug di parole sono conosciute come maniglie. Questi vengono generati automaticamente quando si crea un prodotto, ma ovviamente è possibile cambiarli se lo si desidera. Le nostre maniglie dei prodotti sono disponibili anche per noi nel nostro product.liquid modello. Possiamo usare maniglie per dettare il nostro modello di prodotto. Ecco un modo in cui potremmo fare questo:
% se product.handle == 'my-new-t-shirt'% % include 'my-new-t-shirt'% % else% // Il tuo codice product.liquid standard va qui % finisci se %
In questo esempio controlliamo se l'handle del prodotto della richiesta corrente è "my-new-t-shirt" e includo uno snippet chiamato "my-new-t-shirt" se è vero. Questo equivale a includere un file chiamato my-new-t-shirt.liquid che risiede nella cartella snippet.
Per fare un ulteriore passo avanti, potresti cambiare lo standard product.liquid in un frammento. Mi piace questo approccio perché mantiene il tuo modello principale come un controller logico, isolando piacevolmente il markup della presentazione nei propri file.
Questo modello può essere leggermente modificato per usare il assegnare e Astuccio metodi, come questo:
% assign handle = product.handle% % case handle% % quando 'big-t-shirt'% % include 'big-t-shirt'% % quando 'small-t-shirt' % % include 'small-t-shirt'% % else% % include 'product-standard'% % endcase%
È inoltre possibile utilizzare l'handle del prodotto per assegnare diverse classi CSS al tag nei tuoi file di layout. Per esempio:
% case template% % quando 'product'% % altro % % endcase%
Ovviamente potresti estendere questa tecnica per personalizzare il tag basato su qualsiasi numero di criteri.
Tutti i checkout di Shopify sono ospitati in modo sicuro nel dominio di Shopify. Per alcuni, essere indirizzati a una pagina di pagamento generica può essere un po 'sconcertante in termini di esperienza utente. Puoi, comunque, modellare il tuo checkout usando i CSS. Ecco cosa devi fare:
Accentsconagua
checkout.css nella cartella delle risorse del tema.!importante regola per ottenere i risultati desiderati.
Assicurati di dare un'occhiata al wiki per gli esempi completi.
Puoi anche usare Liquid nella tua checkout.css file. Innanzitutto, rinominare il file CSS in checkout.css.liquid. Quindi puoi iniziare a usare i filtri liquidi. Ecco un esempio:
/ * Inserisci il tuo logo (carica separatamente nella cartella delle risorse) * / #logo height: 65px; background: url ('logo-checkout.png' | asset_url | sostituisci: 'http: //', 'https: //') centro nessuna ripetizione; È sorprendente come alcune modifiche al CSS di base possano allineare il checkout generico con il tuo progetto. Assicurati di controllare tutti i modelli del processo di checkout; il tuo CSS si applicherà a un numero di schermi.
Le impostazioni del tema ci consentono di utilizzare l'Admin di Shopify per controllare i dati che possiamo utilizzare nei nostri temi. Casi di uso comune sono le linee di cinturini, le combinazioni di colori a livello di sito e la selezione di immagini personalizzate da visualizzare nelle gallerie di scorrimento attorno al sito. Per abilitare le impostazioni nel tuo tema, crea semplicemente a settings.html file (nota senza estensione .query) e iniziare ad aggiungere gli elementi del modulo pertinenti. Ad esempio, puoi includere quanto segue nel tuo settings.html il file consente la modifica della linea del cinturino del sito:
Si noti come imposto il valore predefinito. Questo è importante, specialmente quando si tratta di valori CSS. Per accedere a questo valore nel nostro tema, facciamo semplicemente riferimento in Liquid come segue:
settings.site_strapline
Possiamo anche sfruttare le impostazioni del tema nei nostri file CSS principali aggiungendo il .liquido estensione al nostro file CSS principale. Per esempio:
body color: settings.text_color; background-color: settings.bg_color;
È molto importante fornire valori predefiniti per questi colori nel tuo settings.html file. In caso contrario, il file CSS standard può essere creato senza un valore. Leggi di più sul wiki: http://wiki.shopify.com/Theme_Settings
Shopify fornisce anche un'API JavaScript e le informazioni sul "carrello" per l'utente corrente sono direttamente disponibili tramite un URL molto semplice. Basta aggiungere il .js estensione all'URL del carrello per ottenere una rappresentazione JSON del carrello. Ecco un esempio:
"token": "7b0f09aca710a4ce688325a8add36c6b", "note": null, "attributi": null, "total_price": 0, "total_weight": 100.0, "item_count": 1, "items": ["id": 229848636 , "title": "Insites: The Tour Coasters", "price": 0, "line_price": 0, "quantità": 1, "sku": "", "grammi": 100, "fornitore": "Viewport Industrie "," proprietà ": null," variant_id ": 229848636," url ":" / products / insites-the-tour "," image ":" http://cdn.shopify.com/s/files/1 /0151/6407/products/png_1.png?783 "," handle ":" insites-the-tour "," requires_shipping ": true]," requires_shipping ": true
Questo ti dà un'estrema quantità di flessibilità e potere creativo. È possibile creare un pop-up JavaScript che mostri il contenuto del carrello o iniettare una presentazione che evidenzi i prodotti scelti. Naturalmente, puoi fare queste cose nei tuoi modelli, ma questo ti offre più opzioni per fornire un'esperienza utente migliore.
Come con tutte le piattaforme, ci sono molti modi per affrontare lo stesso problema, ma spero che questi sei suggerimenti si dimostrino utili e utili per te quando sviluppi il tuo prossimo tema di Shopify.
