À première vue, Instagram s’est imposé comme l’un des principaux canaux de communication digitale pour les annonceurs. Ainsi, intégrer un feed Instagram sur une fiche produit d’un site ecommerce devient essentiel.

D’ailleurs, vous pouvez dorénavant insérer un feed Instagram, par hashtags, dans une fiche produit sur le CMS Prestashop. En effet, vous permettez à votre client de découvrir les photos Instagram du produit, sans avoir à ouvrir votre compte Instagram. En plus, votre client peut faire du shopping sur votre boutique en ligne, tout en ayant accès aux posts Insta, en même temps. Ainsi, vous pouvez atteindre des millions d’utilisateurs sur ce social media et booster votre taux de conversion.

Par ailleurs, vous permettez d’afficher l’expérience client de vos fiches produits. Ainsi, le référencement naturel de votre boutique e-commerce s’améliore grâce à une meilleure expérience utilisateur. De même, vous devez vous centrer sur votre page instagram et votre profil Facebook. Ainsi, vous devez supprimer votre compte privé et créer un compte Marketplace.

Enfin, vous pouvez optimiser votre site web et les différentes expériences des utilisateurs grâce à ce plugin.

Intégrer la fonctionnalité de feed instagram sur vos pages produit

Tout d’abord, vous devez commencer par télécharger le script instafeed.min.js. Ainsi, cette fonctionnalité devient disponible sur votre plateforme e-commerce.

Téléchargements : instagramfeed.js

Donc, vous devez uploader le fichier via FTP dans le dossier « js » de votre thème actif prestashop : mon_theme/js/instafeed.min.js.

Ensuite, vous devez ouvrir le header.tpl de votre thème et rechercher :

{foreach from=$js_files item=js_uri}
<script type= »text/javascript » src= »{$js_uri|escape:’html’:’UTF-8′} »></script>
{/foreach}
{/if}

Ainsi, vous devez ajouter en dessous de ce script :

{if $page_name ==’product’ and $product->tag}
<script type= »text/javascript » src= »{$js_dir}instafeed.min.js »></script>
{/if}

Donc, vous devez noter, à ce niveau, l’utilisation d’une condition smarty pour que l’appel au js ne se produise qu’en cas d’une fiche produit comportant un hashtag. Ainsi, la condition à ajouter consiste à :

<script type= »text/javascript »>
var feed = new Instafeed({
get: ‘tagged’,
tagName: ‘{$product->tag}’,
clientId: ‘VOTRE_ID_INSTAGRAM’
});
feed.run();
</script>

Finalement, vous aurez un script comme suit :

{if $page_name ==’product’and $product->tag}
<script type= »text/javascript » src= »/js/instafeed.min.js »></script>
<script type= »text/javascript »>
var feed = new Instafeed(
{get: ‘tagged’,tagName: ‘{$product->tag}’,clientId: ‘VOTRE_ID_INSTAGRAM’});
feed.run();
</script>
{/if}

Ajouter les photos de votre produit des comptes instagram affichant le hashtag

À priori, vous devez commencer en remplaçant votre_id_instagram par votre client id (son nom d’utilisateur). D’ailleurs, vous pouvez trouver votre client id il vous suffit de vous connecter sur votre compte Instagram et de suivre ce lien.

Ensuite, vous devez utiliser la variable « $product->tag » à créer par la suite. En effet, cette variable permet d’appeler le hastag lié à la fiche produit concernée.

Le champ « tag » de la base de données de votre site de vente

Premièrement, vous devez accéder à la base de données de votre boutique Prestashop, via phpmyadmin. Ensuite, vous devez chercher la table PREFIX_product_lang. Ainsi, vous devez ajouter un nouveau champ nommé « tag » de type TEXT dans « structure ».

Configuration du feed instagram sur une fiche produit dans la base de données

Créer un nouveau champ dans la base donnée

Ainsi, vous devez lier ce nouveau champ « tag » à votre classe Product en créant un override. D’où, vous devez accéder à : /override/classes/ placer un nouveau fichier Product.php grâce au code suivant :

<? php

class Product extends ProductCore
{
public $tag;

public function __construct($id_product = null, $full = false, $id_lang = null, $id_shop = null, Context $context = null)
{
Product::$definition[‘fields’][‘tag’] = array(‘type’ => self::TYPE_HTML, ‘lang’ => true, ‘validate’ => ‘isString’);
parent::__construct($id_product, $full, $id_lang, $id_shop, $context);
}

}

Intégrer le champ « tag » dans le backoffice de fiche produit

À ce stade de la configuration, il vous suffit de copier le fichier « informations.tpl /themes/default/template/controllers/products/informations.tpl » et le placer dans « /override/controllers/admin/templates/products/ ». Ensuite, vous devez ajouter « la ligne 362 » en dessous du champ description.

<div class= »form-group »>
<div class= »col-lg-1″><span class= »pull-right »>{include file= »controllers/products/multishop/checkbox.tpl »
field= »tag » type= »tinymce » multilang= »true »}</span></div>
<label class= »control-label col-lg-2 » for= »tag_{$id_lang} »>
<span class= »label-tooltip » data-toggle= »tooltip »
title= »{l s=’Hashtag lié au produit’} »>
{l s=’Instagram Hashtag’}
</span>
</label>
<div class= »col-lg-9″>
{include
file= »controllers/products/input_text_lang.tpl »
languages=$languages input_name=’tag’
input_value=$product->$product->tag}
</div>
</div>

Après, vous devez vider le cache du navigateur et celui de prestashop. Pour ce faire, vous devez accéder au Back Office Paramètres avancés / Performance. Ensuite, vous devez cliquer sur « Vider le cache (en haut à droite) » dans la toolbar.

Configuration du feed instagram sur une fiche produit

Comment modifier l’affichage dans le tpl product ?

À priori, vous devez placer le code en dessous de la description longue sur « la ligne 485 » dans le product.tpl du thème e commerce Prestashop.

{if $product->tag}
<!– Instagram –>
<section class= »page-product-box »>
<h3 class= »page-product-heading »>{l s=’Instagram’} #{$product->tag}</h3>{/if}
<div id= »instafeed »></div>
</section>
<!– Instagram –>
{/if}

Edition du CSS des miniatures Instagram

Pour configurer les miniatures Instagram, vous devez éditer le product.css du thème. Ainsi, vous pouvez créer des marges pour les photos miniatures. D’où, vous devez ajouter à la fin du fichier le code suivant :

#instafeed img {
border: solid 1px;
margin-left: 5px;
margin-bottom: 5px;
}

Résultat final

Résultat du feed instagram sur une fiche produit

Pourquoi ajouter le feed instagram des produits sur votre site ecommerce ?

Tout d’abord, le trafic représente un levier de croissance important pour la vente en ligne. En plus de l’avènement du social media, les e-commerçants diversifient de plus en plus leurs stratégies grâce au module prestashop. Ainsi, le commerce électronique n’est plus exclusif aux sites marchands et aux emails. D’où, le feed Instagram permet d’avoir un milliard de :

  • Clics vers les sites e-commerce
  • Followers de la marque
  • Influenceurs, de bloggers et de célébrités utilisant les produits

Ainsi, il ne suffit plus d’avoir un compte professionnel avec de belles photos pour booster le taux de transformation. D’ailleurs, un développeur averti vous proposera certainement de créer un nouveau compte et une Market place sur instagram, pour augmenter votre nombre d’abonnés. D’où, vous pouvez influencer le référencement naturel de chaque page produit grâce aux hashtags et du partage de photos.

Par ailleurs, de plus en plus de plateformes ainsi que de places de marché intègrent la création d’une boutique instagram comme solution e-commerce. Ainsi, le commerçant peut gérer les produits directement ainsi que pallier à la rupture de stock et proposer des moyens de paiement, par lui-même. En plus, l’intégration d’une certaine solution prestashop permet une liaison directe entre la page pro et la place de marché.

Les enjeux d’un feed Instagram sur une fiche produit

D’un autre côté, un compte pro vous permet de créer un magasin virtuel tout en optimisant le positionnement de votre site internet. Ainsi, votre e-business peut améliorer les revenus de la vente à distance. Effectivement, les utilisateurs actifs communiquent sur les marques à travers leurs photos postées, stories instagram, selfies et parfois un tweet.

En bref, vous pouvez faire appel aux compétences webmarketing d’une agence web pour profiter d’une solution clé en main, en plus de votre commerce traditionnel :

  • Créer un site e commerce ou la refonte d’un ecommerce prestashop
  • Faire vérifier son compte pur créer une boutique sur Instagram : photo de profil, photo de couverture, bouton ajouter au panier, solution de paiement…
  • Demande de vérification de la configuration du panier, du catalogue et du crm pour acheter sur votre site

Enfin, vous pouvez aussi demander d’intégrer ce type de plugins sur différents sites e-commerce : wordpress (woocommerce), module magento, droppshiping ou shopify…