Tag: Module complémentaire de personnalisation de produit

1.0 Présentation

En tant que propriétaire de boutique, vous avez toujours pensé à augmenter vos conversions, mais pas forcément à l’expérience d’achat de vos clients. Un client satisfait est celui qui revient sur votre site pour acheter d’autres articles. Alors, si vous souhaitez fidéliser votre clientèle, offrez-lui une expérience mémorable en intégrant l’extension PrestaShop Product Designer/Customizer à votre boutique en ligne. Module de conception de produits personnalisés PrestashopLes commerçants peuvent proposer à leurs clients des options de personnalisation de produits en ligne intuitives et créatives, leur permettant de transformer la version de base d’un produit en un design moderne, élégant et unique. L’extension de personnalisation de produits PrestaShop permet à l’administrateur d’afficher le panneau de personnalisation lorsque l’utilisateur clique sur le bouton « Personnaliser » de la page produit. Les clients peuvent facilement ajouter des textes colorés avec effets, importer leurs images avec filtres et intégrer un code QR pour une personnalisation optimale.

1.1 Fonctionnalités marquantes de l’extension de personnalisation des produits Prestashop

Aucune compétence technique en programmation n’est requise pour configurer ou modifier les paramètres du module PrestaShop Custom Product Design. Ce module est d’une simplicité enfantine. Découvrons rapidement les différentes fonctionnalités offertes par cette extension PrestaShop.

• L’extension PrestaShop Product Designer/Customizer vous permet de proposer une large gamme de produits personnalisables sur votre boutique en ligne. Grâce à cette extension, vos clients peuvent facilement acheter et profiter de ces produits en ligne personnalisables selon leurs besoins.
• L’outil de conception de produits en ligne ajoute une vue personnalisée aux produits, permettant ainsi aux acheteurs potentiels de les personnaliser en temps réel. Le module de configuration de produits permet à l’administrateur PrestaShop d’ajouter un ensemble différent d’options de personnalisation pour chaque produit de la boutique.
• Grâce à l’intégration du module de conception de produits Prestashop, les clients peuvent accéder au panneau de personnalisation des produits pour tout article qu’ils souhaitent acheter, comme des t-shirts, des mugs, des bagues ou tout autre type de produit personnalisable selon leurs besoins.
• L’extension de personnalisation de produits PrestaShop affiche un bouton « Personnaliser » pour chaque produit personnalisable de la boutique. L’administrateur peut activer les options de personnalisation uniquement pour les produits souhaités.
• L’extension Prestashop Product Designer/Customizer offre des fonctionnalités complètes activables et désactivables. Lorsqu’elle est désactivée, seules les options de personnalisation standard s’affichent sur la page produit.
• Le module de personnalisation avancée des produits affiche le calcul du prix de personnalisation en temps réel sur la page produit.
• Avec l’extension Prestashop custom product designer, l’administrateur peut définir les options de conception de produits accessibles à l’utilisateur.
• Le module de configuration des produits permet à l’administrateur d’activer ou de désactiver les options de téléchargement de fichiers PDF pour les clients sur l’interface utilisateur.
• Le module de personnalisation étendue des produits de PrestaShop offre la possibilité d’ajouter des images prédéfinies à un produit. Ces images sont généralement regroupées. Les clients peuvent également télécharger et utiliser leurs propres images.
• Grâce à ce module de conception de produits Prestashop, le client peut utiliser en toute flexibilité les polices, les couleurs et les filtres souhaités pour le produit.
• Ce module de personnalisation de produit avancé permet à l’administrateur de définir les prix des différentes options de personnalisation.
• Le module de personnalisation des produits Prestashop offre également la possibilité de personnaliser le produit à l’aide d’un code QR pour lequel l’administrateur peut définir un prix distinct.
• L’extension Prestashop custom product designer ajoute automatiquement un prix fixe pour la conception complète au prix final personnalisé d’un produit.
• L’extension Prestashop Product Designer/Customizer prend en charge la compatibilité multi-boutiques et multilingue.
• L’extension Prestashop custom product designer est responsive sur mobile et compatible avec différents thèmes Prestashop.

1.2 Technologie au service du développement

• Langue PHP
• Cadre: Prestashop

Guide d’installation 2.0 du module de personnalisation avancée des produits

L’administrateur de la boutique peut suivre ces étapes simples pour installer l’extension de personnalisation de produits PrestaShop sur sa boutique en ligne : 1. Téléchargez le package de l’extension depuis la boutique Knowband. 2. Vous obtiendrez un fichier ZIP contenant le code source et le manuel d’utilisation. Décompressez l’intégralité du package à la racine de votre boutique PrestaShop à l’aide d’un client FTP (tel que FileZilla ou WinSCP – à télécharger ici : https://filezilla-project.org/). Vous trouverez les fichiers et dossiers comme indiqué dans l’image ci-dessous :

L’extension Prestashop de conception de produits personnalisés est désormais installée et prête à l’emploi. L’administrateur peut maintenant configurer les différents paramètres en fonction de son site Prestashop.

Interface d’administration 3.0 du module de personnalisation avancée des produits PrestaShop

Juste après l’installation réussie de Addon de concepteur / personnalisateur de produit Prestashop Sur votre site web, vous pouvez configurer les paramètres du panneau de personnalisation des produits selon vos besoins. Dans le panneau d’administration ou le tableau de bord, cliquez sur « Modules et services », puis sur le bouton « Configurer » situé à côté de Knowband Product Designer/Customizer.

Ici, dans l’interface suivante, vous trouverez les paramètres complets du module Product Designer/Customizer ainsi que ses sous-sections, comme indiqué ci-dessous.

Ce module de personnalisation de produits Knowband comprend quatre sous-sections, décrites ci-dessous : 1. Configuration ; 2. Polices ; 3. Couleurs ; 4. Groupe d’images. Chaque onglet du module de personnalisation de produits étendu de PrestaShop est présenté ci-dessous :

3.1 Paramétrage

Dans les paramètres de configuration de l’extension de personnalisation des produits Prestashop, vous pouvez effectuer les réglages de base du panneau de personnalisation affiché aux clients sur le site.

• Activer désactiver: Cette option vous permet d’activer ou de désactiver complètement la fonctionnalité du module de personnalisation étendue des produits Prestashop pour vos clients.
• Afficher l’option de téléchargement du PDF dans le panier : Vous pouvez activer ou désactiver cette option pour télécharger l’image du modèle au format PDF sur la page de commande de l’administrateur.
• Afficher l’aperçu du design dans le PDF de la facture : Activez ou désactivez cette option pour afficher ou masquer l’aperçu de la conception dans le PDF de la facture.
• Nombre maximal de diapositives : Cette option vous permet de définir le nombre maximal de faces de produit pouvant être personnalisées depuis l’interface utilisateur.

Polices 3.2

Dans cette section du module de conception de produits PrestaShop, le propriétaire de la boutique peut ajouter plusieurs polices parmi lesquelles le client pourra imprimer un texte stylisé sur le produit. La première interface ci-dessous affiche la liste des polices disponibles. Il est possible d’ajouter une nouvelle police, de modifier ou de supprimer une police existante.

Vous pouvez ici effectuer les deux autres actions comme suit :

1. Ajout d’une nouvelle police

Pour ajouter un nouveau style de police, procédez comme suit : cliquez sur l’onglet Polices, puis sur le bouton « + » (Ajouter une police) dans le panneau d’administration. L’interface ci-dessous s’affichera.

• Actif: Cette option permet d’activer ou de désactiver la police.
• Titre de la police : Cette option vous permet de définir le titre de la police comme indiqué dans Google Fonts.
• Intégrer @import Police : Pour utiliser la police Google, vous devez intégrer la classe d’importation Font. Pour cela, vous devez :
• Cliquez sur le lien « Google Fonts » situé juste en dessous de l’option. L’écran suivant s’affichera.
• Choisissez la police souhaitée et cliquez sur le bouton Ajouter « + » correspondant à ce style de police.

• Après avoir ajouté une police, une fenêtre contextuelle affichera la famille de polices sélectionnée. Cliquez sur l’onglet « Incorporer », puis sur le bouton « Importer ».
• Copiez l’URL @import de cette police et collez-la dans le champ « Incorporer la police @import ».

2. Modifier une police existante

Pour modifier la police existante, cliquez simplement sur le bouton Modifier situé à côté du style de police. Les options suivantes s’afficheront :

• Actif: Activer ou désactiver le style de police.
• Le style de police: Modifiez le titre de la police à l’aide de cette option.
• Intégrer @Importer Police : Modifiez l’URL d’importation pour cette police spécifique.

3.3 Couleurs

En vertu de cette section de module de configuration de produitVous pouvez définir votre propre palette de couleurs et permettre à vos clients de choisir la couleur de leur choix pour le produit sélectionné. L’interface suivante affiche une liste de couleurs existantes que vous pouvez modifier ; vous pouvez également ajouter une nouvelle couleur si nécessaire.

1. Ajouter une nouvelle couleur

• Code couleur : Cette option vous permet de choisir la couleur à afficher sur la page de personnalisation du produit.
• Actif : Activer ou désactiver la couleur.

2. Modifier une couleur existante

• Code couleur : Cette option vous permet de choisir la couleur à afficher sur la page de personnalisation du produit.
• Actif : Activer ou désactiver la couleur existante.

3.4 Groupes d’images

Pour un produit sélectionné, le client peut choisir parmi les images par défaut fournies par le vendeur ou télécharger une image personnalisée. Les images par défaut sont regroupées par catégories. Vous pouvez modifier ces catégories existantes ou en ajouter de nouvelles.

1. Ajout d’un nouveau groupe d’images

• Nom du groupe d’images : Vous pouvez définir un nom pour le groupe d’images.
• Télécharger l’image: Vous pouvez télécharger et définir une image de logo pour le groupe.
• Actif: Cette option permet d’activer ou de désactiver le groupe d’images.

2. Modifier un groupe d’images existant

• Nom du groupe d’images : Vous pouvez définir un nom pour le groupe d’images.
• Télécharger l’image: Vous pouvez télécharger et définir une image de logo pour le groupe.
• Actif: Cette option permet d’activer ou de désactiver le groupe d’images.

Pour afficher, ajouter ou supprimer les images d’un groupe d’images, cliquez sur l’option « Afficher les images » correspondant à ce groupe.

L’interface suivante s’affichera.

Ici, vous pouvez ajouter une nouvelle image, supprimer ou modifier les images existantes au sein d’un groupe.

4.0 Paramètres de personnalisation des produits du site

Les paramètres de configuration des polices, des couleurs et des groupes d’images, abordés dans les sections 3.2, 3.3 et 3.4, s’appliquent à tous les produits du site. Ces paramètres sont appelés paramètres globaux. Il est également possible de configurer ces paramètres au niveau de chaque produit. Ces paramètres sont spécifiques au produit configuré par l’administrateur depuis le back-office. Vous trouverez ci-dessous la description des paramètres de personnalisation pour chaque produit. L’administrateur du site peut appliquer ces paramètres différemment à chaque produit de la boutique. Pour configurer les paramètres de personnalisation d’un produit, suivez les étapes suivantes : 1. Dans le panneau d’administration, accédez à l’option « Catalogue » dans le menu situé à gauche de l’interface.

2. Cliquez sur l’option « Produits » sous « Catalogue ».

Vous verrez une liste des produits de la boutique ainsi qu’une option pour les modifier ou les configurer. L’écran des produits de la boutique est présenté ci-dessous :

En cliquant sur le bouton « Modifier » d’un produit, vous accéderez aux paramètres de configuration suivants. Sélectionnez l’onglet Concepteur/Personnalisateur de produit.

Désormais, les paramètres complets du concepteur/personnalisateur de produits sont divisés en quatre groupes, à savoir :

• Configuration
• Prix
• Texte
• À-CÔTÉS

4.1 Paramétrage

• Activer désactiver: Cette option permet d’activer ou de désactiver le panneau de personnalisation du produit sur la page produit en front-end.
• Requis pour la personnalisation du produit : Activez cette option si vous souhaitez imposer la personnalisation des produits à vos clients.
• Taille de l’image à télécharger : Cette option permet de définir la taille maximale des images à télécharger.
• Prix ​​du téléchargement d’image : Cette option permettra de définir le prix du téléchargement d’une image.
• Afficher l’option de téléchargement du PNG : Activer ou désactiver l’option de téléchargement de l’image PNG.
• Autoriser le téléchargement d’images : Activer ou désactiver l’option de téléchargement d’images sur la page de personnalisation du produit.
• Redimensionner le texte : Activez cette option pour autoriser le redimensionnement du texte.
• Afficher le curseur rotatif sur le texte : Activez cette option pour autoriser la rotation du texte.
• Option d’affichage pour le code QR : Activer ou désactiver son option d’ajout de code QR sur le produit.
• Afficher la transparence des images : Activez cette option pour afficher l’option de transparence des images.
• Filtres d’affichage pour les images : Cette option vous permet d’activer ou de désactiver les filtres d’image.
• Filtres pour images : Sélectionnez les filtres multiples que vous souhaitez afficher sur la page de personnalisation du produit.

4.2 Prix

• Prix ​​fixe du texte : Cette option vous permet de définir un prix fixe pour le texte.
• Coût par personnage activé : Vous pouvez activer cette option si vous souhaitez facturer un coût par personnage.
• Conception complète à prix fixe : Cette option vous permet de définir un prix fixe pour la conception complète. Ce prix s’ajoute au coût total de la personnalisation.
• Prix ​​du code QR : Vous pouvez définir un prix pour le code QR en utilisant cette option.

Texte 4.3

• Bloc de texte à afficher : Vous pouvez afficher ou masquer l’option de bloc de texte sur la page de personnalisation du produit.
• Longueur maximale du texte : Cette option vous permet de définir une longueur maximale pour le texte.
• Longueur minimale du texte : Cette option vous permet de définir une longueur minimale pour le texte.
• Autoriser la transparence du texte : Vous pouvez activer ou désactiver cette option de transparence du texte.
• Autoriser la courbe du texte : Vous pouvez activer ou désactiver cette option pour la courbe du texte.

Côtés 4.4

• Activer le côté : Cette option vous permet d’activer ou de désactiver le côté.
• Nom du côté : Cette option vous permet de définir le nom du côté.
• Image latérale : Cette option vous permet de télécharger une image montrant le côté du produit. Ces paramètres concernent un seul côté du produit. Vous pouvez appliquer les mêmes paramètres à l’autre côté du produit.
  Remarque: Ici, vous pouvez uniquement configurer le nombre de côtés, comme indiqué dans les « paramètres de configuration » du module de personnalisation du produit. Par exemple, si vous avez défini le « nombre maximal de côtés » à 2, vous ne pouvez configurer que les paramètres des côtés 1 et 2.

Comment configurer les polices, les couleurs et les groupes d’images ?

Lorsque vous modifiez les paramètres de personnalisation d’un produit, vous trouverez les options permettant de sélectionner différentes polices, couleurs et groupes d’images en haut à droite de l’écran. Trois options s’offrent à vous :

1. Configurer les polices
Toutes les polices ajoutées dans la section 3.2 sont listées ici. Vous pouvez activer ou désactiver directement chaque police.

2. Configurer les couleurs
Toutes les couleurs ajoutées dans la section 3.3 sont répertoriées ici. Vous pouvez activer ou désactiver directement chaque couleur.

3. Configurer les groupes d’images

Tous les groupes d’images ajoutés dans la section 3.4 sont listés ici. Vous pouvez activer ou désactiver directement chaque groupe d’images. En cliquant sur le bouton « Afficher les images », l’écran suivant s’affiche.

5.0 Interface avant de Module de conception de produits personnalisés Prestashop

Une fois l’outil de personnalisation de produits en ligne installé et configuré pour la boutique, l’onglet « Paramètres de l’outil de personnalisation » apparaît dans les paramètres généraux des produits. Pour activer ou désactiver la page de personnalisation d’un produit, il suffit de configurer ses paramètres dans le catalogue « Produits » de votre espace client. Lorsqu’un module de personnalisation est activé, un bouton « Personnaliser » s’affiche sur la page produit, comme illustré ci-dessous :

En cliquant sur le bouton Personnaliser, le client verra apparaître une fenêtre contextuelle présentant différents paramètres de conception et de personnalisation du produit. Il pourra ajouter des couleurs, du texte, des images ou un code QR personnalisés selon ses besoins.

Vos clients peuvent effectuer tout type de personnalisation, comme : 1. La couleur

2. Image : Les clients peuvent ajouter une image au produit. Ils peuvent choisir une image par défaut parmi celles proposées, télécharger leur propre image ou ajouter un code QR au produit.

2a. Choisissez une image

2b. Télécharger une image

Supposons que le client ajoute l’image téléchargée au dos du sweat à capuche. 2c. Ajouter un code QR

3. Texte

Sauvegarde de la personnalisation des produits

De même, le client peut personnaliser d’autres produits du magasin, comme des tasses et des coques de téléphone.

Page récapitulative du panier pour un produit personnalisé. L’image ci-dessous montre comment le produit personnalisé s’affiche sur la page du panier avec différentes options proposées aux clients après avoir cliqué sur le bouton « Enregistrer la personnalisation ».

Le client peut consulter la facture de ce produit personnalisé comme indiqué ci-dessous.

Page d’historique des commandes avec facture

En cliquant sur le bouton Détails, le client verra l’écran suivant :

Consultation des commandes depuis le panneau d’administration : L’administrateur peut consulter la facture de la commande ainsi que toutes les configurations relatives à la personnalisation du produit depuis le back-office. Les détails d’une commande sont accessibles dans la section « Commandes » du panneau d’administration.

En cliquant sur le bouton « Voir » correspondant à un produit, l’administrateur peut consulter tous les détails de la commande relative à ce produit personnalisé.

En cliquant sur le bouton « Afficher les détails », l’administrateur verra les détails complets du produit personnalisé sous la forme d’une fenêtre contextuelle, comme illustré ci-dessous.

L’administrateur peut cliquer sur l’option « Aperçu » pour voir l’image personnalisée ajoutée au produit, qui ressemble à ceci :

Tutoriel : Regardez le guide vidéo

Pour vous aider à configurer et à utiliser le Module de conception/personnalisation de produits PrestaShopNous avons préparé un document détaillé. Tutoriel vidéo YouTubeCette vidéo vous guide pas à pas à travers l’installation, la configuration et l’utilisation du module.

Regardez le tutoriel ici :

Pour toute assistance supplémentaire, personnalisation ou question, veuillez contacter notre équipe d’assistance à l’adresse suivante :
support@knowband.com