Thèmes modernes | Thèmes anciens

Installation dans les anciens thèmes (1.0)

Pour les anciens thèmes uniquement, cette application fournit un embed — un petit morceau de code que vous devez inclure dans votre thème pour mettre en place le fil d’Ariane. Une certaine expérience du code est nécessaire.

Vous devez sauvegarder votre thème avant d’y apporter des modifications.

Si vous n’êtes pas familier avec le code, je recommande vivement d’éviter les thèmes hérités ou anciens 1.0 et de rester sur les thèmes 2.0 par défaut, qui vous permettent d’utiliser l’éditeur de thème Shopify.

Les thèmes hérités sont basés sur des fichiers .liquid qui sont tous organisés différemment. Cette vidéo montre comment intégrer l’embed dans l’ancien thème par défaut 1.0, mais votre thème ne sera pas organisé à l’identique.</p>

  • Ouvrez votre thème actuel dans l'éditeur de thème Shopify.

  • Sélectionnez le fichier liquid approprié pour votre thème, parfois appelé collection.liquid, en mode édition.

  • Remplacez le fil d’Ariane existant par ce code d’embed conscient des catégories :

      {% include 'uncomplicated.categories.catbread' %}

Plus de vidéos pour vous aider à démarrer

Depuis notre chaîne YouTube :

Personnaliser l’apparence de votre fil d’Ariane pour les thèmes 1.0

L’apparence du fil d’Ariane est entièrement contrôlée par votre thème. Les couleurs ou styles peuvent varier dans différentes parties du modèle et entre différents modèles, mais ils sont tous contrôlés par le thème actuel.

Vous pouvez surcharger les styles de votre thème en plaçant du CSS dans l’un des fichiers .scss ou .css de votre thème. Veuillez ne pas modifier les fichiers uncomplicated…css car ils sont régénérés dynamiquement.

Par exemple, si vous voulez ajuster l’espacement entre les séparateurs (« > »), vous pouvez ajouter ce CSS à votre thème :

span.breadcrumb__sep {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

Désactiver temporairement ou désinstaller

Si vous voulez désactiver temporairement le menu, vous pouvez supprimer l’embed du liquid de votre thème. Coupez simplement le code liquid que vous avez inséré plus tôt.

Vous pouvez aussi le « mettre en commentaire » à l’aide des commentaires liquid.

Réduire la longueur du titre sur les pages produit

Parfois le titre du produit est très long, ce qui peut rendre le fil d’Ariane peu pratique. Vous pouvez contrôler la façon dont le titre du produit est tronqué (c’est-à-dire à quel moment les caractères sont remplacés par des points de suspension « … ») à l’aide d’une variable facultative dans l’embed inséré dans votre thème.

  • Par défaut, le titre du produit dans le fil d’Ariane sera tronqué (par ...) après 28 caractères.
  • Pour tronquer après un nombre différent de caractères, définissez truncate_limit à une autre valeur entière, par exemple 40 caractères. 
      {% include 'uncomplicated.categories.catbread', truncate_limit: 40 %}
  • Pour désactiver complètement la troncature et afficher le titre du produit en entier, définissez truncate_limit à -1. Par exemple : 
      {% include 'uncomplicated.categories.catbread', truncate_limit: -1 %}

Optimisation pour les moteurs de recherche avec JSON-LD

Un balisage spécial est inclus pour aider les moteurs de recherche à comprendre la structure de vos catégories. Cet article de Google explique cela plus en détail.

Dans des cas extrêmement rares, vous pourriez vouloir qu’une autre application génère et gère ces métadonnées JSON-LD. Vous pouvez désactiver l’ajout de JSON-LD à l’aide du drapeau disable_jsonld, par exemple :

{% include 'uncomplicated.categories.catbread', disable_jsonld:true %}

Si vous utilisez plusieurs embeds de catégorie, comme la liste de catégories, assurez-vous d’ajouter ce drapeau disable_jsonld à tous.

Retirer « Tous les produits » des fils d’Ariane hors collection

Le fil « Tous les produits » apparaît sur les fils d’Ariane hors collection pour certains produits. La meilleure façon de le supprimer est de s’assurer que tous vos produits figurent dans des collections présentes dans votre hiérarchie de catégories.

Il est toujours préférable d’utiliser des URL basées sur les collections (voir ci-dessus), mais vous pouvez aussi modifier le fil d’Ariane via CSS.

Si vous souhaitez masquer l’entrée « Tous les produits », ajoutez ce CSS dans un fichier de thème (pas dans uncomplicated…css) :

a[title="All Products"], span#uncomplicated-category-breadcrumb-top-separator.breadcrumb__allproducts {
    display: none;
}

Contrôler les suppositions pour les fils d’Ariane hors collection sur les thèmes 1.0

Sur les thèmes modernes (2.0), la supposition pour les fils d’Ariane hors collection se contrôle via les paramètres (voir « Afficher les fils d’Ariane sur les pages produit » dans la page d’aide principale).

Le conseil suivant ne s’applique qu’aux anciens thèmes 1.0, et même alors uniquement à ceux qui utilisent des URL courtes (non recommandé).

Pour chaque produit, Shopify fournit une liste non ordonnée des collections auxquelles ce produit appartient. Cette application ne contrôle pas l’ordre de la liste et utilise par défaut la première entrée pour générer le fil d’Ariane. En incluant un drapeau dans le code de l’embed, vous pouvez choisir d’utiliser :

  • ‘first’ : le premier fil d’Ariane possible de la liste (par défaut)

  • ‘last’ : le dernier fil d’Ariane possible de la liste 
      {% include 'uncomplicated.categories.catbread', prod_multicat_sel:"last" %}
  • ‘generic’ : créer un fil d’Ariane générique de la forme Accueil > Tous les produits > Nom du produit 
      {% include 'uncomplicated.categories.catbread', prod_multicat_sel:"generic", text_catall:"Tous mes produits", link_catall:"/collections/all" %}

Traduire certaines parties du fil d’Ariane

Là encore, les thèmes 2.0 sont une meilleure option, car la traduction automatisée via « Translate & Adapt » de Shopify y est intégrée.

Pour les anciens thèmes, l’essentiel du fil d’Ariane est constitué de noms de produits que vous contrôlez via le catalogue Shopify, avec deux exceptions :

  • La racine du fil d’Ariane (par défaut « Accueil »), configurable avec :
    • text_catroot — le texte affiché à la racine du fil d’Ariane
    • link_catroot — la cible du lien lorsque l’utilisateur clique sur la racine
  • Le premier et unique fil d’Ariane (par défaut « Tous les produits »), configurable avec :
    • text_catall — le texte affiché quand aucune collection n’est incluse dans l’URL
    • link_catall — la cible du lien lorsque l’utilisateur clique sur le premier fil d’Ariane

Exemple d’un fil d’Ariane personnalisé

Par exemple, un embed de fil d’Ariane fortement personnalisé peut ressembler à :

{% include 'uncomplicated.categories.catbread', text_catroot:"Racine", link_catroot:"/collections/all", text_catall:"Mes produits", link_catall:"/collections/all" %}

Si vous souhaitez masquer une partie du fil d’Ariane, vous pouvez la désactiver à l’aide de display:none en CSS.

Vous pouvez aussi rendre le dernier élément du fil d’Ariane en texte brut, plutôt qu’en lien vers la page actuelle non filtrée. Pour afficher le dernier élément sans lien, ajoutez show_finalbread_as_textonly à la liste de vos arguments d’embed :

{% include 'uncomplicated.categories.catbread', show_finalbread_as_textonly: true %}