Après vous avoir présenté le fonctionnement des thèmes dans Shopify, puis les versions gratuites auxquelles vous avez accès, je vous propose de découvrir comment tout cela fonctionne derrière, avec une introduction à Liquid (le code qui anime Shopify), puis une série de manipulations concrètes qui peuvent vous intéresser.

 

Généralités à propos du code

 

Lorsque vous êtes sur la page de vos thèmes, cliquez sur « Actions / Edit HTML/CSS », dans votre thème actif, pour accéder à l’éditeur des fichiers qui conditionnent l’affichage et le design de votre boutique.

(Notez que vous pouvez aussi y accéder si votre « Theme editor » est ouvert, en cliquant en haut à gauche sur « More actions / Code »).

Quelques principes :

  • Dans cette page d’édition, vous pouvez voir les fichiers existants et en ajouter de nouveaux.
  • Les fichiers sont classés sous forme de répertoire, à l’intérieur de plusieurs grandes catégories.
  • Il suffit de cliquer sur le nom d’un fichier pour voir le code qu’il contient.
  • Plusieurs fichiers peuvent être ouverts en même temps, dans plusieurs onglets parallèles.

Les catégories de « rangement » (visibles dans la colonne de gauche) de ces fichiers sont :

  • « Layout » : les fichiers qui s’y trouvent contrôlent l’affichage du thème.
  • « Templates » : les fichiers qui s’y trouvent contrôlent l’affichage de parties spécifiques du thème, comme les pages produits ou des articles de blog.
  • « Snippets » : ici, vous allez trouver les petits morceaux de code utilisés par d’autres fichiers dans votre thème.
  • « Assets » : dans cette catégorie sont rangés les images, les polices d’affichage, les scripts et les feuilles de styles.
  • « Config » : les fichiers concernés contiennent les données de configuration et les réglages de votre thème.
  • « Locale » : ici, vous pouvez consulter les fichiers qui contiennent les textes relatifs à la langue de votre thème.
  • « Sections » : ces fichiers contrôlent l’affichage des sections de votre thème (dont nous avons parlé dans tous les focus précédents et qui se manipulent à votre niveau via le « Theme editor »).

Note importante : les modifications effectuées sur la plupart des fichiers relatifs au thème peuvent être annulées pour revenir à une version précédente, en cas d’erreur (nous verrons les manipulations ultérieurement).

Dans la suite de cet article (et dans d’autres focus à venir), je vais vous donner des manipulations de code courantes, qui vous permettent de modifier le fonctionnement et l’affichage par défaut de Shopify.

Attention, ces manipulations sont garanties fonctionnelles à partir du moment où vous utilisez l’un des thèmes gratuits vus jusqu’ici : il y a de fortes chances qu’elles fonctionnent aussi dans un thème Premium développé par des partenaires, mais il se peut qu’elles entrent en conflit avec d’autres réglages.

 

Modifications du code relatives à l’accès à la boutique

 

Voici deux types de changement du code qui concernent l’accès classique à la boutique :

  • Ajouter un message d’accès pour les boutiques qui vendent des produits réservés aux adultes, du type « Ce site propose des produits réservés aux personnes âgées de plus de 18 ans. Cliquez pour confirmer que vous êtes majeur ».

Attention : ce message n’est bien sûr qu’indicatif, puisque vous ne pouvez pas savoir si celui qui clique dit la vérité, et il peut aussi agacer l’ensemble de vos clients, puisqu’ils doivent effectuer un clic de plus.

  • Transformer la boutique en une « zone privée », via un formulaire d’accès qui bloque l’entrée des visiteurs qui ne sont pas membres.

Commençons par le message d’accès réservé aux adultes.

Vous devez d’abord créer et inclure un « snippet » de contrôle d’âge.

  • Pour cela, rendez-vous dans la catégorie « Snippets » de votre éditeur HTML/CC et cliquez sur son intitulé.
  • Cliquez ensuite sur « Add a new snippet », nommez-le « Age-check » (sans les guillemets), puis cliquez sur « Create snippet », ce qui ouvrira la page d’édition du fichier (qui portera donc automatiquement le nom « age-check.liquid »).
  • Ouvrez un nouvel onglet de votre navigateur, sans fermer celui de Shopify, et allez sur la page présente à cette adresse : https://github.com/carolineschnapp/age-check/blob/master/age-check.liquid
  • Dans cette nouvelle page, copiez tout le code disponible.
  • Revenez à votre onglet Shopify et collez le code dans la page d’édition de votre nouveau fichier.
  • Sauvegardez vos changements.

Ensuite, vous allez modifier le fichier principal du thème. Pour cela :

  • Rendez-vous dans la catégorie « Layouts », en cliquant sur son nom, pour y ouvrir le fichier « theme.liquid » dans l’éditeur.
  • Dans l’éditeur, faites défiler le code, jusqu’à voir la balise <body>.
  • Juste après cette balise, collez le morceau de code suivant : {% include ‘age-check’ %}
  • Cette manipulation va permettre que le snippet précédemment créé puisse être pris en compte par le thème.
  • Pensez à sauvegarder une nouvelle fois.

Ce que vous venez de faire va permettre la mise en route de la fonction.

Vous allez maintenant pouvoir personnaliser l’affichage du formulaire de contrôle d’âge :

  • Pour afficher une image de fond :
    • Téléchargez une grande image .jpg (au moins 1 024 pixels par 1 024 pixels) dans la catégorie « Assets » de la page d’édition du code (cliquez sur son intitulé, puis sur « Add a new asset »).
    • Renommez ensuite ce fichier avec l’intitulé suivant : « age-check-background.jpg » (sans les guillemets).
  • Pour modifier l’âge par défaut (18 ans) indiqué dans le formulaire, en fonction des particularités du pays où est enregistrée votre boutique :
    • Rendez-vous dans le fichier « age-check.liquid » que vous avez créé.
    • Remplacez {% assign age = 18 %} par {% assign age = 21 %}
  • Pour insérer une fonction de sélection de date de naissance :
    • Restez dans le code du même snippet.
    • Remplacez {% assign enter_date_of_birth = false %} par {% assign enter_date_of_birth = true %}
  • Si vos clients désactivent JavaScript sur leur ordinateur, ils ne verront pas le formulaire d’accès. Si vous voulez les empêcher d’entrer dans la boutique et les renvoyer vers une page d’explication :
    • Rendez-vous une nouvelle fois dans le fichier « Theme.liquid ».
    • Ajoutez, sur une ligne vide comprise entre les balises <head> et </head », le code suivant :

<noscript>

<meta http-equiv= »refresh » content= »1; url=/pages/age-check » />

</noscript>

    • Remplacez la mention « age-check » de ce code (indiquée ici en rouge) par l’adresse de la page Shopify vers laquelle vous désirez renvoyez ces personnes.

Attention, vous devez seulement noter le « handle » de l’adresse, c’est-à-dire la partie qui est située après la partie « racine » de l’adresse.

Par exemple, si l’adresse complète de la page en question est www.store.myshopify.com/verification-age, vous devez juste insérer « verification-age ».

Voilà pour cette modification particulière du code.

Passons maintenant à la transformation de votre boutique en un espace privé réservé à des membres.

  • D’abord, assurez-vous que la fonction « Customer accounts » est bien activée. Pour cela :
    • Rendez-vous dans la page « Settings / Checkout » de l’administration de votre boutique.
    • Dans la section « Customer accounts », cochez « Accounts are required ».
    • Sauvegardez.
  • Ensuite, retournez dans l’éditeur HTML/CSS de votre thème.
    • Choisissez le fichier « theme.liquid » de la catégorie « Layout ».
    • Dans le code, tout en haut, ajoutez :

{% unless customer %}

    {% if template contains ‘customers’ %}

        {% assign send_to_login = false %}

    {% else %}

        {% assign send_to_login = true %}

    {% endif %}

{% endunless %}

{% if send_to_login %}

<meta content= »0; url=/account/login?checkout_url={{ shop.url }} » http-equiv= »refresh » />

{% else %}

    • Puis, tout en bas, ajoutez :

{% endif %}

    • Sauvegardez.
  • Ensuite, changez la page vers laquelle les membres connectés sont automatiquement redirigés (étape optionnelle) :
    • Dans le premier des deux codes que vous venez d’ajouter, recherchez l’expression <meta content= »0; url=/account/login?checkout_url={{ shop.url }} » http-equiv= »refresh » /> et ajoutez, après « url », le handle de la page où vous souhaitez renvoyer les personnes.

Par exemple, si vous voulez qu’ils arrivent sur vos collections, vous obtiendrez une ligne de code complète qui devient celle-ci :

<meta content= »0; url=/account/login?checkout_url={{ shop.url }}/collections/all » http-equiv= »refresh » />

    • Sauvegardez.

 

Modifications du code relatives au blog de votre boutique

 

Dans les focus précédents, vous avez pu voir que certains des thèmes gratuits de Shopify (Debut et Minimal) vous donnent la possibilité de modifier l’un des critères d’affichage du blog de votre boutique : la suppression du nom de l’auteur des articles

Si vous utilisez l’un des thèmes gratuits qui ne sont pas concernés par cette option, vous pouvez modifier le code pour obtenir le même résultat.

Attention, la manipulation que je vous donne ci-dessous n’est valable que pour les thèmes qui fonctionnent avec les « Sections » et n’essayez donc pas de la transposer dans un thème développé avant octobre 2016 par des tiers qui n’utilisent pas les fonctions ! (je vous explique plus bas quoi faire pour ces thèmes-là et je vous rappelle que la définition des sections est accessible dans l’un des premiers focus de cette série)

Suivez les étapes suivantes :

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Cliquez sur la catégorie « Templates », puis sélectionnez le fichier « blog.liquid ».
  • Utilisez la fonction Ctrl+F (ou Command+F, sur un Mac) pour localiser la balise qui suit : {{ article.author }}
  • Supprimez-la.
  • Si votre thème est Simple ou Supply, vous allez supprimer une ligne de code plus longue : {{ ‘blogs.article.author_on_date_html’ | t: author: author, date: date }}

Vous pouvez choisir de conserver la date. Dans ce cas, après la suppression précédente, remettez ce bout de code : {{ date }}

  • Sauvegardez.

Ensuite :

  • Dans la catégorie « Sections », cliquez sur « article-template.liquid » (ou, si vous utilisez le thème Boundless, rendez-vous dans la catégorie « Templates », puis cliquez sur « article.liquid »).
  • Utilisez la fonction Ctrl+F (ou Command+F, sur un Mac) pour localiser la balise qui suit : {{ article.author }}.
  • Supprimez-la.
  • Si votre thème est Simple ou Supply, vous allez supprimer une ligne de code plus longue : {{ ‘blogs.article.author_on_date_html’ | t: author: author, date: date }}

Vous pouvez choisir de conserver la date. Dans ce cas, après la suppression précédente, remettez ce bout de code : {{ date }}

  • Sauvegardez.

Dans le cas où vous voulez obtenir le même résultat avec un thème non fourni par Shopify et qui n’utilise pas les sections, suivez les étapes suivantes :

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Cliquez sur la catégorie « Templates », puis sélectionnez le fichier « blog.liquid ».
  • Utilisez la fonction Ctrl+F (ou Command+F, sur un Mac) pour localiser la balise qui suit : {{ article.author }}
  • Supprimez-la.
  • Toujours dans la catégorie « Templates », cliquez sur « article.liquid ».
  • Utilisez la fonction Ctrl+F (ou Command+F, sur un Mac) pour localiser la balise qui suit : {{ article.author }}
  • Supprimez-la.
  • Sauvegardez.

Voilà pour la suppression du nom de l’auteur.

Autre modification que vous pouvez mettre en place : afficher immédiatement les commentaires laissés sur vos articles, sans modération ni délai. Attention, cet affichage immédiat ne concernera que l’auteur de l’article lui-même, l’affichage public étant géré par Shopify et prenant généralement quelques minutes.

  • D’abord, vérifiez que vous avez désactivé la modération des commentaires dans la boutique. Pour cela :
    • Rendez-vous dans « Online Store / Blog Posts ».
    • Cliquez sur le bouton « Manage blogs ».
    • Sélectionnez le blog.
    • Sélectionnez « Comments are allowed and are automatically published ».
    • Sauvegardez.
  • Ensuite, pour supprimer le délai habituel de vérification des commentaires (qui est dû au système de vérification des spams) :
    • Rendez-vous dans le code du fichier « article.liquid ».
    • Ajoutez le code suivant :

{% if comment and comment.created_at %}

<div class= »comment »>

… your just-published comment …

</div>

{% endif %}

{% if article.comments.size > 0 %}

… your other comments …

{% endif %}

Voilà pour ce focus !

Dans le prochain, je vous donnerai d’autres façons de personnaliser le code de votre boutique, avec notamment de nombreuses modifications relatives à la fonction du panier.

À très bientôt pour la suite !