1.0 Présentation
En tant que propriétaire de magasin, vous avez toujours pensé multiplier les conversions mais pas l'expérience de magasinage de vos clients. Un client heureux et satisfait est celui qui retourne au magasin à la recherche d'objets supplémentaires. Ainsi, si vous souhaitez fidéliser vos clients, assurez l'expérience client en intégrant l'addon Prestashop Product Designer / Customizer dans votre boutique en ligne. Avec l'aide du module Prestashop Custom Product Design, les marchands peuvent proposer à leurs clients des options de personnalisation de produits en ligne intuitives et créatives, leur permettant de transformer la version de base du produit en un design moderne, élégant et unique. Le module de personnalisation de produit Prestashop permet à l'administrateur d'afficher la page du panneau de personnalisation du produit lorsque l'utilisateur clique sur le bouton Personnaliser de la page du produit. Les clients peuvent facilement ajouter des textes riches en couleurs avec des effets, télécharger leurs images avec des filtres, ajouter un code QR pour les adapter à leurs besoins.
Fonctionnalités 1.1 frappantes du module de personnalisation de produit Prestashop
Aucune technique de codage n'est requise pour configurer ou modifier les paramètres du module Prestashop Custom Product Design. Tout est facile avec ce module. Permet de vérifier rapidement les différentes fonctionnalités offertes par cet addon Prestashop.
- Le module Prestashop Product Designer / Customizer permet d’offrir une large gamme de produits personnalisables dans votre boutique en ligne. En utilisant l’addon de concepteur de produit personnalisé Prestashop, les clients peuvent facilement acheter et profiter des avantages des produits en ligne étendus, qui peuvent être personnalisés en fonction de leurs besoins.
- Online Product Designer ajoute une vue de concepteur pour les produits afin que les acheteurs potentiels aient la possibilité de personnaliser le produit en temps réel. Le module de configurateur de produit 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 de produit avec n'importe quel produit qu'ils souhaitent acheter, tels que des t-shirts, des tasses, des bagues ou tout autre type de produit pouvant être personnalisé en fonction de leurs besoins.
- Le module de personnalisation de produit Prestashop affiche un bouton Personnaliser pour chaque produit personnalisable du magasin. L'administrateur peut activer les options de personnalisation pour les produits souhaités uniquement.
- La fonctionnalité complète du module Prestashop Product Designer / Customizer peut être activée ou désactivée. Lorsque ce module est désactivé, les options de personnalisation du produit standard sont affichées sur la page du produit.
- Le module de personnalisation avancé du produit affiche le calcul du prix de personnalisation en temps réel sur la page du produit.
- Avec l'addon concepteur de produit personnalisé Prestashop, l'administrateur peut définir les côtés de la conception du produit disponibles pour l'utilisateur.
- Le module de configurateur de produit permet à l'administrateur d'activer ou de désactiver les options de téléchargement de fichier PDF pour les clients du client.
- Le module Prestashop Extended Product Customization offre la possibilité d’ajouter des images prédéfinies pour un produit. Les images prédéfinies sont généralement définies en groupes. Les clients peuvent télécharger et définir leurs propres images.
- Le client peut utiliser de manière flexible les polices, les couleurs et les filtres souhaités pour le produit à l'aide de ce module de concepteur de produit Prestashop.
- Ce module de personnalisation de produit avancé permet à l’administrateur de définir les prix de différentes options de personnalisation.
- Le module de personnalisation de produit Prestashop offre également une option permettant de personnaliser le produit à l'aide d'un code QR pour lequel l'administrateur peut définir un prix distinct.
- L'addon de concepteur de produit personnalisé Prestashop ajoute automatiquement un prix fixe de conception complète au prix personnalisé final d'un produit.
- L'addon Prestashop Product Designer / Customizer prend en charge la compatibilité entre plusieurs magasins et plusieurs langues.
- L'addon de concepteur de produit personnalisé Prestashop est réactif pour les mobiles et compatible avec divers thèmes Prestashop.
Technologie 1.2 pour le développement
- Langue: PHP
- Cadre de travail: Prestashop
Guide d'installation de 2.0 pour Advanced Product Customizer
L'administrateur du magasin peut suivre ces étapes simples pour installer l'addon de personnalisation de produit Prestashop sur son magasin de commerce électronique: 1. Tout d’abord, téléchargez le package de l’addon à partir de la boutique Knowband. 2. Vous obtiendrez un fichier compressé contenant le code source et le manuel d'utilisation. Décompressez le package complet dans le répertoire racine de votre boutique Prestashop via un gestionnaire FTP (comme Filezilla ou WinSCP).
L'addon de concepteur de produit personnalisé Prestashop est maintenant installé et prêt à être utilisé. L'administrateur peut maintenant configurer les différents paramètres de configuration en fonction de son site Prestashop.
Interface d'administration 3.0 du module Prestashop Advanced Product Customizer
Juste après l'installation réussie du module Prestashop Product Designer / Customizer sur votre site Web, vous pouvez configurer les paramètres du panneau de personnalisation du produit 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 la prochaine interface, 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 produit Knowband comprend quatre sous-sections qui ont été examinées plus loin. 1.Configuration 2.Fonts 3.Colors Groupe 4.Image Chaque onglet du module Prestashop Extended Product Customization a été présenté ci-dessous:
Configuration 3.1
Sous les paramètres de configuration de l'addon de personnalisation du produit Prestashop, vous pouvez définir les paramètres de base du panneau de personnalisation affichés sur l'interface pour les clients.
- Activer désactiver: Avec cette option, vous pouvez activer ou désactiver complètement les fonctionnalités du module Prestashop Extended Product Customization pour les clients.
- Afficher la possibilité de télécharger le PDF dans le panier: Vous pouvez activer ou désactiver cette option pour télécharger l'image de conception au format PDF sur la page de commande de l'administrateur.
- Afficher l'aperçu de la conception dans la facture PDF: Activez ou désactivez cette option pour afficher ou masquer l'aperçu de la conception dans le PDF de facture.
- Nombre maximum de diapositives: À l'aide de cette option, vous pouvez définir le nombre maximal de côtés produit autorisés pour la personnalisation à partir du client.
Polices 3.2
Dans cette section du module de concepteur de produit Prestashop, le propriétaire du magasin a la possibilité d'ajouter plusieurs polices que le client peut choisir d'imprimer un texte stylé sur le produit. La première interface ci-dessous vous montre une liste des polices existantes disponibles sur le front-office. Une nouvelle police peut être ajoutée ou la police existante peut être modifiée ou supprimée.
Ici, vous pouvez effectuer les deux autres actions en tant que:
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 arrière. Vous verrez l'interface ci-dessous.
- Actif: Cette option activera ou désactivera la police.
- Titre de la police: En utilisant cette option, vous pouvez définir le titre de la police comme indiqué dans Google Font.
- Police @import intégrée: Pour utiliser Google Font, vous devez incorporer la classe Import Font. Pour cela, vous devez:
- Cliquez sur le lien "Google Fonts" fourni juste en dessous de l'option. L'écran ci-dessous vous sera montré.
- Choisissez la police de votre choix et cliquez sur le bouton "+" pour ce style de police.
- Lors de l'ajout d'une police, une fenêtre contextuelle s'affichera pour vous indiquer la famille de polices que vous avez 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 Embed @import Font.
2. Modifier une police existante
Si vous souhaitez modifier la police existante, cliquez simplement sur le bouton Modifier situé à côté du style de police. Vous verrez les options suivantes:
- Actif: Activer ou désactiver le style de police.
- Le style de police: Editez le titre de la police en utilisant cette option.
- Police @Import intégrée: Modifiez l'URL d'importation pour cette police particulière.
3.3 Couleurs
Dans cette section du module Configurateur de produit, vous pouvez définir votre propre palette de couleurs et permettre à vos clients de choisir n'importe quelle couleur pour le produit sélectionné. L’interface suivante vous montre une liste de couleurs existantes pouvant être éditées ou vous pouvez ajouter une nouvelle couleur si nécessaire.
1. Ajout d'une nouvelle couleur
- Code de couleur: avec cette option, choisissez la couleur que vous souhaitez afficher sur la page de personnalisation du produit.
- Actif: Activer ou désactiver la couleur.
2. Modifier une couleur existante
- Code de couleur: avec cette option, choisissez la couleur que vous souhaitez afficher sur la page de personnalisation du produit.
- Actif: Activer ou désactiver la couleur existante.
Groupes d'images 3.4
Pour un produit sélectionné, le client peut sélectionner les images par défaut fournies par le propriétaire du magasin ou télécharger une nouvelle image personnalisée pour la personnalisation du produit. Les images par défaut ont été classées en tant que groupes d'images. Ces groupes d'images existants peuvent être modifiés ou vous pouvez même ajouter un nouveau groupe d'images.
1. Ajout d'un nouveau groupe d'images
- Nom du groupe d'images: Vous pouvez définir le nom souhaité pour le groupe d'images.
- Télécharger une image: Vous pouvez télécharger et définir une image de logo de groupe d’images.
- Actif: Cette option activera ou désactivera le groupe d'images.
2. Modifier un groupe d'images existant
- Nom du groupe d'images: Vous pouvez définir le nom souhaité pour le groupe d'images.
- Télécharger une image: Vous pouvez télécharger et définir une image de logo de groupe d’images.
- Actif: Cette option activera ou désactivera le groupe d'images.
Pour afficher, ajouter ou supprimer des images dans un groupe d'images, cliquez sur l'option "Afficher les images" correspondant au groupe d'images.
Vous verrez l'interface suivante.
Ici, vous pouvez ajouter une nouvelle image, supprimer ou modifier les images existantes dans un groupe.
Paramètres de personnalisation 4.0 pour les produits de site
Les paramètres de configuration pour les polices, les couleurs et les groupes d’images sont abordés à la section 3.2, 3.3. Et 3.4 sont applicables pour tous les produits du site. Ces paramètres peuvent être appelés paramètres globaux. En dehors de cela, les réglages peuvent également être effectués au niveau du produit. Ces paramètres sont spécifiques au produit que l'administrateur a configuré à partir du back-office. Ci-dessous sont discutés les paramètres de personnalisation de produit pour des produits individuels. L'administrateur du site peut appliquer ces paramètres différemment pour chaque produit du magasin. Pour configurer les paramètres de personnalisation de produit pour des produits individuels, suivez les étapes répertoriées: 1.Dans le panneau d'administration, sélectionnez "Catalogue" dans la barre de menus de gauche de l'interface.
2.Cliquez sur l'option "Produits" sous "Catalogue".
Vous verrez une liste de produits du magasin avec une option pour éditer ou configurer le produit. L'écran des produits du magasin est présenté ci-dessous:
Après avoir cliqué sur le bouton "Modifier" d'un produit, vous trouverez les paramètres de configuration suivants. Choisissez l'onglet Product Designer / Customizer.
Désormais, les paramètres complets du concepteur / personnaliseur de produit sont répartis en quatre groupes, à savoir:
- configuration
- Prix
- Texte
- Côtés
Configuration 4.1
- Activer désactiver: Cette option active ou désactive le panneau de personnalisation du produit sur la page du produit au niveau du client.
- Requis pour la personnalisation du produit: Activez cette option si vous souhaitez imposer la personnalisation du produit aux clients.
- Télécharger la taille de l'image: Cette option définira la taille maximale pour le téléchargement des images.
- Télécharger le prix de l'image: Cette option fixera le prix du téléchargement d’une image.
- Afficher l'option de téléchargement de PNG: Activer ou désactiver l'option pour télécharger une image PNG.
- Autoriser le téléchargement d'images: Activer ou désactiver l'option de téléchargement d'image sur la page de personnalisation du produit.
- Redimensionner le texte: Activez cette option pour autoriser le redimensionnement du texte.
- Afficher le rotateur au texte: Activez cette option pour autoriser la rotation du texte.
- Option d'affichage pour QR Code: Activer ou désactiver son option pour ajouter un code QR sur le produit.
- Afficher la transparence pour les images: Activez cette option pour afficher l'option de transparence pour les images.
- Filtres d'affichage pour les images: Avec cette option, vous pouvez activer ou désactiver les filtres d'image.
- Filtres pour les images: Sélectionnez plusieurs filtres que vous souhaitez afficher au premier plan sur la page de personnalisation du produit.
Prix 4.2
- Texte prix fixe: Cette option vous permet de définir un prix fixe pour le texte.
- Activer le coût par caractère: Vous pouvez activer cette option si vous souhaitez facturer le coût par caractère.
- Prix complet de conception fixe: Cette option vous permet de définir un prix fixe pour la conception complète. Ce prix est ajouté au coût total de la personnalisation.
- QR Code Prix: Vous pouvez définir un prix pour le code QR en utilisant cette option.
Texte 4.3
- Afficher le bloc de texte: Vous pouvez afficher ou masquer l'option de blocage de texte sur la page de personnalisation du produit.
- Longueur maximale du texte: En utilisant cette option, vous pouvez définir une longueur maximale pour le texte.
- Longueur minimale du texte: En utilisant cette option, vous pouvez définir une longueur minimale pour le texte.
- Autoriser la transparence du texte: Vous pouvez activer ou désactiver cette option pour la transparence du texte.
- Autoriser la courbe de texte: Vous pouvez activer ou désactiver cette option pour la courbe de texte.
Côtés 4.4
- Activer le côté: Avec cette option, vous pouvez activer ou désactiver le côté.
- Nom du côté: Cette option vous permet de définir le nom du côté.
- Image de côté: Cette option vous permet de télécharger une image montrant le produit. Ces paramètres concernent un côté du produit. Vous pouvez également effectuer les mêmes réglages pour les autres côtés d’un produit.
Remarque : Ici, vous pouvez uniquement configurer les paramètres du 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 "maximum de côtés" comme 2, vous pouvez uniquement configurer les paramètres du côté 1 et du côté 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érents polices, couleurs et groupes d'images dans le coin supérieur droit de l'écran. Vous trouverez trois options comme:
1. Configurer les polices
Toutes les polices ajoutées dans la section 3.2 sont répertoriées ici dans cette interface. Vous pouvez directement activer ou désactiver n'importe quelle police.
2. Configurer les couleurs
Toutes les couleurs ajoutées dans la section 3.3 sont répertoriées ici dans cette interface. Vous pouvez directement activer ou désactiver n'importe quelle couleur.
3. Configurer les groupes d'images
Tous les groupes d’images ajoutés dans la section 3.4 sont listés ici dans cette interface. Vous pouvez directement activer ou désactiver n’importe quel groupe d’images. En cliquant sur le bouton "Voir les images", vous verrez l'écran suivant.
Interface frontale 5.0 du module de conception de produit personnalisé Prestashop
Une fois que Online Product Designer a été installé et configuré pour le magasin, l’onglet Paramètres de Product Designer / Customizer apparaît dans les paramètres généraux des produits du magasin. Si vous souhaitez activer ou désactiver la page de personnalisation du produit pour un produit, vous pouvez simplement configurer les paramètres du produit dans le "Catalogue de produits" du back-office. Lorsque le module Product Designer / Customizer est activé pour un produit, un bouton "Personnaliser" apparaît sur la page du produit, comme indiqué ci-dessous:
En cliquant sur le bouton Personnaliser, une fenêtre contextuelle s’affiche qui présente divers paramètres de conception et de personnalisation du produit. Les clients peuvent ajouter n'importe quelle couleur, texte personnalisé, image personnalisée ou code QR pour un produit en fonction de leurs besoins d'achat.
Vos clients peuvent effectuer n’importe quel type de personnalisation tel que: 1.Color
2.Image Les clients peuvent ajouter une image au produit. Ils peuvent choisir n’importe quelle image par défaut dans le groupe d’images, 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 à l'arrière de Hoodie. 2c. Ajouter un code QR
3.Text
Enregistrement de la personnalisation du produit
De même, le client peut appliquer des personnalisations à d’autres produits du magasin, tels que des étuis de tasse et de téléphone.
Page de résumé du panier d'achat pour le produit personnalisé L'image ci-dessous montre comment le produit personnalisé s'affiche sur la page du panier avec différentes options pour les clients après avoir cliqué sur le bouton "Enregistrer la personnalisation".
Le client peut voir la facture de ce produit personnalisé comme indiqué ci-dessous.
Historique des commandes avec facture
En cliquant sur le bouton Détails, le client verra l'écran suivant:
Vue de la commande à partir du panneau d'administration Admin peut afficher la facture de la commande et toute la configuration relative à la personnalisation du produit depuis le back-office. Les détails d'une commande peuvent être consultés dans la section Commandes du panneau d'administration.
En cliquant sur le bouton Afficher correspondant à un produit, l'administrateur peut vérifier les détails complets de la commande du produit personnalisé.
En cliquant sur le bouton Afficher les détails, l’administrateur verra tous les détails du produit personnalisé sous la forme d’un écran contextuel, comme indiqué ci-dessous.
L'administrateur peut cliquer sur l'option "Aperçu" pour voir l'image personnalisée ajoutée au produit, comme ci-dessous.
