Aujourd’hui, on continue de parler de personnalisation du code Shopify, avec une série de modifications relatives à la navigation des internautes dans votre boutique.

On commence par évoquer la connexion au compte client, puis divers modes d’affichage qui peuvent aider vos visiteurs à mieux découvrir vos produits.

 

1/ Rediriger vos clients vers une nouvelle page lorsqu’ils se connectent

 

Suivez ces étapes :

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Templates », ouvrez le fichier « customers/login.liquid » dans l’éditeur de code.

Si ce fichier n’existe pas, cliquez sur « Add a new template », sélectionnez « customers/login » dans le menu déroulant des types de templates et cliquez sur « Create template ».

  • Dans l’éditeur de code de ce template, cherchez cette ligne de code :

{% form ‘customer_login’ %}

  • Créez une nouvelle ligne juste en dessous et ajoutez ceci :

<input type= »hidden » name= »checkout_url » value= »/pages/special-page » />

  • À la place de « value », notez l’URL de la place vers laquelle vous voulez rediriger vos clients après leur connexion.
  • Sauvegardez vos changements.

 

2/ Ajouter une aide à la navigation

 

Il s’agit d’une liste de liens qui montre au client sur quelle page il se trouve, ainsi que la liste de toutes les pages qui se trouvent en amont, de la plus éloignée à la plus proche, dans l’ordre de la navigation.

Cette aide (qu’on appelle navigation « breadcrumb ») s’affiche généralement de cette façon :

Vous pouvez ajouter cette aide à la navigation avec un snippet Liquid.

Le snippet va produire une liste de liens qui seront affichés au client quand il parcourt votre boutique, par exemple sous la forme : Accueil à Collection à Produits.

Cette personnalisation va prendre une forme différente en fonction des thèmes et c’est en faisant des tests que vous pourrez constater le rendu du vôtre.

Pour ajouter cette fonction :

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
  • Nommez ce snippet « breadcrumbs (sans les guillemets) et cliquez sur « Create snippet ».
  • Collez le code suivant dans votre snippet :

{% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %}

<nav class= »breadcrumb » role= »navigation » aria-label= »breadcrumbs »>

  <a href= »/ » title= »Home »>Home</a>

  {% if template contains ‘page’ %}

    <span aria-hidden= »true »>&rsaquo;</span>

    <span>{{ page.title }}</span>

  {% elsif template contains ‘product’ %}

    {% if collection.url %}

      <span aria-hidden= »true »>&rsaquo;</span>

      {{ collection.title | link_to: collection.url }}

    {% endif %}

    <span aria-hidden= »true »>&rsaquo;</span>

    <span>{{ product.title }}</span>

  {% elsif template contains ‘collection’ and collection.handle %}

    <span aria-hidden= »true »>&rsaquo;</span>

    {% if current_tags %}

      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}

      {{ collection.title | link_to: url }}

      <span aria-hidden= »true »>&rsaquo;</span>

      <span>{{ current_tags | join:  » +  » }}</span>

    {% else %}

      <span>{{ collection.title }}</span>

    {% endif %}

  {% elsif template == ‘blog’ %}

    <span aria-hidden= »true »>&rsaquo;</span>

    {% if current_tags %}

      {{ blog.title | link_to: blog.url }}

      <span aria-hidden= »true »>&rsaquo;</span>

      <span>{{ current_tags | join:  » +  » }}</span>

    {% else %}

    <span>{{ blog.title }}</span>

    {% endif %}

  {% elsif template == ‘article’ %}

    <span aria-hidden= »true »>&rsaquo;</span>

    {{ blog.title | link_to: blog.url }}

    <span aria-hidden= »true »>&rsaquo;</span>

    <span>{{ article.title }}</span>

  {% else %}

   <span aria-hidden= »true »>&rsaquo;</span>

   <span>{{ page_title }}</span>

  {% endif %}

</nav>

{% endunless %}

  • Sauvegardez les changements de code dans votre snippet.
  • Ouvrez ensuite le fichier « theme.liquid » dans votre éditeur de code.
  • Collez le code suivant à l’endroit où vous souhaitez faire apparaître la navigation « breadcrumbs » :

{% include ‘breadcrumbs’ %}

Il vous faudra probablement plusieurs tests pour trouver l’emplacement le mieux adapté à votre thème.

  • Sauvegardez les changements apportés à votre thème.

 

3/ Ajouter un menu

 

Avec cette personnalisation, vous pouvez ajouter un menu supplémentaire à votre thème.

Par exemple, vous pourriez vouloir ajouter une liste de collections dans le pied de page de votre boutique, sans utiliser l’un des menus préexistants dans votre thème, comme l’exemple de l’image ci-dessous :

Attention ! Cette personnalisation n’est pas compatible avec un menu multiniveaux.

Pour ajouter cette fonction :

  • Créez un nouveau menu incluant tous les liens que vous voulez faire apparaître, en procédant comme pour n’importe quel menu.
  • Ensuite, rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Cliquez sur le template ou snippet où vous désirez ajouter la personnalisation (dans le « footer » de votre thème, par exemple).
  • Collez dedans le code suivant :

<h3>Votre nouveau menu</h3>

<ul>

{% for link in linklists.your-new-linklist.links %}

   <li>{{ link.title | link_to: link.url }}</li>

{% endfor %}

</ul>

  • Personnalisez la mention « Votre nouveau menu » par l’intitulé que vous souhaitez montrer à vos clients.
  • Personnalisez le code « your-new-linklist » par le « handle » de votre menu (son nom unique).
  • Voici un aperçu du code inséré dans le fichier « theme.liquid », à l’intérieur du pied de page (zone « footer »).
  • Sauvegardez vos changements.
  • Si vous êtes à l’aise avec le langage CSS et la gestion des styles, vous pouvez personnaliser l’affichage de ce menu.

 

4/ Ajouter un menu de tri à vos collections

 

Si vous avez de grandes collections, il se peut que vous vouliez laisser vos clients changer l’ordre dans lequel les contenus des collections sont affichés (les thèmes les plus récents proposent généralement cette fonction par défaut).

Vous pouvez faire cela en ajoutant un menu de tri à vos pages de collections, comme dans l’image ci-dessous :

Pour obtenir ce résultat, vous allez devoir modifier le code de votre template « collection.liquid » :

Pour ajouter cette fonction :

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Templates », cliquez sur le fichier « collection.liquid » pour l’ouvrir dans l’éditeur de code.

Attention, pour le thème Brooklyn, ouvrez le fichier « collection-template-liquid » à la place.

  • Dans un nouvel onglet de votre navigateur, rendez-vous sur cette page, pour y récupérer le code proposé.
  • De retour dans le fichier ouvert dans votre administration Shopify, collez le code là où vous souhaitez le faire apparaître.

Dans le cas de Brooklyn, collez le code directement au-dessus de la ligne : {% if settings.collection_tags_enable %}

  • Sauvegardez vos changements.

 

5/ Lier entre elles les options des produits

 

Attention, cette personnalisation n’a pas été testée sur les thèmes avec section, ni avec les versions sans sections de Brooklyn, Jumpstart, Solo et Venture. Vous pouvez la tester, mais sans garantie de résultat.

Lorsque l’un de vos produits inclut deux catégories d’options, il peut être intéressant de ne pas afficher les options de deuxième niveau qui ne sont pas compatibles avec certaines options de premier niveau.

L’objectif est d’éviter que vos clients voient apparaître la mention « indisponible », parce qu’ils ont choisi une combinaison d’options inexistante.

L’idée est donc que la sélection de la première option réduise automatiquement les occurrences de la deuxième option à celles qui sont compatibles avec ce premier choix. La même logique va s’appliquer pour une troisième option, qui doit être compatible avec la première et la deuxième, etc.

Le système fonctionne selon le principe de l’entonnoir, du haut vers le bas, à la façon d’une adresse : un pays détermine une liste de départements, où chacun détermine à son tour une liste de villes, etc.

Par défaut, Shopify ne propose pas cette fonction et rend tous les choix disponibles, quelles que soient les combinaisons acceptées.

Pour mettre en place cette option :

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Snippets », cliquez sur « Add a new snippet ».
  • Nommez ce snippet « linked-options ».
  • Dans l’éditeur, collez le code à récupérer sur cette page.
  • Sauvegardez.
  • Dans le dossier « Layouts », ouvrez le fichier « theme.liquid » dans votre éditeur de code.
  • Vers la fin du code, juste avant la balise de fermeture </body>, collez le code suivant :

{% include ‘linked-options’ %}

  • Sauvegardez vos changements.

 

6/ Ouvrir les liens externes dans un nouvel onglet de votre navigateur

 

Attention, les étapes de ce tutoriel, selon que votre thème utilise ou pas des sections. Reportez-vous aux explications qui vous concernent.

  • Cas des thèmes avec sections

 

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Assets », cliquez sur le fichier « theme.js.liquid » pour l’ouvrir dans l’éditeur de code.
  • Collez le code suivant en bas du fichier :

$(document).ready( function() {

jQuery(‘a[href^= »http »]’).not(‘a[href^= »‘+$(location).attr(‘hostname’)+' »]’).attr(‘target’, ‘_blank’);

});

    • Sauvegardez.

 

  • Cas des thèmes sans sections

 

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Layout », cliquez sur le fichier « theme.liquid » pour l’ouvrir dans l’éditeur de code.
  • Localisez la balise de fermeture </body>, située vers la fin du code.
  • Collez le code suivant au-dessus de cette balise :

<script>

  jQuery(‘a[href^= »http »]’).not(‘a[href^= »{{ shop.url }} »]’).attr(‘target’, ‘_blank’);

</script>

    • Sauvegardez.

 

7/ Éditer les résultats des recherches dans votre boutique

 

Vous pouvez ajuster votre code pour que les recherches effectuées par vos clients n’incluent que des produits (comme dans l’image ci-dessous), que des pages ou que des articles de blog.

Attention, les étapes de ce tutoriel, selon que votre thème utilise ou pas des sections. Reportez-vous aux explications qui vous concernent.

 

  • Cas des thèmes avec sections

 

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Localisez le formulaire de recherche propre à votre thème.

Pour cela, recherchez le code « /search » et trouvez les balises de formulaire qui l’encadrent.

Certains thèmes n’en possèdent qu’un, d’autres deux (dans ce cas, le code devra être modifié à deux endroits).

Pour les thèmes gratuits de Shopify, le formulaire est à retrouver dans les fichiers correspondants :

Boundless : « search-template.liquid » dans le dossier « Sections ».

Brooklyn : « search-bar.liquid » dans le dossier « Snippets ».

Debut : « search.liquid » dans le dossier « Templates » et « search-form.liquid » dans le dossier « Snippets ».

Jumpstart : « search.liquid » dans le dossier « Templates ».

Minimal : « search-bar.liquid » « search.liquid » dans le dossier « Snippets » (attention, il y a deux instances du formulaire dans ce fichier, qui doivent toutes deux êtres modifiées).

Narrative, Pop et Supply : « search-bar.liquid » dans le dossier « Snippets ».

Simple : « search.liquid » dans le dossier « Templates » et « header.liquid » dans le dossier « Sections ».

Venture : « search.liquid » dans le dossier « Templates » et « search-bar.liquid » dans le dossier « Snippets ».

    • Entre les balises <form> et </form>, collez le code suivant :

<input type= »hidden » name= »type » value= »product »>

    • Le code ci-dessus va restreindre les résultats de recherché pour montrer seulement les produits.

Si vous voulez restreindre les résultats de recherche à un autre type de résultat, remplacez la valeur « product » du code précédent par « page » ou « article ».

    • Le code final du formulaire devrait ressembler à cela (avec des variantes qui dépendent de votre thème) :

<label class= »form-label–hidden »>

  <span class= »visuallyhidden »>{{ ‘general.search.placeholder’ | t }}</span>

</label>

<form action= »/search » method= »get » class= »input-group search-bar » role= »search »>

  <input type= »hidden » name= »type » value= »product »>

  <input type= »search » name= »q » value= »{{ search.terms | escape }} » placeholder= »{{ ‘general.search.placeholder’ | t }} » class= »input-group-field » aria-label= »{{ ‘general.search.placeholder’ | t }} »>

  <span class= »input-group-btn »>

    <button type= »submit » class= »btn icon-fallback-text »>

      <span class= »icon icon-search » aria-hidden= »true »></span>

      <span class= »fallback-text »>{{ ‘general.search.submit’ | t }}</span>

    </button>

  </span>

</form>

    • Sauvegardez.

 

  • Cas des thèmes sans sections

 

  • Rendez-vous sur la page « HTML/CSS », dans votre thème actif.
  • Dans le dossier « Layout », ouvrez le fichier « theme.liquid ».
  • Recherchez le code « /search » et trouvez les balises de formulaire qui l’encadrent.
  • Entre les balises <form> et </form>, collez le code suivant :

<input type= »hidden » name= »type » value= »product »>

    • Le code ci-dessus va restreindre les résultats de recherche pour montrer seulement les produits.

Si vous voulez restreindre les résultats de recherche à un autre type de résultat, remplacez la valeur « product » du code précédent par « page » ou « article ».

    • Le code final du formulaire devrait ressembler à cela (avec des variantes qui dépendent de votre thème) :

<label class= »form-label–hidden »>

  <span class= »visuallyhidden »>{{ ‘general.search.placeholder’ | t }}</span>

</label>

<form action= »/search » method= »get » class= »input-group search-bar » role= »search »>

  <input type= »hidden » name= »type » value= »product »>

  <input type= »search » name= »q » value= »{{ search.terms | escape }} » placeholder= »{{ ‘general.search.placeholder’ | t }} » class= »input-group-field » aria-label= »{{ ‘general.search.placeholder’ | t }} »>

  <span class= »input-group-btn »>

    <button type= »submit » class= »btn icon-fallback-text »>

      <span class= »icon icon-search » aria-hidden= »true »></span>

      <span class= »fallback-text »>{{ ‘general.search.submit’ | t }}</span>

    </button>

  </span>

</form>

    • Sauvegardez.
    • Dans le dossier « Templates », ouvrez le fichier « search.liquid ».
    • Répétez les étapes à partir de « Recherchez le code « /search »… »

 

8/ Utiliser les caractères non anglais dans les menus déroulants

 

Si l’intitulé de votre menu utilise des caractères arabes, hébraïques, cyrilliques, chinois ou japonais, votre thème aura certainement des difficultés à afficher le menu déroulant correspondant.

Utilisez le code Liquid suivant pour la navigation principale, dans le fichier « theme.liquid ».

<nav role= »navigation »>

  <ul id= »nav »>

    {% for link in linklists.main-menu.links %}

    {% assign has_drop_down = false %}

    {% assign child_list_handle = link.title | handle %}

    {% comment %}If the link uses the arabic, hebrew or cyrillic alphabet, or is in Chinese or Japanese, the handle will be empty.{% endcomment %}

    {% if child_list_handle ==  » %}

      {% for i in (0..8) %}

        {% unless has_drop_down %}

          {% if forloop.first %}

            {% assign temp = ‘link-list’ %}

          {% else %}

            {% capture temp %}link-list-{{ i }}{% endcapture %}

          {% endif %}

          {% if linklists[temp] and linklists[temp].links.size > 0 and linklists[temp].title == link.title %}

            {% assign has_drop_down = true %}

            {% assign child_list_handle = temp %}

          {% endif %}

        {% endunless %}

      {% endfor %}

    {% else %}

      {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}

        {% assign has_drop_down = true %}

      {% endif %}

    {% endif %}

    <li class= »nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if link.active %} active{% endif %}{% if has_drop_down %} dropdown{% endif %} »>

      <a class= »nav-item-link smooth » href= »{{ link.url }} »>

        {{ link.title }}

      </a>

      {% if has_drop_down %}

      <ul class= »sub-nav »>

        <li class= »sub-nav-niblet »></li>

        {% for l in linklists[child_list_handle].links %}

        <li class= »sub-nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %} »>

          <a class= »sub-nav-item-link {% if forloop.first %}first{% endif %} {% if forloop.last %}last{% endif %} » href= »{{ l.url }} »>{{ l.title }}</a>

        </li>

        {% endfor %}

      </ul>

      {% endif %}

    </li>

    {% endfor %}

  </ul>

</nav>

Le code intégral de cette personnalisation peut être retrouvé sur cette page.

La partie du code qui concerne les menus déroulants est :

{% assign has_drop_down = false %}

{% assign child_list_handle = link.title | handle %}

{% comment %}If the link uses the arabic, hebrew or cyrillic alphabet, or is in Chinese or Japanese, the handle will be empty.{% endcomment %}

{% if child_list_handle ==  » %}

  {% for i in (0..8) %}

    {% unless has_drop_down %}

      {% if forloop.first %}

        {% assign temp = ‘link-list’ %}

      {% else %}

        {% capture temp %}link-list-{{ i }}{% endcapture %}

      {% endif %}

      {% if linklists[temp] and linklists[temp].links.size > 0 and linklists[temp].title == link.title %}

        {% assign has_drop_down = true %}

        {% assign child_list_handle = temp %}

      {% endif %}

    {% endunless %}

  {% endfor %}

{% else %}

  {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}

    {% assign has_drop_down = true %}

  {% endif %}

{% endif %}

Voilà pour cet article.

Dans le prochain focus, nous aborderons la personnalisation du code en ce qui concerne le suivi des commandes.

À très bientôt pour la suite !