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
Accueil : themes/<votre_theme>/templates/index.tpl
Catégorie / listing : themes/<votre_theme>/templates/catalog/listing/category.tpl
Page CMS : themes/<votre_theme>/templates/cms/page.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 Copier/Coller le code JOIN

Important – Fiche produit : pour un widget de product page, reportez-vous à la documentation dédiée (remplacez LINK TO PAGE PRODUIT par l’URL réelle).

Collez le code du widget récupéré depuis le JOIN Studio dans le fichier .tpl, encadré par {literal} … {/literal} afin d’éviter l’interprétation par Smarty.

Exemple de code final :

{literal} 
<script>function sendAudienceData(a){window.jDataLayer=window.jDataLayer||[],window.jDataLayer.push({type:"audience",data:a})}</script> 
<div id="join-widget-inspiration-gallery" style="display:block;"></div> 
<style> #join-widget-inspiration-gallery { margin: 5px 2px; min-height: 114px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-inspiration-gallery { min-height: 132px; } } </style>
<script src="https://join-stories.com/stories/widgets/inspiration-gallery/index.js" data-join-widget-id="join-widget-inspiration-gallery" data-join-widget-alias="inspiration-gallery" type="text/javascript" ></script> 
{/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égrer un widget sur une page unique (homepage...)