Avant de commencer

S’assurer de créer une boutique de développement et d’avoir les accès propriétaires ou équipe. (Ajouter le compte du développeur en tant que “employé” sur la boutique de développement)
Préparer le lien de la boutique ainsi que l’organisation ou le compte github que l’on veut connecter à notre boutique.

Lister les fonctionnalités (section personnalisable / page personnalisée, etc … )

Premièrement, il faut lister les fonctionnalités nécessaires et attendues. Cette liste va être le fil conducteur du projet. Cela peut passer par une phase de conception graphique.

Paramétrer sa boutique

Bien penser à renseigner le maximum de contenu et ses différentes facettes.
Les pages, les collections ou les produits, en stock ou en rupture de stock, avec des variantes de tailles, de couleurs, en promotion, etc…
C’est important afin d’avoir une vue sur tous les types de contenu et de prendre en compte tous les états de ceux-ci pour concevoir le design de façon optimale. Cela s’avèrera très utile lors de la phase de test, rien ne sera laissé de côté.

Un thème sain, dans un environnement sain

Installer Shopify CLI : sur Mac avec homebrew

Shopify CLI est un outil de ligne de commande qui vous aide à créer des thèmes Shopify. Il vous permet de prévisualiser, tester et partager les modifications apportées aux thèmes tout en développant localement.

Initialiser le nouveau thème en utilisant Dawn

Récupérer le kit de départ / thème de départ (Dawn depuis la version Online Store 2.0)
C’est un avantage sur cette plateforme car cela fait gagner beaucoup de temps mais pas seulement.
De par la récupération d’un thème de référence par Shopify, on s’assure également de partir d’une arborescence propre et conforme à leurs bonnes pratiques.
Le but étant de travailler an le surchargeant pour l’améliorer selon nos besoins et de se servir des sections et gabarits comme référence de code.

Compléter en entrant le nom du thème, etc.
Une fois le thème Dawn cloné au nom de votre nouveau thème. Accéder au dossier de votre thème :

S’authentifier avec Shopify CLI

Dans le terminal, tapez shopify login –store <DOMAIN>, où <DOMAIN> est la boutique sur laquelle vous souhaitez vous connecter.
Vous serez redirigé vers votre navigateur et serez invité à vous connecter.

Prévisualiser votre thème

Une fois le thème initialisé, lancer shopify theme serve pour interagir avec le thème via le navigateur. Shopify CLI télécharge le thème en tant que thème de développement sur la boutique à laquelle vous êtes connecté.
La commande retourne une URL qui affiche en temps réel les modifications de JS/CSS et des sections. Cette Prévisualisation est uniquement disponible sur Google Chrome

Accédez à votre thème en local via l’url suivante : http://127.0.0.1:9292

Aparté sur Github Versionning

Shopify OS 2.0 ( pour Online Store 2.0 ) permet dorénavant d’implémenter un repo github directement via l’administration des boutiques. Cependant, cela implique de faire vérifier son thème par shopify dans l’objectif de le publier en vente sur le store. Mais ce n’est pas notre objectif premier car dans l’idée nous souhaitons faire notre thème le plus rapidement possible et de façon unique. Il est toujours intéressant de savoir que c’est tout à fait possible de mettre son thème sur le store public mais nous reviendrons plus tard sur ce sujet.

Améliorer l’existant

Le thème étant installé sur la boutique, tout est enfin prêt pour démarrer la personnalisation du thème.
Des gabarits de pages sont déjà disponibles par défaut comme la page d’accueil, page produits, page de collections ou une page de contenu.

Personnaliser au maximum les pages et sections existantes avec le système de personnalisation par défaut afin de vous familiariser au maximum avec le système et de repérer les paramètres dont vous avez besoin sans avoir à les créer vous-même. Travailler sur les paramètres de thèmes pour les styles globaux disponibles via le système de personnalisation du thème.

Ajout et création de fonctionnalités

Une fois le thème paramétré au maximum selon vos besoins, vous allez très certainement vouloir gagner en liberté et créer vos propres templates.

Pour mieux saisir la sémantique de chaque page voici l’illustration donnée par Shopify :

Pour voir les détails de leur architecture sur la documentation Shopify, c’est ici.

Les sections

Les sections sont codés dans des fichiers .liquid et il se comporte toujours de la même manière :

1. Structure : template html avec les variables/boucles avec la syntaxe .liquid
2. Schéma : format JSON qui répertorie les informations concernant la sections et définit les champs disponibles pour les blocs remplissant la section
3. Styles : emplacement pour apposer les styles concernant cette section uniquement ( ce n’est pas obligatoire )
4. Javascript : emplacement pour apposer les scripts concernant cette section uniquement ( ce n’est pas obligatoire )

Cas pratique : Création d’une section personnalisable

Lorsqu’on démarre le thème avec la commande : shopify theme serve. 3 urls nous sont retournées :

• Please open this URL in your browser :
  http://127.0.0.1:9292
• Customize this theme in the Online Store Editor :
  https://kernix-retail-new.myshopify.com/admin/themes/THEME_ID/editor
• Share this theme preview :
  https://kernix-retail-new.myshopify.com/?preview_theme_id=THEME_ID
  THEME_ID étant l’id du thème qui sera précisé après le lancement de la commande.

La seconde url sera donc l’url du BO personnalisation du thème pour, par exemple, ajouter votre nouvelle section sur la page d’accueil pour la tester.

Le thème local se recharge automatiquement lorsqu’on modifie le template.

Les sections se trouvent dans le dossier “sections”. Un fichier de section, fait donc appel à :

• un fichier de style dédié 
• la balise noscript en cas de désactivation du javascript et que le css soit simplement appelé 
• le template : reprenant en l’occurrence un titre, un texte, un lien de bouton et un texte de bouton 
• le schéma de la section comprenant les informations de la section et pouvant accueillir également des blocs répétables contenant des champs personnalisable 
• un emplacement pour les styles et un autre pour le javascript qui seront actifs qu’en cas d’appel de cette section

Il est important de noter que le presets dans le {% schema %} est indispensable pour nommer la section et ainsi, la rendre disponible lors de la personnalisation d’une page.

Créez une section nommée custom-text.liquid et copiez ce code à l’intérieur :

Ce qui correspond aux données personnalisables de notre section.

On lui associera :

• un nom libre
• un tag “section” car le template concerne une section
• une classe libre pour la div qui entourera la section
• des options dont un objet représentera un champ personnalisable, en l’occurrence
  • Pour le titre et le texte du bouton : un champ de type texte ayant pour id title avec une valeur par défaut et un label pour le champ pour préciser l’objet du champ.
  • Pour le Texte : Un champs de type richtext ayant pour id txt, une valeur par défaut et un label ayant la même utilité que pour le titre et le texte du bouton
  • Pour le lien du bouton : Un champs de type url avec pour id button_link_1 et un label

Une fois le schéma défini, on peut définir le template en utilisant les variables définis. De la façon suivante :

Les variables dans les fichiers .liquid sont assez faciles à repérer : entre 2 accolades {{ }} pour afficher la variable et une accolade suivi du signe pourcentage : {% %} pour placer des conditions (if, for, … ).

Nous avons donc repris les variables définies par le préfixe section.settings et en concaténant avec le nom de l’id du champ à afficher. De cette manière

Et voilà, la section est maintenant disponible pour la home et tous les autres templates également. Mais il reste maintenant à la publier.

shopify theme push sur le thème live et le tour est joué 😉

Nouveaux gabarits ( ou templates )

Pour mieux comprendre le système de gabarits nous allons utiliser un cas pratique

Cas pratique : Création d’un fichier de template

La création d’un template de page se fait dans le dossier templates où se trouvent les fichiers JSON. L’objet sections contient :

• “main” : dont est défini dans le “type” le nom du fichier de template au format liquid qui sera utilisé pour le template ( particulièrement pour récupérer le titre de la page ainsi que le contenu géré au sein même de la page dans l’administration de celle-ci )
• l’objet order contient le nom des objets définis dans sections et définit donc leur ordre d’affichage dans le template.

Dans cet exemple, c’est assez simple et cela est bien suffisant pour personnaliser votre page avec : Titre, Texte et sections personnalisées
Nous avons dupliqué le template de page par défaut ( page.json ) et y avons modifié le type “main-page” par “main-custom-page”.

Nous allons ensuite dupliquer le fichier /sections/main-page.liquid pour /sections/main-custom-page.liquid.

Et voici ce que nous avons :

Un fichier de template liquid, fait donc appel à :

• un fichier de style dédié (j’ai pris soin de dupliquer le fichier de style assets/section-main-page.css pour assets/section-main-custom-page.css pour l’appel);
  le fichier de style “component-rte.css” correspondant au fichier de styles de base pour les éléments de contenu éditable 
• le template : reprenant en l’occurrence le titre et le contenu de la page. ( on entend par “contenu”, le texte renseigné lors de la création de la page dans l’administration, non pas les sections libres ajoutées 
• le schéma comprenant les informations de la page et pouvant accueillir également des blocs et champs supplémentaires pour contenu additionnel de la page 

Il faut noter qu’un template correspond à une structure qui se répète pour chaque page utilisant le même modèle de page. Ce qui change entre deux pages utilisant le même template ( ou modèle de page ) ce sont les informations renseignées dans la page. Tout ce qui est personnalisé dans l’onglet “personnalisation” correspond aux informations globales du template et concerne donc ce qui sera utilisé pour toutes les pages utilisant le template personnalisé.

Nouvelles applications

Cette notion impose d’avoir son article à lui tout seul, nous reviendrons sur ce sujet dans un prochain article spécialement dédié au sujet. Ce qu’il faut savoir c’est qu’il est tout à fait possible, comme pour les thèmes, de créer des applications qui seront vouées à être utilisées sur un seul site et d’autres qui seront vouées à être commercialisées sur le store.

Conclusion et retour d’expérience

Avec le système Shopify-CLI et le nouveau système de personnalisation de thème 2.0, Shopify devient de plus en plus facile d’accès pour les développeurs mais aussi pour les utilisateurs souhaitant modifier l’affichage de leur(s) boutique(s).
Le développement en local permet très facilement de visualiser ses modifications avant de les déployer sur sa boutique en ligne.

Cela nous permet à Kernix de pouvoir apporter notre expertise front-design aussi sur les projets Shopify !