Images produits dans les descriptions
Images produits dans les descriptions
49,90 €

Images produits dans les descriptions

49,90 €EUR49.9Images produits dans les descriptions

Ce module permet d'améliorer le référencement sur Google en enrichissant le contenu de la description grâce aux balises figure et figcaption. Il améliore aussi le rendu par un zoom sur l'image et un personnalisation spécifique possible pour chaque image.

Plus de détails

Version du module 1.3.1
Dernière mise à jour 06/08/2021
Compatible avec PrestaShop 1.6 Oui
Compatible avec PrestaShop 1.7 Oui
Démo Back Office DEMO
Démo Front Office DEMO

logo_youtube.png


Objectifs du module


Afficher une image "simple" est déjà possible dans la description des produits mais c'est tout juste fonctionnel, sans zoom et rien n'est fait pour optimiser le référencement que ce soit en terme de balises ou de chargement différé (lazy load).

Mon module permet :

  • d'insérer des balises figure et figcaption dans la description des produits et dans les pages CMS
  • d'améliorer le référencement en insérant le contenu personnalisé des champs title, alt et figcaption
  • de créer un zoom permettant de voir en détails les images des produits
  • de rendre le contenu personnalisable facilement
  • de ne pas alourdir la page et ne pas ralentir le temps de chargement afin de marquer des points auprès de Google

Principe

Les balises figure et figcaption ne fonctionnent pas nativement sur PrestaShop, il faut donc un module pour pouvoir les inclure et améliorer le contenu des descriptions.
Non seulement ce module affiche l'image très facilement pour l'utilisateur mais il inclut en plus un zoom sur l'image. Les formats des images sont sélectionnables dans la configuration du module. Pour la grande image vous pouvez même sélectionner le format originel de l'image (non modifié par PrestaShop).


Configuration du module

Le premier choix porte sur le format de l'image, les dimensions en pixels sont rappelés entre parenthèses.
Ensuite vous pouvez choisir la taille de l'image zoomée, vous pouvez même choisir l'image native que vous avez chargé (dans ce cas il les dimensions en pixels ne sont pas indiqués car elles diffèrent pour chaque image).


Configuration du module
Configuration du module


Affichage de l'élément <figure> avec une image spécifique

Le code à insérer doit commencer et finir par ### et contenir au minimum l'id image (de n'importe quel produit).
Exemple pour afficher l'image dont id_image est 12 :

##12# ##

exemple de code minimum à renseigner
Code en back office dans la description produit et résultat en front office

Le zoom


Pour afficher l'image en grand il suffit de configurer dans le back office la taille de votre choix pour la grande image.
Par défaut Prestashop rajoute des bandes blanches sur les images, vous pouvez éviter ça avec le module "gestionnaire d'images miniatures".
Le plus gros défaut sur les images produits c'est le zoom, par défaut avec PrestaShop il prend la hauteur de l'écran avec une marge en haut et le titre et une marge en bas et le scroll est impossible, du coup si vous avec une image en mode portrait qui dépasse la hauteur de l'écran elle ne peut pas être affichée sans être réduite et donc le contenu devient peu lisible, voir illisible. Ce module permet d'inclure l'image dans la description, le scroll devenant possible l'image n'est pas limitée à la hauteur de l'écran , vous avez donc une image visible et parfaitement lisible.
Exemple d'une image en hauteur dont l'affichage natif est non lisible et non exploitable par PrestaShop:

module liste des déclinaisons
Exemple d'image en hauteur qui est inexploitable/lisible par défaut avec Prestashop


Vous pouvez retrouver cette image sur la page de description du module "liste des déclinaisons".


Amélioration du SEO par des informations disponibles et scrutées par les moteurs de recherche

Il est possible d'indiquer le champ title et alt de l'image ainsi que le figcaption (légende de la figure) très facilement :

###id_image¤title¤alt¤figcaption###

Le code commence et finit par ### et on retrouve entre ces 2 extrémités :

  • id_image
  • contenu du champ title
  • contenu du champ alt
  • contenu de la balise figcaption

Si vous ne donnez aucune information pour un de ces paramètres (title, alt et figcaption), au lieu de laisser un élément vide, c'est le nom du produit qui sera indiqué (comme dans le premier exemple avec ###12###). Pour le référencement c'est mieux que rien, mais on peut faire mieux.

Exemple :

###12¤Pretty yellow dress¤Yellow dress¤yellow floral pattern###

Le champ title sera Pretty yellow dress
Le champ alt sera Yellow dress
Figcaption sera yellow floral pattern

code en BO et résultat en FO avec le code généré
Boostez le référencement en indiquant les données essentielles à la balise figure : title, alt et figcaption


Personnalisation du rendu


Maintenant que l'on a vu comment afficher une image produit et avoir un meilleur référencement en remplissant les champs importants, on peut améliorer le rendu afin d'avoir un rendu plus personnalisé, ce module est fait aussi fait pour plaire à vos clients.
Le rendu de chaque image (et des balises figure et figcaption) peut être personnalisé très facilement, il suffit d'indiquer le nom de la classe en 5 ème position:
###id_image¤title¤alt¤figcaption¤class###

Le nom de la class est attribuée à la balise figure (ce qui rend plus facile la personnalisation de l'ensemble mais aussi du contenu : les balises image et figcaption).

Il suffit ensuite de paramétrer la class dans la configuration du module. Vous pouvez avoir une classe commune pour différentes images et avoir en même temps des class spécifiques pour chaque image.


Exemple de rendu avec une class :

Images produits dans les descriptions
Images produits dans les descriptions


La classe bordures est paramétrée pour affichée une bordure autour de l'image, une bordure autour de figcaption et une bordure avec des coins arrondis autour de l'ensemble.

Exemple de rendu avec plusieurs class : si vous voulez avoir sur 3 images le même encadrement (bordures et marges entres les éléments) mais avoir une couleur de fond du figcaption spécifique au produit :


Première image (avec la robe jaune): ###123¤robe jaune¤robe jaune¤robe jaune¤bordures jaune###

Deuxième image (avec la robe bleue) : ###456¤robe bleue¤robe bleue¤robe bleue¤bordures bleu###

Troisième image (avec la robe orange) : ###789¤robe orange¤robe orange¤robe orange¤bordures orange###

Ces 3 images seront chacune dans leur balise figure respective qui auront la classe "bordures", mais chacune aura une classe spécifique pour déterminer une couleur spécifique (classe jaune, class bleu et class orange).

Vous pouvez multiplier les class sans limite et rajouter par exemple "gauche" ou "droite" si vous souhaitez définir un code CSS pour disposer les balises figure respectivement à gauche et à droite:

###789¤robe orange¤robe orange¤robe orange¤bordures orange droite###

Pour la petite image la balise figure a comme class figure_zoom_small, alors que pour l'image zoomée la balise figure a comme class figure_zoom_big. Vous pouvez donc personnaliser l'image zoomée de manière différente de la petite image.

Pour les perfectionnistes il est aussi possible d'avoir un rendu très spécifique, comme par exemple une image ronde, attention : en fonction des formats des images (ratio largeur/hauteur) ce résultat n'est pas forcément le plus judicieux :

Images produits dans les descriptions
Images produits dans les descriptions


Ne pas ralentir et alourdir la page


Augmenter la taille de la description et les données c'est bien, ne pas augmenter le poids de la page et le temps de chargement c'est mieux !


Le module inclus l'option "lazy load" sur les images : elles ne seront pas chargées au moment du chargement de la page. C'est un chargement différé, qui ne se fait qu'au moment ou le client à besoin de voir l'image. Ceci permet de ne pas augmenter le poids de la page et donc de ne pas ralentir le chargement de la page alors que le contenu sera mis en valeur et les images mieux référencées. Ce qui contribue à améliorer le référencement sur les moteurs de recherche tel que Google.
Comme vous pouvez le voir sur cette capture d'écran, le chargement des images ne se fait que lors du scroll vertical :

Images produits dans les descriptions
Images produits dans les descriptions

Changelog:

  • 1.0.0

    First version

  • 1.1.0

    add CMS pages

  • 1.2.0

    full compatibility with 1.7

  • 1.3.0

    add lazy load

  • 1.3.1

    update of code CSS default

  • 1.3.2

    optimization responsive

14 autres produits dans la même catégorie