Vous pouvez modifier les données du modèle personnalisé pour configurer des articles au niveau du produit sur votre site Web, par exemple en ajoutant des fonctionnalités supplémentaires aux pages de produit et à la catégorie de type de produit.

Nous vous recommandons de ne modifier votre modèle personnalisé que si vous maîtrisez parfaitement les langages HTML et CSS. Si ce n’est pas le cas, nous vous recommandons de faire appel à un expert. N’oubliez pas non plus qu’une fois l’éditeur de thème activé, vous ne recevrez plus de mises à jour de thème.

Activer les données de modèle personnalisé

Pour pouvoir modifier les données de modèle personnalisé, veuillez procéder comme suit :

1. Accédez à Paramètres > Processus.

   

2. Activez l’option Données de modèle personnalisé en utilisant le bouton bascule.

   

3. Cliquez sur Enregistrer.

La section Données de modèle personnalisé s’affiche.

Dans cette section, vous pouvez réaliser les actions suivantes :

• Pour ajouter une nouvelle variable, cliquez sur Ajouter une nouvelle variable, puis saisissez le Nom de la variable. Cochez ensuite les cases de votre choix pour sélectionner les pages sur lesquelles le champ de données doit apparaître. Cliquez sur Ajouter.
  • Vous pouvez ajouter jusqu’à 10 variables.

  

• Pour modifier une variable existante, cliquez sur Modifier. Modifiez les informations de la variable, puis cliquez sur Sauvegarder.

  

• Pour supprimer une variable, cliquez sur Supprimer. Confirmez ensuite sa suppression permanente en cliquant sur Supprimer dans la fenêtre contextuelle.
  • Vous ne pouvez pas supprimer les 3 premières variables (Data 01 [données 01], Data 02 [données 02] et Data 03 [données 03]).

  

Modifier les données de modèle personnalisé

Pour modifier les données du modèle personnalisé, veuillez procéder comme suit :

1. Accédez à Design > Éditeur de thème.
2. Cliquez sur Avancés.

   

3. Cliquez sur Modifier le code.

   

4. Une fenêtre contextuelle s’affichera pour vous avertir que la modification du code supprimera votre brouillon et que vous ne recevrez plus de mises à jour automatiques du thème. Vous pouvez rétablir le thème d’origine en le réinstallant à partir de la boutique de thèmes, mais cela entraînera la perte de vos modifications, de vos paramètres de thème et de vos images de thème. Cliquez sur la case à côté de I understand the risks and wish to proceed (je comprends les risques et souhaite continuer), puis sur Modifier le code.

   

Ajoutez les lignes ci-dessous aux sections appropriées du code du thème d’origine pour appeler les champs de données du modèle personnalisé.

{% if product.data_01 == 'link term' %}

Si la ligne data_01 (données_01) est renseignée, le code HTML suivant sera invoqué :

{% else %}

Si la ligne data_01 (données_01) n’est pas renseignée, le code HTML suivant (correspondant souvent au code d’origine) sera invoqué :

{% endif %}

Ces lignes de code créent une section conditionnelle IF-ELSE (si-sinon). Si le champ Data_01 (données_01) d’une page de produit de votre arrière-boutique est renseigné, le code de la section IF-ELSE (si-sinon) sera utilisé et déclenchera l’action définie par le link term (texte du lien) ; sinon, le code d’origine de la section ELSE (sinon) sera déclenché.

Le link term (texte de lien) peut correspondre à de nombreuses actions différentes, comme à l’ajout d’étiquettes aux produits ou à la suppression du bouton Ajouter au panier des pages de listes de produits et de détails de produits pour des articles spécifiques, par exemple.

Une fois que vous avez terminé de modifier les codes du thème, appelez les modifications à partir des paramètres du produit :

1. Accédez à Produits dans l’arrière-boutique Commerce électronique, puis cliquez sur Produits.
2. Sélectionnez le nom du produit.

   

3. Cliquez sur Données de modèle personnalisé.

   

4. Saisissez les textes de lien dans les champs Valeur correspondants.

   

5. Cliquez sur Enregistrer.

Exemple

Vous souhaitez écrire un code HTML/CSS permettant d’afficher une étiquette New (nouveauté) sur les images des nouveaux produits de votre boutique en ligne. Vous pourrez ainsi déterminer au niveau du produit les cas dans lesquels ce code doit être appelé.

Votre code devrait ressembler au code ci-dessous :

Section IF-THEN (si-sinon) :

Insérez le code HTML qui va afficher une étiquette New (nouveauté) sur les images des nouveaux produits :

{% if product.data_01 == 'New' %}

Section ELSE (sinon) :

{% else %}

Code d’origine qui sera appelé si le champ Data 01 (données 01) est laissé vide :

{% endif %}

Vous avez créé la section de code conditionnel IF-THEN/ELSE (si-alors/sinon). Si le champ Data 01 (données 01) d’un produit donné contient le texte de lien New (nouveauté), alors le code HTML que vous avez ajouté sous la section IF-THEN (si-alors) sera appliqué au niveau du produit. Sinon, les codes du thème d’origine resteront actifs.