Perchè mi è piaciuto lavorare ad un tema Shopify

Negli ultimi mesi ho avuto occasione di lavorare ad un tema Shopify: l’ho trovato intuitivo e ordinato e, differentemente da quanto mi era sembrato di capire prima di metterci mano, anche abbastanza flessibile.

Liquid, il linguaggio di templating di Shopify

Liquid è un linguaggio di templating in Ruby creato da Shopify.

Si trova open source su Github e grazie ad una combinazione di tags, objects, e filters consente di caricare i contenuti dinamici nelle pagine degli store. L’ho trovato davvero bello e facile da leggere come vanta il readme su Github. Ecco un esempio preso dalla pagina di prodotto:

<ul id="products">
  {% for product in products %}
    <li>
      <h2>{{ product.name | capitalize }}</h2>
      Only {{ product.price | price }}
      {{ product.description }}
    </li>
  {% endfor %}
</ul>

{% for %} {% endfor %} è un tag.
{{ product.name }} è un oggetto con attributo.
{{ product.name | capitalize }} è un filtro.

Struttura dei file

La struttura dei file si compone di poche cartelle con un nome abbastanza esplicativo di cosa contengono :

• assets
• config
• layout
• locales
• sections
• snippets
• templates

Layout & Templates

Dentro alla cartella layout si trova il theme.liquid che di default è il layout base per tutte le pagine, tutti i templates presenti nella cartella “templates” vengono renderizzati all’interno di theme.liquid.

Il template corrispondente alla pagina è individuabile in base alla url, ad esempio:

/search?q={search-term} → search.liquid
/products/{product-handle} → product.liquid

In caso di dubbi inserendo nel codice {{ template }} verrà stampato il nome del template senza l’estensione .liquid.

Oltre ai template già presenti è possibile creare template alternativi per tipologie di pagine, prodotti e categorie specifiche, applicabili poi semplicemente da admin come product.shoes.liquid, page.about.liquid.

Sections

La cartella sections contiene porzioni di codice customizzabili che possono essere aggiunte staticamente ( cioè da codice, come l’header e il footer) oppure dinamicamente, cioè dal pannello di controllo di Shopify, da chi gestisce il tema tramite il theme editor.

Le sezioni sono uno strumento che ho apprezzato molto perché offrono grande libertà di personalizzazione del tema e sono anche molto user-friendly per chi gestisce i contenuti del sito.

Nell’immagine sopra vediamo ad esempio una section dal nome “immagine con testo” che offre la possibilità di inserire un’immagine a tutta larghezza con un testo sovrapposto. Il codice della section conterrà una parte in cui vengono specificate le impostazioni a disposizione dell’utente nell’editor:

{% schema %}
    "name": “Immagine con testo”
  },
  "settings": [  
    "type": "image_picker",
    "id": "image",
    “label": "Immagine"
    },
    {
      "type": “text",
      "id": "heading",
      "label": "Heading",
      "default": “Immagine con testo"  
    }  
  ]
{% endschema %}

Ed una parte con il template in liquid che mostra i settings che verranno configurati:

<div class=“feature-image”>
    {{ section.settings.image | img_url: '600x600' }}
    {% if section.settings.title != blank %}
       <h2 class="h3">{{ section.settings.title | escape }}</h2>
    {% endif %}
</div>

Lo store owner potrà scegliere se aggiungere questa section ad una pagina ( una o più volte )e per ogni istanza specificare un testo ed un’immagine differente.

Snippets

La cartella snippets contiene parti di codice più piccole che necessitano di essere ripetute nel tema, paragonabili a partials o includes di altri linguaggi.

Hai detto “ambiente locale”?

Qui veniamo ad un punto per certi versi dolente.
Con Shopify non è possibile creare un vero e proprio ambiente locale, non esiste proprio un package di file scaricabili per replicare sulla propria macchina un ecommerce Shopify. I file del template funzionano solo se renderizzati sui server di Shopify.

Le possibilità a disposizione sono: utilizzare direttamente il theme editor (e qui vi vedo sobbalzare sulla sedia) che offre una buona visualizzazione del codice, la ricerca interna e anche un sistema di “versioning” dei file che consente di tornare a versioni precedentemente salvate;

oppure utilizzare Theme Kit un tool da terminale che consente di scaricare i files del tema e caricarli ogni volta che vengono modificati sui server Shopify. In questo modo è possibile utilizzare il proprio editor e collegare i propri file locali ad un repository per il versioning (anche se ovviamente occorrerà tenere allineato il repo con i files sul server “manualmente”). Non poter avere un ambiente in locale è un limite soprattutto nel momento in cui più persone lavorano allo stesso tema, che può essere solo in parte aggirato se si utilizzano theme kit e un sistema versioning.

In conclusione

Il templating di Shopify è abbastanza intuitivo e semplice da imparare, grazie anche ad un’ottima documentazione ed è uno strumento che mi è sembrato molto potente e flessibile per risolvere le necessità più comuni di molti store online.

Alcuni store italiani che hanno scelto Shopify: https://it.velasca.com/, https://www.rocketbaby.it/, https://shop.woolcrossing.it/