Accentsconagua

Novità per gli sviluppatori di temi Shopify nel 2017

Web design
Share

Come alcuni di voi potrebbero sapere dai miei articoli precedenti, Shopify è una piattaforma di commercio in hosting basata su temi che consente di creare negozi online. Negli ultimi anni è cresciuta costantemente e oggi è la piattaforma con oltre 400.000 aziende in circa 175 paesi. 

La piattaforma Shopify è in continua evoluzione e negli ultimi mesi sono state lanciate alcune funzionalità chiave, specificamente rivolte agli sviluppatori di temi e app. In questo articolo, esamineremo una selezione di queste nuove funzionalità e set di strumenti, tra cui:

  1. Aggiornamenti alla gestione delle immagini del tema
  2. sezioni
  3. blocchi
  4. ThemeKit e Slate
  5. Il sistema di design Polaris

Molti dei seguenti esempi discuteranno Liquido. Liquid è il linguaggio dei template che consente agli sviluppatori di temi di utilizzare segnaposti e costrutti logici nei loro modelli che verranno sostituiti con i dati del live store quando una pagina viene richiesta e resa. Utilizza una sintassi semplice che consente l'output (ad esempio un titolo di prodotto) e la logica (ad esempio a per ciclo continuo). Non entrerò in troppi dettagli qui, ma puoi vedere il mio screencast di 25 minuti che fornisce molti più dettagli su come funziona Liquid.

E mentre sei qui, potresti anche essere interessato al seguente post di ispirazione, per i temi disponibili su Themeforest:

  • 20 migliori temi di Shopify con bellissimi disegni eCommerce

    Costruire un sito eCommerce è un gioco da ragazzi quando hai i migliori temi Shopify tra cui scegliere. Un tema di qualità di Shopify ha le caratteristiche che ti servono, è sicuro ...
    Brenda Barron
    Shopify

1. Nuova gestione delle immagini tematiche

Iniziamo guardando uno dei principali cambiamenti relativi al tema che è accaduto di recente: il img_url Filtro liquido Fino a poco tempo fa le immagini sono state renderizzate in base a una serie di dimensioni nominate predefinite. Per esempio:

product.featured_image | img_url: 'grande'

Qui stiamo richiedendo l'immagine in primo piano per il prodotto in termini di dimensioni Grande. Ciò, supponendo che l'immagine originale avesse un lato uguale o maggiore di 600 px, rende l'immagine con il più lungo dei due assi pari a 600 px.

Queste dimensioni nominate sono ora deprecate e mentre continueranno a funzionare sono state sostituite da una nuova serie di parametri inclusi taglia, raccolto, scala, e formato. Questo ora rende possibile eseguire un'intera serie di manipolazioni relative alle immagini precedentemente non disponibili per gli sviluppatori di temi di Shopify.

Userò il img_url Filtro liquido in questi esempi ma le tecniche funzioneranno anche con i seguenti altri oggetti correlati all'immagine:

  • product_img_url
  • collection_img_url
  • article_img_url
  • asset_img_url

Iniziamo guardando come possiamo ridimensionare un'immagine. Per fare ciò, sostituiamo l'immagine ormai deprecata nome con una dimensione specifica in pixel. Ecco un esempio:

product.featured_image | img_url: '450x450'

L'uso della sintassi sopra ora mette nelle tue mani il controllo delle dimensioni dell'immagine: qui abbiamo specificato sia la larghezza che l'altezza (in questo ordine).

Puoi anche specificare solo una larghezza:

product.featured_image | img_url: '450x'

o solo un'altezza:

product.featured_image | img_url: 'x450'

Quando si specifica un valore singolo, Shopify calcola la dimensione rimanente in base alla dimensione dell'immagine originale, mantenendo intatto lo aspect ratio dell'immagine originale.

Tornando al nostro esempio originale, si potrebbe pensare che risulterebbe in una versione 450x450 dell'immagine da renderizzare. Questo, tuttavia, non è sempre il caso.

Questa richiesta risulterebbe in un quadrato perfetto, solo se sono soddisfatte entrambe le seguenti condizioni:

  • L'immagine originale era 450px o maggiore su entrambi gli assi
  • Entrambi i lati hanno la stessa lunghezza

Se entrambe le condizioni sono vere, verrà visualizzata un'immagine quadrata di 450 x 450. In caso contrario, Shopify lo ridimensionerà utilizzando la stessa logica di se hai specificato solo l'altezza o la larghezza. Il lato più lungo vince in questa situazione e viene ridimensionato di conseguenza.

Per creare immagini quadrate, è possibile utilizzare il parametro di ritaglio per garantire che le dimensioni dell'immagine risultante corrispondano alle dimensioni richieste. Se l'intera immagine non si adatta alle dimensioni richieste, il parametro di ritaglio specifica quale parte dell'immagine mostrare. Ci sono tre opzioni valide:

  • superiore
  • centro
  • parte inferiore
  • sinistra
  • destra

Questa funzionalità è disponibile da fine 2016, ma all'inizio del 2017 è stato rilasciato un aggiornamento che ha aggiunto ancora più flessibilità. I temi disponibili nel negozio tematico Shopify, incluso il tema premium Empire illustrato di seguito, fanno tutti uso di queste tecniche. L'installazione di un tema gratuito è un ottimo modo per imparare di più su come implementare queste idee.

Ora è possibile accedere direttamente alle proprietà di altezza, larghezza e proporzioni di un'immagine usando Liquid. Gli sviluppatori di temi sono ora in grado di utilizzare queste informazioni per offrire immagini dimensionate in modo appropriato per l'utente finale. Ecco un esempio usando srcset per delineare come è possibile trarre vantaggio da questo nei propri temi:
% per prodotto in collection.products% % assign image = product.featured_image% image.alt | fuga  % endfor%

In questo esempio, stiamo usando il assegnare Funzione liquida per creare una variabile chiamata Immagine è uguale all'immagine in evidenza dei prodotti attualmente visualizzati (che è impostata nell'amministratore di Shopify). Siamo quindi in grado di utilizzare la logica del liquido per creare il nostro srcset dichiarazioni usando, in questo caso, il larghezza proprietà:

% se image.width> 640% image.src | img_url: '640x' 640w % endif%

La buona notizia è che gli sviluppatori di temi non devono preoccuparsi di ricaricare tutte le loro immagini mentre Shopify ha indicizzato ogni immagine sulla piattaforma.

Altri due parametri che vale la pena discutere sono scala e formato. Il parametro di scala consente di specificare la densità di pixel dell'immagine. Puoi scalare su 2x o 3x a seconda delle tue esigenze:

product.image | img_url: '400x400', scala: 2

Il formato parametro consente di specificare il formato di file da utilizzare per l'immagine. Attualmente, puoi specificare entrambi jpg o pjpg (JPEG progressivo):

product.image | img_url: '400x400', formato: 'pjpg'

Puoi anche sfruttare questa tecnica per le immagini che si trovano nella cartella delle risorse del tuo tema. Per fare questo, usi il asset_img_url filtro. Ecco un esempio che fa anche uso del img_tag filtro che risulterà in una forma completa img elemento reso nel modello:

logo.jpg '| asset_img_url: '300x' | img_tag

Questi nuovi filtri per la manipolazione delle immagini e le proprietà delle immagini rendono finalmente possibile essere flessibili quanto è necessario quando si tratta di gestire le immagini, l'art direction e l'amicizia con i piani dati degli utenti finali.

2. Sezioni

Alla fine del 2016 Shopify ha introdotto "Sezioni". Questa nuova funzionalità consente agli sviluppatori di temi di creare un'interfaccia di amministrazione personalizzata che consente ai proprietari dei negozi di aggiungere, riordinare e rimuovere facilmente sezioni di contenuto quali prodotti, presentazioni, video o raccolte di prodotti. Si tratta di casi di utilizzo comuni, ma è possibile utilizzare letteralmente questa funzionalità per consentire ai proprietari dei negozi di aggiungere e modificare qualsiasi tipo di contenuto. Tutte le modifiche apportate all'amministratore possono essere visualizzate in tempo reale e una volta salvate saranno pubblicate nello store.

Le sezioni possono essere incluse staticamente nei modelli di un tema (come l'intestazione e il piè di pagina), oppure possono essere aggiunte e rimosse dinamicamente, tramite l'interfaccia di amministrazione, sulla home page di un tema. Nell'esempio sopra, che andremo tra poco, puoi vedere come siamo in grado di modificare una sezione statica che apparirà nel footer del negozio. Noterai anche il pulsante "Aggiungi sezione" che ci consente di aggiungere sezioni dinamiche, altre su quelle successive, alla homepage.

I modelli di sezione risiedono nella nuova cartella delle sezioni e possono essere referenziati in modo simile ai frammenti. Se il nostro file si trovava nelle sezioni / promotion.liquid, faremo riferimento come segue:

% sezione "promozione"%

Nota: non hai bisogno del .liquido estensione come è comune con gli snippet nei temi Shopify. Diamo un'occhiata a un esempio per aiutare a chiarire la potenza delle sezioni. Quanto segue è il contenuto di sezioni / footer.liquid:

 section.settings.title 
 
 section.settings.description 
 % schema% "nome": "Promozione footer", "impostazioni": ["id": "titolo", "tipo": "testo", "etichetta": "Titolo promozione", "predefinito": "Title", "id": "description", "type": "richtext", "label": "Aggiungi la tua descrizione di seguito", "default": "
Aggiungi la tua descrizione qui
"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%

Se hai familiarità con le impostazioni del tema di Shopify, alcune di queste potrebbero sembrare abbastanza familiari. Comprende una combinazione di HTML, segnaposti liquidi e JSON simili a quelli trovati in settings_schema.json. Per inciso, la funzionalità di settings_schema.json rimane ancora: sezioni solo aggiungere un ulteriore livello di funzionalità.

Nella parte superiore del modello è l'output HTML che vorrei generare quando il template incontra la sezione in fase di rendering. All'interno di ciascuno dei h1 e p gli elementi sono segnaposto liquidi che usano il nuovo section.settings. [x] sintassi dell'output. Nei nostri esempi, il nostro modello di sezione cercherà i dati corrispondenti a section.settings.title e section.settings.description.

Fin qui è bello e facile, ma come fa Shopify a sapere cosa riempire questi segnaposto? Tutto ciò discende dal JSON che ho menzionato prima annidato tra l'apertura e la chiusura % schema% tag.

 "nome": "Promozione footer", "impostazioni": ["id": "titolo", "tipo": "testo", "etichetta": "Titolo promozione", "predefinito": "Titolo", "id": "description", "type": "richtext", "label": "Aggiungi la tua descrizione di seguito", "default": "
Aggiungi la tua descrizione qui
"]

Affinché la nostra sezione venga visualizzata nell'area "Personalizza tema" dell'amministratore del negozio, dobbiamo dargli un identificativo: lo facciamo definendo il valore "nome" al livello più alto del JSON.

Successivamente, abbiamo il nodo impostazioni che ha, in questo esempio, due sottonodi. Entrambi contengono proprietà di id, genere, etichetta, e predefinito. Ognuno di questi, in base al loro valore, governerà il modo in cui viene resa l'interfaccia di amministrazione. Diamo un'occhiata a ciascuno a turno:

id

Una stringa di testo che verrà utilizzata internamente. Vale la pena notare che mentre gli ID devono essere univoci in un file di sezione, non devono essere univoci in tutti i file di sezione. Come tale è perfettamente OK avere un id di titolo in più file di sezione. Anche le impostazioni della sezione non saranno in conflitto con le impostazioni in settings_schema.json.

genere

Questo rappresenta il controllo che verrà reso all'interno dell'amministratore. Le opzioni più comunemente utilizzate sono le seguenti:

  • testo: Campi di testo a riga singola
  • textarea: Aree di testo multilinea
  • richtext: Un editor di testo avanzato
  • image_picker: Caricamenti di immagini
  • Radio: Tasti della radio
  • selezionare: Menu a discesa Selezione
  • casella di controllo: Caselle di controllo

Alcuni di questi richiedono ulteriore JSON per funzionare. Ad esempio, il controllo di selezione richiede opzioni per popolarlo. Ulteriori informazioni su come funzionano e su altri controlli che potresti voler prendere in considerazione sono disponibili nei documenti Shopify.

etichetta

Questo rappresenta l'etichetta HTML che verrà generata nell'amministratore sopra il tuo controllo.

predefinito

Questa impostazione consente di aggiungere valori di segnaposto al controllo. Vale la pena notare che questi sono i valori che verranno utilizzati fino a quando la sezione non sarà stata aggiornata dal proprietario del negozio.

Il mio esempio è piuttosto semplice e creerà due controlli. Il primo è un campo di testo a linea singola che verrà reso nel h1 elemento nel modello, il secondo è una casella di testo che fornisce le opzioni di grassetto, corsivo e URL.

Ci sono molte altre opzioni che puoi usare per esaltare l'amministrazione del tuo negozio, inclusa l'aggiunta di controlli personalizzati per URL, elenchi di prodotti e collezioni, nonché HTML personalizzato. Non li vedremo tutti in questo articolo, ma ti incoraggio ad approfondire le possibilità.

Noterai inoltre che puoi aggiungere CSS e JavaScript personalizzati ai file di sezione usando i seguenti tag Liquid:

% stylesheet% % endstylesheet%
% javascript% % endjavascript%

Potresti pensare che questo potrebbe aggiungere un sacco di CSS e JavaScript inline potenzialmente gonfiati al tuo tema. La buona notizia è che Shopify concatena tutti i CSS e JS in un singolo file che viene iniettato tramite il Liquid content_for_header segnaposto. La piattaforma garantisce che venga inclusa solo una singola istanza, anche se tale sezione viene utilizzata più volte su una pagina. Ulteriori informazioni su come vengono eseguiti gli script sono disponibili nei documenti Shopify.

Una volta impostati i controlli e i nomi nel file JSON, puoi includere la sezione in qualsiasi modello pertinente. Le sezioni possono essere aggiunte a un file di layout (lo skin esterno di una pagina) oa un singolo file di modello. L'amministratore di Shopify visualizzerà i controlli contestualmente: vale a dire solo durante la visualizzazione del modello pertinente nell'editor "Personalizza tema". La modifica dei valori comporterà un aggiornamento in tempo reale nell'amministratore: questo è un ottimo modo per vedere come le modifiche influiranno sul layout prima di aggiornare e spingere in tempo reale.

Se osservi l'HTML reso, noterai che le sezioni sono racchiuse in a div elemento:

L'ID del div assume il formato di Shopify-sezione- [id] , dove id è un ID univoco per quell'elemento per la pagina e senza specificare aggiunge una classe di Shopify sezione. Puoi anche aggiungere la tua classe all'elemento div specificando un valore di classe nelle tue impostazioni. Ecco come cercherebbe il nostro esempio sopra:

 "id": "titolo", "tipo": "testo", "Classe": "titolo", "etichetta": "Titolo promozione", "predefinito": "Titolo"

Questa aggiunta comporterebbe quanto segue:

Le sezioni sono una grande aggiunta ai temi di Shopify in quanto consentono agli sviluppatori di temi di abilitare le impostazioni contestuali in un intero negozio. Tuttavia, entrano davvero in proprio quando lavorano in tandem con la funzionalità dei nuovi blocchi.

3. Blocchi

I blocchi si basano sul concetto di sezioni e consentono ai proprietari di negozi di aggiungere più sezioni alla home page di un negozio. Diamo un'occhiata a come possiamo utilizzare i blocchi per aggiungere la possibilità di aggiungere un numero di scatole promozionali alla home page. Ecco il file di esempio con cui lavoreremo:

% per block in section.blocks% % if block.type == "promo-box"% 
block.settings.title
 
block.settings.description
 % elsif block.type == "image-picker"%  % endif% % endfor% % schema% "nome": "Blocchi promozionali", "max_blocks": 5, "predefiniti": ["nome": "Blocchi promozionali", "categoria": "Contenuto della home page personalizzata"], "blocchi": ["tipo": "promo-box", "nome": "Casella promozionale", "limite": 1, "impostazioni": ["id": " title "," type ":" text "," label ":" Title "," default ":" il tuo titolo qui ", " id ":" description "," type ":" textarea "," label " : "Descrizione", "default": "la tua descrizione qui"], "tipo": "image-picker", "nome": "Immagine promozionale", "impostazioni": ["id": "promo -image "," tipo ":" image_picker "," label ":" Immagine promozionale "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%

Sarò onesto, mi ci è voluto più di un po 'per capire come funzionano i blocchi. Tuttavia, una volta compreso come si integrano i pezzi, si aprirà una nuova serie di possibilità per lo sviluppo del tema.

Essenzialmente la home page può essere composta da più sezioni con ogni sezione in grado di contenere più blocchi. Il proprietario del negozio può quindi riordinare questi blocchi per creare un layout che meglio si adatta alle loro esigenze. Diamo un'occhiata a come questo differisce dall'esempio precedente per aiutare a chiarire alcuni concetti.

Innanzitutto noterai che c'è un liquido per loop nella parte superiore del modello:

% per block in section.blocks% % if block.type == "promo-box"% 
block.settings.title
 
block.settings.description
 % elsif block.type == "promo-image"%  % endif% % endfor%

Poiché questi molteplici elementi sono in balia del proprietario del negozio, noi, in quanto sviluppatori di temi, non abbiamo modo di sapere cosa dobbiamo produrre. Pertanto, abbiamo bisogno di utilizzare una struttura ad anello liquido, in questo caso a per loop, che ci consente di scorrere a turno tutti i blocchi presenti all'interno di una particolare sezione e di generare i dati rilevanti.

Nel frammento sopra vedrai che sto usando un semplice se / elsif  dichiarazione che controlla il tipo di blocchi corrente. Possiamo impostare noi stessi il tipo nello schema come vedremo tra breve. In questo esempio, usiamo ELSIF essere doppiamente sicuro del tipo che stiamo controllando. Se tu avessi solo due tipi di blocco distinti, come facciamo in questo esempio, potresti semplicemente altro come sapete è l'unica altra alternativa: quello ha detto che non fa male essere più difensivi.

A seconda del nostro tipo verrà prodotta una diversa sezione di HTML. Per produrre il valore associato al blocco, usiamo la seguente sintassi:

block.settings. [id]

[Id] rappresenta l'id dato a quel particolare elemento nel nostro schema che tratteremo in seguito.

Passando allo schema noterai alcuni elementi familiari e non familiari. Iniziamo guardando la parte iniziale:

"nome": "Blocchi promozionali", "max_blocks": 5, "predefiniti": ["nome": "Blocchi promozionali", "categoria": "Contenuto della home page personalizzata"]

Diamo un'occhiata a ciascuna parte a sua volta:

  • "nome": "Blocchi promozionali": Il nome che apparirà per questo gruppo di controlli nell'amministratore di Shopify
  • "max_blocks": 5: Il numero totale di blocchi che possono essere visualizzati in questa sezione. Questo funziona all'unisono con l'impostazione del limite di ciascun blocco che tratteremo in seguito. Una volta raggiunto il numero massimo di blocchi, non potrai aggiungere altro nell'amministratore.
  • "preset": Una serie di impostazioni predefinite per la sezione dinamica. Nell'esempio sopra vogliamo che il nostro elemento dinamico appaia sotto il titolo di "Blocchi promozionali" e nella categoria di "Contenuto della home page personalizzata". Il valore della categoria ci consente di raggruppare diverse sezioni in un gruppo nell'admin.

Una volta definito il nome, max_blocks, e valori preimpostati possiamo rivolgere la nostra attenzione ai controlli che vorremmo apparire nell'amministratore. Questi sono definiti nella sezione dei blocchi dello schema:

"blocchi": ["tipo": "promo-box", "nome": "Box promozionale", "limite": 1, "impostazioni": ["id": "titolo", "tipo": " text "," label ":" Title "," default ":" il tuo titolo qui ", " id ":" description "," type ":" textarea "," label ":" Description "," default " : "la tua descrizione qui"], "tipo": "promo-immagine", "nome": "Immagine promozionale", "impostazioni": ["id": "promo-immagine", "tipo": "image_picker", "label": "Promo Image"]]

Ogni blocco ha un numero di valori predefiniti:

  • "genere": Un nome assegnato a questo particolare gruppo di controlli. Questo può essere tutto ciò che vuoi, ma idealmente qualcosa di auto-esplicativo.
  • "nome": Il nome di questo particolare gruppo di controlli che desideri visualizzare nell'amministratore
  • "limite": Il numero di volte in cui desideri che questo particolare gruppo di controlli, ovvero questo blocco, compaia nella sezione. Lo esamineremo a breve.

Una volta definiti questi preset, è possibile passare a definire i controlli che si desidera visualizzare nell'amministratore. Questi sono definiti nelle impostazioni:

"impostazioni": ["id": "titolo", "tipo": "testo", "etichetta": "Titolo", "predefinito": "il tuo titolo qui", "id": "descrizione", "type": "textarea", "label": "Description", "default": "la tua descrizione qui"]

Nel nostro esempio, abbiamo due potenziali tipi di blocchi che possiamo aggiungere a questa sezione. Il primo è il tipo di blocco promo-box e il secondo è il tipo di blocco promo-image: entrambi i quali ci siamo definiti.

Ogni blocco può anche definire il proprio insieme di impostazioni che può consistere in uno o più controlli. Nell'esempio sopra, il blocco di tipo promo-box ha due controlli che verranno visualizzati quando aggiunti alla sezione. Il primo è un campo di testo e il secondo è un textarea. Per qualche ragione i blocchi non possono usare il richtext editor usato nel nostro esempio precedente ma a textarea ti consentirà di aggiungere HTML come richiesto. Come per le sezioni statiche, dobbiamo anche definire e id, genere, etichetta, e descrizione.

Ci sono un certo numero di tipi disponibili, tra cui:

  • testo: Campi di testo a riga singola
  • textarea: Aree di testo multilinea
  • image_picker: Caricamenti di immagini
  • Radio: Tasti della radio
  • selezionare: Menu a discesa Selezione
  • casella di controllo: Caselle di controllo
  • gamma: Cursori di distanza

Nell'esempio sopra, abbiamo anche definito un controllo immagine usando il image_picker valore. Ciò consentirà al proprietario del negozio di caricare un'immagine o sceglierne una già caricata nel negozio. Poiché questo ha il suo tipo, nome e impostazioni, il selettore di immagini verrà visualizzato come un'altra opzione che il proprietario del negozio può aggiungere a questa sezione dinamica.

Ho detto prima che il promo-box il blocco ha un valore limite di 1. Spero anche di ricordare che abbiamo definito il numero massimo di blocchi in questa sezione da 5. Quindi in questo scenario, è possibile avere una sezione composta da:

  • 1 "promo-box" e 4 "promo-immagini"
  • 5 "promo-immagini"

Una volta raggiunta una combinazione, non sarà possibile aggiungere ulteriori blocchi alla sezione a meno che non si elimini un blocco esistente.

Una volta che il template e lo schema sono pronti, e qualsiasi CSS e JavaScript aggiuntivi, dovrai aggiungere un ultimo pezzo di codice al modello index.liquid del tuo tema per attivare la funzionalità del blocco. Aggiungendo content_for_index to index.liquid Shopify sa di includere qualsiasi sezione che abbia uno o più preset definiti. Ogni preset diventa quindi una sezione dinamica che un commerciante può aggiungere alla sua home page del tema.

Nell'immagine qui sotto vedrai il risultato finale. Dopo aver fatto clic sull'amministratore, siamo in grado di aggiungere i nostri collegamenti o blocchi promozionali alla sezione dinamica. In questo caso ho scelto Blocchi promozionali e sono successivamente in grado di aggiungere ulteriori blocchi, ma solo le immagini promozionali, in quanto abbiamo specificato un limite di 1 nel nostro schema per il tipo "Casella promozionale".

Vale la pena notare che non solo puoi riordinare i blocchi dinamici all'interno di una sezione, ma puoi anche riordinare le sezioni genitore sulla home page come meglio credi. Una cosa da ricordare è che esiste un limite rigido di 25 sezioni che possono essere aggiunte alla homepage.

Le sezioni statiche e dinamiche e i loro blocchi successivi sono uno strumento molto potente. Mi ci è voluto un po 'per capire veramente i concetti, ma una volta cliccato si inizia ad apprezzare davvero il potenziale che offrono.

4. Kit tematico e lavagna

Una domanda che spesso mi viene fatta prima di sviluppare gli sviluppatori di temi di Shopify è il modo migliore per configurare un ambiente di sviluppo per lavorare con la piattaforma: oggi ci sono due grandi opzioni che ti permetteranno di iniziare.

L'anno scorso il team di temi di Shopify ha rilasciato il Kit di temi Shopify. Theme Kit è un singolo strumento a riga di comando binario (funziona su Windows, Linux e macOS) che, una volta installato, ti consentirà di:

  • Carica temi in più ambienti
  • Carica e scarica le risorse del tema
  • Controlla le modifiche locali e carica automaticamente sulla piattaforma Shopify

Il Theme Kit consente agli sviluppatori di temi di lavorare con i loro strumenti familiari (editor di testo, preprocessori, ecc.) E le modifiche sono sincronizzate in background con un negozio di sviluppo di Shopify. Se non hai guardato Shopify da una prospettiva di costruzione del tema prima di allora potresti non essere a conoscenza dei negozi di sviluppo.

Essenzialmente, sono completamente presenti nei negozi Shopify con una differenza: non è possibile effettuare pagamenti reali. Tuttavia, per poter dimostrare il flusso completo di checkout a un cliente, è possibile aggiungere un "gateway di pagamento fittizio". Puoi creare tanti negozi di sviluppo di cui hai bisogno tramite un account partner gratuito. Una volta pronto per il lancio, puoi semplicemente aggiornare il negozio a un piano a pagamento o distribuire il tema in un altro negozio.

Tema Kit offre una serie di comandi utili che consentono di interagire con i temi mentre si lavora in un ambiente di sviluppo locale. Una volta che l'installazione è possibile utilizzare il orologio comando che avvierà un processo per monitorare la directory in cerca di modifiche e caricarle su Shopify.

Shopify non può essere veramente "locale" (quindi le virgolette) in quanto avrai bisogno di una connessione Internet per lavorare con un negozio di sviluppo, ma l'integrazione di Theme Kit nel tuo flusso di lavoro lo fa sentire "locale". Utilizzato in combinazione con strumenti come Prepros, puoi anche approfittare di live ricaricando il tuo negozio di sviluppo, oltre a file di minification e concatenazione.

Nel 2017 Shopify ha anche lanciato Slate: uno scaffold a tema open source e uno strumento da riga di comando per lo sviluppo di temi Shopify. È progettato per assistere il flusso di lavoro dello sviluppo e accelerare il processo di sviluppo, test e distribuzione di temi nei negozi Shopify.

Mentre ThemeKit ti aiuta in una zona, l'ardesia va molto oltre. Oltre a fornire le funzionalità di sincronizzazione del tema di ThemeKit (ThemeKit è in realtà parte di Slate), consente anche di distribuire in più ambienti contemporaneamente, creare modelli di scheletro per un nuovo tema e organizzare fogli di stile e script in modo flessibile.

I modelli di scaffalature di Slate sono "intenzionalmente vuoti" (pagina iniziale nella foto sotto): i tag standard liquidi e la logica probabilmente da utilizzare su ogni modello sono stati inclusi con poco o nessun codice, classi o altro codice che sarà necessario eliminare. È inteso come un punto di partenza pienamente funzionante: tutto ciò che devi fare è compilare gli spazi vuoti e sei attivo e funzionante.

Infine, ci sono un sacco di helper JavaScript e Sass che puoi usare, oppure no se devi includere:

JavaScript

  • Messa a fuoco trappola
  • Tavoli e video reattivi
  • Valuta il formato
  • Aiutanti di immagini
  • Varianti di prodotto
  • Aiutanti del carrello
  • Sezione eventi

CSS

  • Punti di interruzione e domande dei media
  • Griglia
  • Icone SVG
  • Tavoli reattivi
  • Stati vuoti
  • Mixin di Sass

5. Polaris

Nel maggio 2017 Shopify ha aggiornato l'aspetto di tutte le sue applicazioni: sia sul desktop che sul cellulare. Per poter raggiungere questo ambizioso obiettivo, il team UX di Shopify ha sviluppato un nuovo sistema di design chiamato Polaris. È un sistema completo che non è destinato esclusivamente all'utilizzo interno a Shopify, ma anche ai partner Shopify che stanno costruendo interfacce per le app che si integrano tramite l'API di Shopify. Il suo scopo è quello di dare a chiunque le basi per creare interfacce che sembrano trasparenti con l'amministratore di Shopify.

Una delle caratteristiche principali di Polaris è l'ampia libreria di componenti. Ogni componente contiene spiegazioni sul problema che sta risolvendo, consigli sulle migliori pratiche, linee guida sull'utilizzo e codice di esempio sia per HTML che per React. Tutti i componenti sono disponibili anche come file di Sketch.

La libreria inclu

Web design
×