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
Homepage: themes/<your_theme>/templates/index.tpl
Category / listing: themes/<your_theme>/templates/catalog/listing/category.tpl
CMS page: themes/<your_theme>/templates/cms/page.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 Copy/Paste the JOIN Code

Important – Product Page:
For a product page widget, refer to the dedicated documentation (replace LINK TO PRODUCT PAGE with the actual URL)

Paste the widget code retrieved from JOIN Studio into the .tpl file, wrapped with {literal} … {/literal} to prevent Smarty from interpreting it.

Example of Final Code :

{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) 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

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

Integrate a widget on a single page (e.g., Homepage)

Prerequisites

1) Download the Theme

2) Modify the Theme

3) Deploy and Clear the Cache