Skip to main content

Integrate your widgets on product pages in a single step

Adding a Product Widget in PrestaShop

Updated this week

Prerequisites

  • Administrator access to the PrestaShop back office.

  • Access to the hosting server (SFTP/SSH) or a Git repository to deploy theme files.

  • Ideally, assistance from your agency or technical team.

Recommendation
Work on a staging environment and back up your theme before making any changes. Use a child theme to prevent your modifications from being overwritten during updates.

1) Download the Theme

  • It is possible to retrieve the PrestaShop theme files.

1- From the PrestaShop admin panel:
Go to Appearance ⇒ Theme & Logo → Export the active theme (top right corner).

2- From the server:
Retrieve the theme directory directly from the files (e.g., themes/<your_theme>).

2) Modify the Theme

2.1 Identify the template to update


Depending on the target page, locate the appropriate file. Examples for Classic / Hummingbird themes:

  • Product page: themes/<your_theme>/templates/catalog/_partials/product-additional-info.tpl

  • Category / listing page: themes/<your_theme>/templates/catalog/listing/category.tpl

2.2 Choose the Position in the Code


Insert the widget exactly where it should appear in the template.

Tip: identify an existing element or container (CSS class or Smarty block) to position the widget correctly.

2.3 Integrate the JOIN Code


Steps:


1- Retrieve the widget code from JOIN Studio under the Widget Integration tab.

2- Paste this code into the targeted template and wrap it with {literal} … {/literal} to prevent Smarty from interpreting it.

3- Replace any occurrence of <PRODUCT_ID> with {/literal}{$product.id_product}{literal} to dynamically inject the PrestaShop product ID.

Important: The PrestaShop product ID must match the offerId key in the Merchant Center connected to JOIN. If it doesn’t, you will need to modify the code to inject the correct ID.

Example of Final Code:

<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) Deploy and Clear the Cache

1- Deploy the theme modifications to the server (SFTP/CI).

2- Clear the cache to apply the changes:

Advanced Parameters → Performance → Clear Cache

3- If Smarty compilation is enabled, force a recompilation if necessary.

Did this answer your question?