Tips PrestaShop : Astuces et conseils pratiques pour votre boutique https://www.thierry-creation.fr Intégrateur Freelance – Spécialisé Prestashop Thu, 24 Jul 2025 14:51:13 +0000 fr-FR hourly 1 Comment adapter votre stratégie SEO à l’ère des IA génératives (GEO) ? https://www.thierry-creation.fr/comment-adapter-votre-strategie-seo-a-lere-des-ia-generatives-geo/ https://www.thierry-creation.fr/comment-adapter-votre-strategie-seo-a-lere-des-ia-generatives-geo/#respond Tue, 03 Jun 2025 14:30:24 +0000 https://www.thierry-creation.fr/?p=18357

Les IA génératives comme ChatGPT, Perplexity ou Claude bouleversent le référencement. Les recherches se font désormais via des questions conversationnelles, et ce sont les marques les plus claires et cohérentes qui bénéficient de la visibilité. Pour rester compétitif dans ce nouveau paysage, appelé GEO (Generative Engine Optimization), voici 6 conseils concrets.

1. Créez une marque unique et identifiable

Dans le GEO, les IA favorisent les entités solides et cohérentes. Assurez-vous que votre marque :

  • Ne possède pas d’historique ambigu ou confus (nom déjà utilisé ou associé à un autre domaine).
  • Dispose de pages “À propos” et “Équipe” détaillées expliquant qui vous êtes et pourquoi vous êtes légitimes.
  • Présente chaque produit avec des descriptions claires et détaillées : listes à puces, tableaux et informations clés.

2. Soyez cohérent dans vos informations

Les IA s’appuient sur la cohérence des données. Un prix ou délai différent selon les pages peut perturber l’algorithme :

  • Vérifiez que prix, garanties, caractéristiques et délais soient identiques partout.
  • Actualisez rapidement vos contenus en cas de changement.

3. Travaillez vos sources et partenariats

Les IA exploitent des bases comme Common Crawl et des sites d’autorité. Pour maximiser votre présence :

  • Vérifiez si vos sites sont bien crawlés par Common Crawl et optimisez leur structure.
  • Collaborez avec des éditeurs et plateformes pour ajouter ou corriger des mentions de votre marque.
  • Ciblez les listings, tops et comparatifs qui sont fortement repris par les IA.

4. Adaptez vos contenus et backlinks

Les IA privilégient les données précises et actionnables, pas uniquement les mots-clés :

  • Incluez des détails chiffrés : prix, délais, garanties.
  • Précisez le public visé (TPE, PME, grands comptes, particuliers).
  • Favorisez les citations de marque dans les contenus sponsorisés, même sans lien direct.

5. Intégrez les techniques GEO à vos compétences

Le GEO est une évolution du SEO, pas un nouveau métier. Pour ne pas perdre du terrain :

  • Formez-vous à l’optimisation pour IA : cohérence sémantique, citations, mises à jour régulières.
  • Surveillez vos performances et ajustez vos stratégies selon les nouvelles tendances.

6. Diversifiez votre visibilité hors Google

Les IA favorisent les marques visibles et crédibles. Pour renforcer votre autorité :

  • Développez votre présence sur LinkedIn, YouTube, Instagram et TikTok.
  • Misez sur une notoriété durable et cohérente plutôt que sur des hacks rapides.

Conclusion : une opportunité à saisir dès maintenant

Le trafic issu des IA représente encore environ 5 % du trafic global, mais il génère déjà plus de conversions que le trafic classique et croît rapidement. En appliquant ces conseils, vous pouvez asseoir votre visibilité dans l’écosystème des IA et devancer vos concurrents.

Envie de booster votre stratégie SEO et GEO ? Contactez-nous pour un audit complet et un plan d’action personnalisé.

FAQ : SEO et IA génératives (GEO)

Qu’est-ce que le GEO (Generative Engine Optimization) ?

Le GEO désigne l’optimisation de la visibilité d’une marque ou d’un site dans les réponses générées par les IA comme ChatGPT, Perplexity ou Claude. Il s’agit d’une extension du SEO classique.

Pourquoi le trafic issu des IA est-il important ?

Bien que représentant encore environ 5 % du trafic global, le trafic généré par les IA convertit mieux que le trafic classique et progresse rapidement, ce qui en fait un levier stratégique.

Comment améliorer sa visibilité auprès des IA génératives ?

Créez une marque unique et cohérente, maintenez des informations précises (prix, garanties), collaborez avec des éditeurs et intégrez des données factuelles dans vos contenus.

Faut-il abandonner le SEO traditionnel pour le GEO ?

Non. Le GEO complète le SEO. En optimisant votre marque, vos contenus et votre popularité, vous maximisez votre visibilité à la fois sur Google et dans les réponses des IA.

]]> https://www.thierry-creation.fr/comment-adapter-votre-strategie-seo-a-lere-des-ia-generatives-geo/feed/ 0 Tips PrestaShop #3 : Ajouter une Popup Guide des tailles sur la fiche produit https://www.thierry-creation.fr/tips-prestashop-3-ajouter-une-popup-guide-des-tailles-sur-la-fiche-produit/ https://www.thierry-creation.fr/tips-prestashop-3-ajouter-une-popup-guide-des-tailles-sur-la-fiche-produit/#respond Sun, 19 Jan 2025 14:35:17 +0000 https://www.thierry-creation.fr/?p=17246

Facilitez la prise de décision de vos clients en ajoutant un guide des tailles accessible en un clic ! Plutôt que de rediriger vos visiteurs vers une nouvelle page, cette astuce vous permet d’afficher votre page CMS « Guide des tailles » directement dans une popup sur la fiche produit

📌 Pourquoi ajouter un guide des tailles en modale sur Prestashop ?

Dans une boutique e-commerce, proposer un guide des tailles clair et accessible permet de :

  • ✔ Réduire le taux de retour en aidant les clients à choisir la bonne taille.
  • ✔ Améliorer l’expérience utilisateur en évitant de rediriger vers une autre page.
  • ✔ Optimiser le taux de conversion en supprimant les doutes des acheteurs.

Avec un peu de Smarty, JavaScript et CSS, nous allons ajouter un lien sous la description courte des produits qui ouvrira une popup modale Bootstrap contenant la page CMS du guide des tailles.

🛠 Étape 1 : Modifier product.tpl pour ajouter le lien

Ouvrez le fichier product.tpl dont voici le chemin :

Code
/themes/votre_theme/templates/catalog/product.tpl

recherchez la ligne :

Code
<div id="product-description-short-{$product.id}" class="product-description">{$product.description_short nofilter}</div>

Juste en dessous, ajoutez le code suivant :

Code
<p id="guide_tailles"> <a href="#" id="open_guide" class="js-modal" data-cms-id="6"> 📏 Voir le guide des tailles </a> </p>

📌 Important : dans : data-cms-id= Remplacez 6 par l’ID correct de votre page CMS correspondant à votre Guide des tailles.

Vous trouverez l’id de votre page dans l’administration, dans :  apparence > pages

guide des tailles Prestashop

🎭 Étape 2 : Ajouter le JavaScript pour ouvrir la modale

Ouvrez le fichier suivant (s’il n’existe pas vous pouvez au préalable le créer) :
Code
/themes/votre_theme/assets/js/custom.js

Ajoute le code suivant :

Code
document.addEventListener("DOMContentLoaded",function(){let guideLink=document.querySelector("#open_guide");if(guideLink){guideLink.addEventListener("click",function(e){e.preventDefault();let cmsId=guideLink.getAttribute("data-cms-id");let cmsUrl="/index.php?controller=cms&id_cms="+cmsId+"&content_only=1";$.get(cmsUrl,function(data){let cmsContent=$(data).find(".page-cms").html();if(!cmsContent){console.error("Impossible de récupérer le contenu de la page CMS.");return} let modalHtml=` <div id="modal_guide_tailles" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Guide des tailles</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ${cmsContent} <!-- Contenu CMS injecté directement --> </div> </div> </div> </div>`;$("body").append(modalHtml);$("#modal_guide_tailles h5.modal-title").css("display","none");$("#modal_guide_tailles .modal-header").css({"padding":"15px 15px 0px 15px","border-bottom":"none"});$("#modal_guide_tailles").modal("show");$("#modal_guide_tailles").on("hidden.bs.modal",function(){$(this).remove()})}).fail(function(){console.error("Erreur de chargement du guide des tailles.")})})}})

📌 Explication du script :

  • ✔ Charge dynamiquement le contenu du Guide des tailles en AJAX.
  • ✔ Utilise content_only=1 pour afficher uniquement le texte, sans header/footer.
  • ✔ Affiche le guide dans une popup modale Bootstrap.

.

🎨 Étape 3 : Ajouter du CSS pour améliorer l’affichage

Ajoute ce style dans global.css pour un meilleur affichage :

Code
#guide_tailles {text-align: left;margin-top: 20px;margin-bottom: 20px;display: inline-block;} .open-guide {color: #000;font-weight: bold;text-decoration: none;} .open-guide:hover {text-decoration: underline;} #guide_tailles a#open_guide {background:#fff;border:1px solid #444;padding:8px;color:#444;font-size: 0.85rem;font-weight: 700;} #guide_tailles a#open_guide:hover {border:1px solid #000;padding:8px;color:#000;}

📌 Personnalisation possible :

  • ✔ Modifier la couleur de fond du bouton (background).
  • ✔ Changer la couleur du texte (color).
  • ✔ Ajuster l’épaisseur et la couleur de la bordure (border).
  • ✔ Modifier la taille et le style du texte (font-size, font-weight).

.

✅ Résultat attendu

Après ces modifications :

  • 🔹 Un lien « 📏 Voir le guide des tailles » apparaît sous la description courte du produit.
  • 🔹 En cliquant dessus, une popup s’ouvre avec uniquement le contenu du Guide des tailles.
  • 🔹 Le titre « Guide des tailles » dans la modale est masqué.
  • 🔹 Le padding de la modale est ajusté pour un meilleur affichage.

✨ Aperçu attendu :

📏 Voir la démonstration

.

📌 À suivre…

Ce Tips PrestaShop améliore l’expérience utilisateur et réduit les retours produits en rendant le Guide des tailles accessible instantanément. 💬 Des questions ou suggestions ? Partagez vos retour en commentaire ! 😊

]]> https://www.thierry-creation.fr/tips-prestashop-3-ajouter-une-popup-guide-des-tailles-sur-la-fiche-produit/feed/ 0 Tips PrestaShop #2 : Ajouter un badge personnalisé sur la page catégorie ou produit https://www.thierry-creation.fr/tips-prestashop-2-ajouter-un-badge-personnalise-sur-la-page-categorie-ou-produit/ https://www.thierry-creation.fr/tips-prestashop-2-ajouter-un-badge-personnalise-sur-la-page-categorie-ou-produit/#comments Sun, 12 Jan 2025 12:23:23 +0000 https://www.thierry-creation.fr/?p=17080

Comment mettre en avant un produit avec un badge personnalisé sur PrestaShop ?

Mettre en avant certains produits sur votre boutique en ligne peut considérablement augmenter leur visibilité et leur attrait. Dans ce tutoriel, nous allons voir comment ajouter un badge statique, comme « Exclusivité » ou celui de votre choix, sur des produits ayant une référence spécifique. Ce badge apparaîtra à la fois sur les miniatures produits et sur la fiche produit. Une méthode simple et efficace pour attirer l’attention des visiteurs !

Étape 1 : Ajouter le badge sur les miniatures produits (page catégorie)

Pour afficher le badge « Exclusivité » sur les miniatures produits

(visible sur les pages catégories ou les résultats de recherche)

Suivez ces étapes :

Modifier le fichier product.tpl

  1. Chemin du fichier :
Code
themes/NOMDUTHEME/templates/catalog/_partials/miniatures/product.tpl

2. Recherchez le code suivant :

Recherchez la ligne suivante :

Code
<div class="thumbnail-top"> {block name='product_thumbnail'}

3. Ajoutez immédiatement ce code juste en dessous :

Code
{if strpos($product.reference, 'BDG') !== false} <span class="exclusive-badge">Exclusivité</span> {/if}

Votre code devrait maintenant ressembler à ceci :

Code
<div class="thumbnail-top"> {block name='product_thumbnail'} {if strpos($product.reference, 'BDG') !== false} <span class="exclusive-badge">Exclusivité</span> {/if} {if $product.cover}

Étape 2 : Ajouter le badge sur la fiche produit

Pour afficher le badge sur la fiche produit, modifiez le fichier contenant l’image principale du produit.

Modifier le fichier product-cover-thumbnails.tpl

  1. Chemin du fichier :
Code
themes/NOMDUTHEME/templates/catalog/_partials/product-cover-thumbnails.tpl

2. Ajoutez le code suivant :

Recherchez la ligne suivante :

Code
<div class="product-cover">

Ajoutez immédiatement ce code juste après :

Code
{if strpos($product.reference, 'BDG') !== false} <span class="exclusive-badge">Exclusivité</span> {/if}

Étape 3 : Ajouter les styles CSS

Pour styliser le badge et l’afficher correctement sur vos produits, ajoutez ces styles dans votre fichier CSS principal.

Chemin du fichier CSS :

Code
themes/NOMDUTHEME/assets/css/theme.css

Code css :

Code
.exclusive-badge { position: absolute; bottom: 0px; /* Position en bas */ left: 0px; /* Aligné à gauche */ background-color: #ff4500; color: #fff; font-size: 12px; font-weight: bold; padding: 5px 10px; border-radius: 3px; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1; }

Étape 4 : Tester vos modifications

Vérifiez les conditions des produits : Assurez-vous qu’un produit possède une référence contenant « BDG » (par exemple, produit-BDG, BDG123, ou simplement BDG).

Rechargez votre boutique : Accédez à une catégorie ou une fiche produit contenant une référence valide.

Videz le cache : Dans votre back-office PrestaShop :

    • Allez dans Paramètres avancés > Performances.
    • Cliquez sur Vider le cache.

Résultat attendu

  • Sur les miniatures produits : Les produits ayant une référence contenant « BDG » afficheront un badge « Exclusivité » en bas à gauche de leur miniature.
  • Sur la fiche produit : Le badge sera visible en bas à gauche de l’image principale du produit.

Personnalisation

  1. Changer l’intitulé : Vous pouvez modifier « Exclusivité » directement dans les 2 fichiers .tpl :
Code
<span class="exclusive-badge">Votre texte ici</span>
  • Modifier les styles : Adaptez les couleurs, la taille, ou ajoutez une animation CSS pour rendre le badge plus attrayant.
  • Changer le critère de déclenchement : Si vous souhaitez afficher le badge pour un autre mot-clé ou condition, modifiez BDG dans les 2 fichiers .tpl:
Code
{if strpos($product.reference, 'BDG') !== false}

Boostez la visibilité de vos produits grâce à des badges personnalisés sur PrestaShop

En suivant ce tutoriel, vous avez ajouté un moyen simple et efficace de mettre en avant vos produits avec un badge « Exclusivité ». Vous pouvez personnaliser cet ajout pour refléter votre charte graphique ou des promotions spécifiques. Un petit détail qui peut faire toute la différence sur votre boutique PrestaShop ! 🚀

Vous souhaitez encore plus de conseils ? Restez connectés pour découvrir notre Tips PrestaShop #3 !

]]> https://www.thierry-creation.fr/tips-prestashop-2-ajouter-un-badge-personnalise-sur-la-page-categorie-ou-produit/feed/ 1 Tips PrestaShop #1 : Afficher un message personnalisé pour les utilisateurs connectés https://www.thierry-creation.fr/tips-prestashop-1-afficher-un-message-personnalise-pour-les-utilisateurs-connectes/ https://www.thierry-creation.fr/tips-prestashop-1-afficher-un-message-personnalise-pour-les-utilisateurs-connectes/#respond Sat, 11 Jan 2025 22:36:50 +0000 https://www.thierry-creation.fr/?p=17055

Pourquoi personnaliser les messages pour les utilisateurs connectés ?

Les utilisateurs connectés sont souvent des clients fidèles ou récurrents. Afficher un message spécifique pour eux permet :

  • De renforcer leur fidélité en leur montrant qu’ils sont reconnus.
  • De les inciter à explorer davantage votre boutique ou profiter d’offres spécifiques.

Avec un peu de code Smarty et CSS, cette personnalisation est rapide et efficace.

Étape 1 : Ajouter le code HTML dans votre fichier .tpl

Le code suivant vérifie si l’utilisateur est connecté ($logged) et affiche un message adapté. Insérez ce code dans un fichier .tpl, comme header.tpl ou index.tpl.

Code
{* Message spécial pour les utilisateurs connectés dans header.tpl *} {if $logged} <div class="welcome-back-message"> <p>Bonjour {$customer.firstname|escape:'html':'UTF-8'}, ravis de vous revoir ! Découvrez nos nouvelles offres !</p> </div> {else} <div class="welcome-message"> <p>Bonjour ! Connectez-vous pour profiter de promotions exclusives.</p> </div> {/if}

Étape 2 : Ajouter le CSS à votre thème

Ajoutez les styles suivants dans le fichier global.css de votre thème ou dans un fichier CSS dédié.

Code
.welcome-back-message, .welcome-message { margin: 15px auto; padding: 10px 20px; background-color: #f0f9ff; border: 1px solid #cce7ff; border-radius: 5px; color: #0073e6; text-align: center; font-size: 16px; font-weight: bold; } .welcome-back-message { background-color: #e6ffe6; border-color: #b3ffb3; color: #2e8b57; }

Personnalisation des messages et styles

  • Personnalisation du message : Modifiez le texte affiché dans les balises <p> pour adapter le message à vos besoins. Utilisez la variable {$customer.firstname} pour inclure le prénom de l’utilisateur connecté.
  • Personnalisation des couleurs : Adaptez les couleurs du fond, de la bordure ou du texte pour qu’elles correspondent à votre charte graphique.
  • Ajout de liens : Incitez vos utilisateurs à visiter des pages spécifiques (promotions, nouveautés) en ajoutant des liens dans le message, par exemple :
Code
<p>Découvrez nos <a href="{$link->getCategoryLink(2, null, true)}">produits populaires</a> !</p>

Résultat attendu

Avec ce premier tips, les utilisateurs connectés verront un message de bienvenue personnalisé avec leur prénom, tandis que les visiteurs non connectés recevront un message général les invitant à se connecter. Ce petit détail améliore l’expérience utilisateur et montre une attention particulière à vos clients.

À suivre…

Restez à l’écoute pour découvrir Tips PrestaShop #2, où nous explorerons une autre astuce utile pour personnaliser et optimiser votre boutique en ligne. 😊

]]> https://www.thierry-creation.fr/tips-prestashop-1-afficher-un-message-personnalise-pour-les-utilisateurs-connectes/feed/ 0