Creative Elements 2.10.1 : Introduction du Créateur de page catégorie et plus encore

Creative Elements 2.10.1 : Introduction du Créateur de page catégorie et plus encore

La version 2.10 étend l’expérience Creative Elements aux pages de listing de votre boutique PrestaShop, notamment les pages catégorie, les pages marque, les résultats de recherche et les pages personnalisées telles que Promotions, Nouveaux produits et Meilleures ventes.

Créateurs de pages de listing

Sans aucun doute, la fonctionnalité la plus attendue de cette nouvelle version est le Créateur de page catégorie. Comme PrestaShop propose une grande diversité de pages de listing et que la page catégorie en fait partie, nous avons développé un système permettant de créer une interopérabilité entre les différents types de pages de listing, avec une logique de réutilisabilité.

L’avantage de cette approche est que vous pouvez créer une page catégorie entièrement personnalisée si vous le souhaitez, mais si vous préférez plus de flexibilité, vous pouvez créer une page de listing générique pouvant être utilisée sur vos pages marque, résultats de recherche, meilleures ventes, promotions ou nouveaux produits.

Ces nouveaux créateurs introduisent 20 nouveaux widgets ainsi que quelques balises dynamiques pour les widgets existants, vous permettant de créer des pages de listing très flexibles et variées dans PrestaShop.

Pour vous donner une meilleure idée de ce que ce système peut faire, nous avons créé plusieurs pages catégorie où vous pouvez tester les différentes fonctionnalités.

Création de pages catégorie avancées

Prenons un exemple avec le template pack Electro.

Sur le côté gauche, vous remarquerez deux doubles sliders pour filtrer par prix et par poids, vous offrant un contrôle précis sur vos critères de recherche. De plus, le filtre de sélection de couleur propose une disposition inline élégante avec des sélecteurs arrondis, créant une expérience de navigation fluide.

Voir la démo

Nous avons implémenté un système unique de reconnaissance des couleurs qui distingue les teintes claires et foncées, vous permettant d’attribuer différentes couleurs de coche selon vos besoins. Vous pouvez également configurer vos filtres pour qu’ils soient ouverts automatiquement au chargement de la page, afin que les visiteurs puissent facilement affiner leur recherche.

Nuanciers de couleurs dynamiques

Sur tablette et mobile, le système de filtres se transforme automatiquement en un format de sidebar pratique, accessible via un bouton toggle pour une navigation simplifiée. Les filtres actifs sont affichés de manière visible au-dessus de la liste des produits et sont entièrement personnalisables pour correspondre à l’identité de votre marque. Sur mobile, une fonctionnalité de défilement est disponible pour optimiser l’espace à l’écran et améliorer l’expérience utilisateur.

Dans l’exemple suivant, nous explorons la page catégorie du template pack Furniture, similaire dans sa structure à celle d’Electro, mais avec des différences clés.

Voir la démo

En haut de la page, une grille dynamique de sous-catégories facilite la navigation pour les boutiques proposant une large gamme de produits. En dessous, une section de description de catégorie personnalisable vous permet d’afficher des informations adaptées à chaque catégorie.

Au lieu de la pagination traditionnelle, un bouton pratique « Load More » est disponible sous la liste des produits, facilitant la navigation dans les produits. Alternativement, la fonctionnalité « Infinite Scroll » charge automatiquement les produits supplémentaires au fur et à mesure que l’utilisateur fait défiler la page.

Pour plus d’informations sur les fonctionnalités, veuillez consulter la page Créateur de page catégorie.

Améliorations de la page produit

Nous introduisons plusieurs nouvelles fonctionnalités conçues pour améliorer vos pages produit.

Tout d’abord, nous introduisons les variations de produit avec images. Vous pouvez désormais afficher facilement les différentes variations de couleur de vos produits avec les images correspondantes au lieu de simples nuances de couleur, offrant ainsi une vision plus claire des options disponibles.

Variation de produit avec images

Pour enrichir les possibilités de personnalisation, nous avons introduit un widget « Personnalisation produit » polyvalent. Ce widget permet aux clients de personnaliser les produits selon leurs préférences, rendant l’expérience d’achat plus interactive.

Nous avons également apporté des améliorations pratiques au widget Images produit. Vous pouvez désormais faire défiler les miniatures avec la molette de la souris. De plus, sur mobile, vous pouvez masquer les miniatures afin de gagner de l’espace et améliorer la navigation.

Conformément aux réglementations de l’UE, le prix unitaire doit être affiché pour certains types de produits. Cela est désormais pris en charge dans le widget Prix produit.

Une autre amélioration notable est la possibilité de créer des groupes de lightbox, vous permettant d’afficher des images provenant de différents widgets dans une galerie lightbox unifiée et facile à naviguer.

Grâce à ces améliorations, créer des pages produit engageantes et faciles à utiliser est plus simple que jamais. Améliorez votre boutique en ligne et offrez à vos clients une expérience d’achat optimisée.

Refonte de la galerie d’images

Parmi de nombreuses améliorations, le widget Galerie d’images a été entièrement repensé, vous permettant de créer des mises en page plus flexibles et avancées. En plus des labels, vous avez désormais la possibilité d’ajouter des descriptions supplémentaires dans ce widget repensé. De nombreuses animations ont également été ajoutées afin de rendre votre contenu plus dynamique. Si vous utilisiez un widget call-to-action sur votre page principale pour afficher vos catégories ou collections, vous pouvez envisager d’utiliser ce nouveau widget Galerie d’images, car il permet de simplifier le DOM et d’améliorer les performances mobiles grâce au nouveau paramètre Overflow Scrolling.

Découvrez quelques exemples de mises en page ci-dessous :

Vase Donut
Top 10 des plus belles plantes grimpantes
Plantes d’intérieur
Shop the look
Plus que de l’éclairage
Collection intérieure
Textiles durables
Exemple de sous-catégorie avec overlay
Salon
Buanderie
Salle à manger
Cuisine
Salle de bain

Fonction backdrop-filter pour les arrière-plans des éléments

Vous pouvez désormais utiliser la propriété CSS backdrop-filter sur tous les éléments ayant un arrière-plan, y compris les sections, colonnes et widgets. Cette propriété est également utilisée pour créer l’en-tête en haut de cette page, produisant un effet de verre dépoli transparent. Si l’image derrière un bloc de texte est trop chargée, vous pouvez l’utiliser pour améliorer la lisibilité.

AIR
-20%
Acheter maintenant

Comment mettre à jour ?

Creative Elements v2.10.1 est disponible dès maintenant. Vous pouvez effectuer la mise à jour directement via votre gestionnaire de modules afin de profiter immédiatement de ces nouvelles fonctionnalités.

Le processus de mise à jour prend tout en charge automatiquement, vous permettant de reprendre rapidement la création de vos pages sans interruption.

Créez des listings plus efficaces. Améliorez la navigation. Augmentez les conversions.

Explorer d’autres mises à jour