Prérequis

- Accès administrateur à l’interface PrestaShop.

- Accès au serveur d’hébergement (SFTP/SSH) ou à un dépôt Git pour déployer les fichiers du thème.

- Idéalement, intervention par votre agence ou votre équipe technique.

Recommandation
Travaillez sur un environnement de préproduction et sauvegardez le thème avant toute modification. Privilégiez un thème enfant pour éviter d’écraser vos changements lors d’une mise à jour.

1) Télécharger le thème

Il est possible de récupèrer les fichiers du thème Prestashop.
1. Depuis l’admin PrestaShop, Apparence ⇒ Thème & logo → Exporter le thème actif (coin supérieur droit).
2. Depuis le serveur
  Récupérez le répertoire du thème directement dans les fichiers (ex. themes/<votre_theme>).

2) Modifier le thème

2.1 Identifier le template à mettre à jour

Selon la page ciblée, localisez le fichier adéquat. Exemples pour les thèmes Classic / Hummingbird :

Fiche produit : themes/<votre_theme>/templates/catalog/_partials/product-additional-info.tpl
Catégorie / listing : themes/<votre_theme>/templates/catalog/listing/category.tpl

2.2 Choisir la position dans le code

Insérez le widget à l’endroit précis où il doit apparaître dans le template.

Astuce : repérez un élément ou un conteneur existant (classe CSS ou bloc Smarty) pour positionner le widget correctement.

2.3 Intégrer le code JOIN

Étapes :

Récupérez le code du widget dans le JOIN Studio, onglet Intégration du widget.
Collez ce code dans le template ciblé et encadrez-le avec les balises {literal} … {/literal} pour éviter l’interprétation par Smarty.
Remplacez toute occurrence de <PRODUCT_ID> par {/literal}{$product.id_product}{literal} afin d’injecter dynamiquement l’ID produit PrestaShop.

Attention, l’id produit prestashop doit matcher la clé offerId du merchant center connecté à JOIN. Si ce n’est pas le cas, c’est a vous de modifier ce code afin d’injecter le bon id.

Exemple de code final :

<script>function sendAudienceData(a){window.jDataLayer=window.jDataLayer||[],window.jDataLayer.push({type:"audience",data:a})}</script>
<script> 
  document.addEventListener("DOMContentLoaded", () => { 
  const productId = "{/literal}{$product.id_product}{literal}"; /* <-- Dynamic product id */ 
  const baseUrl = "https://join-stories.com/stories/widgets/page-produit"; 
  const script = document.createElement("script");   
  script.setAttribute("src", baseUrl + "/" + productId + ".js"); /**Needed attribute for the script to works*/
  script.setAttribute("type", "text/javascript"); 
  script.setAttribute("data-join-widget-id", "join-widget-page-produit");
  script.setAttribute("data-join-widget-alias", "page-produit"); /**Handle error & fallback*/ 
script.onerror = () => { 
  script.remove(); const fallback = document.createElement("script"); 
  fallback.setAttribute("src", baseUrl + "/index.js"); 
  fallback.setAttribute("type", "text/javascript"); 
  fallback.setAttribute("data-join-widget-id", "join-widget-page-produit"); 
  fallback.setAttribute("data-join-widget-alias", "page-produit"); 
  document.head.appendChild(fallback); 
}; 
document.head.appendChild(script); });
 </script> <div id="join-widget-page-produit" style="display:block;"></div> <style> #join-widget-page-produit { margin: 5px 2px; min-height: 114px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-page-produit { min-height: 132px; } } </style> {/literal}

3) Déployer et vider le cache

Déployez les modifications du thème sur le serveur (SFTP/CI).
Videz le cache pour prendre en compte les changements :
Paramètres avancés → Performances → Vider le cache.
Si la compilation Smarty est activée, forcez une recompilation si nécessaire.

Intégrez vos widgets sur vos pages produits en une seule intégration