whats new

Aperçu en direct des options produit personnalisées Shopify, avec scan IA et Sidekick

What's new: custom product options, now with live preview. A tote bag product page with the shopper's name and photo printed on the bag

Promotion Image

Summarize this post by:

Qikify Custom Product Options peut désormais afficher la personnalisation de vos clients directement sur l'image du produit. Autour de cette nouveauté, deux fonctions que vous n'avez peut-être pas encore essayées : un scan IA qui choisit des templates d'ensembles d'options pour votre catalogue, et une extension Sidekick qui répond à vos questions sur votre configuration dans l'interface d'administration Shopify.

Three places AI now helps in Qikify Custom Product Options: AI store scan, the Live Preview mockup, and Shopify Sidekick

Le scan IA de la boutique, le mockup Live Preview et Sidekick en un coup d'œil

Jusqu'ici, un client qui saisissait un prénom pour un bracelet gravé ou importait une photo pour un tote bag imprimé devait imaginer le résultat. Vous pouviez le décrire, ajouter une image d'exemple ou indiquer les dimensions dans le libellé du champ, mais rien de tout cela ne vaut le fait de le voir. Live Preview comble ce manque pour votre personnalisation e-commerce, et comme c'est vous qui définissez la mise en page, ce que voit le client correspond exactement à sa commande.

Voici ce que fait chacune de ces trois fonctions, et comment l'activer.

À retenir

  • Live Preview affiche le texte et la photo du client sur l'image du produit au fil de la saisie, selon la mise en page définie dans l'éditeur d'ensembles d'options. Disponible avec les forfaits Unlimited et Shopify Plus.
  • Le scan IA de la boutique analyse une fois votre catalogue Shopify et suggère des templates d'ensembles d'options sur la page Templates.
  • L'extension Sidekick répond à vos questions sur vos ensembles d'options dans l'interface d'administration Shopify, sans jamais les modifier.

1. Ce que fait le mockup Live Preview

Le mockup Live Preview de Qikify Custom Product Options affiche en temps réel la personnalisation du client sur l'image du produit Shopify. Dès qu'il saisit un prénom ou importe une photo, l'image du produit se met à jour : il voit ce qu'il va recevoir avant même de l'ajouter au panier.

The name Emma appears on a necklace pendant as it is typed, then the metal changes from silver to gold to rose gold

Saisissez un prénom et il apparaît sur le pendentif. Choisissez un métal et le pendentif change avec lui

Vous définissez la mise en page une seule fois, dans l'éditeur d'ensembles d'options. Faites glisser, redimensionnez et faites pivoter chaque option sur l'aperçu, mettez le texte en forme, et la boutique l'affiche exactement comme vous l'avez laissé. Les clients peuvent saisir du texte et importer des images, mais ils ne peuvent rien déplacer, redimensionner ni faire pivoter : impossible donc de se retrouver avec un prénom à moitié hors du sac sur une page produit.

Shopify product page for a canvas tote bag with the name Lily and a baby photo drawn on the bag

Le client saisit « Lily » et importe une photo, et l'image du tote bag se met à jour instantanément

Tous les types d'options ne peuvent pas apparaître sur l'image. Les options de type texte s'affichent sous forme de texte, les options de type image sous forme d'images, et quelques-unes restent uniquement dans le formulaire.

Which option types can appear on the mockup, drawn as text or as an image, and which cannot

Les options texte et à choix unique s'affichent sous forme de texte, les photos importées et les pastilles d'image sous forme d'images

Le mockup Live Preview est disponible avec les forfaits Unlimited et Shopify Plus.

2. Comment configurer le mockup Live Preview

L'exemple ci-dessous est un tote bag personnalisé dans une boutique Shopify : le client saisit un prénom et importe une photo, et les deux sont imprimés sur le sac. La configuration se fait dans l'éditeur d'ensembles d'options de Qikify Custom Product Options.

Activez le mockup pour une option. Dans Qikify Custom Product Options, allez dans Option sets et ouvrez un ensemble (ou créez-en un), cliquez sur l'option que vous voulez voir sur l'image, ouvrez Show mockup settings et cochez Show on mockup. Répétez l'opération pour chaque option à afficher : dans cet exemple, le champ du prénom et l'import de photo.

Option set editor with Show on mockup ticked for the Name option and Lily placed on a tote bag preview

Les réglages à gauche, l'aperçu en direct et un exemple de formulaire à droite

Ticking Show on mockup for the Metal Type image swatch draws a round metal pendant on the editor preview

Cochez Show on mockup et choisissez une forme : l'option de pastille d'image apparaît sur l'aperçu

Choisissez l'arrière-plan. Sous l'aperçu du mockup, cliquez sur Change background, puis choisissez l'une des options suivantes :

  • Product image. Choisissez l'un des produits déjà associés à l'ensemble. Sa photo sert uniquement à aligner les éléments dans l'éditeur ; dans la boutique, chaque produit affiche le mockup sur ses propres photos. Sous Apply to, choisissez All product images, First product image only, Last product image only ou une image précise (Specific product image) selon sa position.
  • Custom image. Importez votre propre image. Dans la boutique, cette image unique sert de photo de mockup pour tous les produits de l'ensemble.
  • No background. Le mockup s'affiche sur toutes les photos de chaque produit.

L'option Product image ne fonctionne que si l'ensemble d'options est associé à des produits ou variantes précis, et non à tous les produits ou à une règle automatique : associez-les donc d'abord dans l'onglet Assign products.

Select background window with Product image chosen and Apply to set to First product image only

Product image en arrière-plan, avec le mockup sur la première photo du produit uniquement

Positionnez et mettez en forme chaque option. Cliquez sur une option dans l'aperçu, puis faites-la glisser pour la déplacer, tirez les poignées d'angle pour la redimensionner et la poignée du haut pour la faire pivoter. Saisissez des valeurs d'exemple dans le formulaire à côté de l'aperçu pour voir à quoi ressemblera une vraie commande ; les options photo vides affichent un espace réservé dans l'éditeur pour que vous puissiez quand même les placer.

The engraving Emma is dragged onto the pendant in the editor, then the Curve slider bends it along the pendant

Faites glisser le texte à sa place, puis utilisez Curve pour l'incurver le long du pendentif

Chaque option dispose aussi de réglages précis dans le panneau à côté de l'aperçu, pour les cas où le glisser-déposer ne suffit pas :

  • Position : Horizontal et Vertical placent le centre de l'option en pourcentage de l'arrière-plan ; 50 / 50 correspond donc au centre exact. L'angle de rotation (Rotate angle) s'exprime en degrés.
  • Options texte : choisissez une source de police (celle de votre thème par défaut, une Google Font ou un fichier de police que vous importez), puis la taille, l'espacement des lettres, le gras, l'italique, le soulignement ou le barré, la couleur, l'opacité et un effet de contour ou d'ombre.
  • Texte selon le type de champ : la courbure de -100 à 100 et l'ajustement automatique à une largeur maximale ne fonctionnent que sur le texte d'une seule ligne. L'alignement à gauche, centré ou à droite concerne le texte sur plusieurs lignes, et un texte long peut passer à la ligne dans un cadre fixe, les lignes qui dépassent étant masquées.
  • Options image : choisissez un mode de remplissage, une forme de recadrage (carré, carré arrondi, cercle, cœur, étoile ou votre propre PNG transparent) et l'opacité.

Trois repères chiffrés vous aideront si vous saisissez des valeurs plutôt que de faire glisser : 50 / 50 en Horizontal et Vertical place une option au centre exact, la courbure va de -100 à 100, et la taille de police est calculée par rapport à un arrière-plan de 1 000 px de large, si bien que votre texte suit l'échelle de l'image au lieu de se dérégler sur une photo plus grande.

Mockup settings for a text option in the Google Font Pacifico, next to a photo option cropped to a circle

À gauche, l'option prénom avec la Google Font Pacifico. À droite, l'option photo recadrée en cercle

Enregistrez et ouvrez votre boutique. Sur la page produit, la galerie habituelle est remplacée par la galerie du mockup, qui se met à jour au fur et à mesure que le client remplit les options.

Bon à savoir. Les options vides ne s'affichent pas : rien n'apparaît tant que le client n'a pas rempli le champ. Le mockup n'est qu'un aperçu : il n'ajoute aucune propriété ni image supplémentaire au panier ou à la commande. Les Google Fonts et les polices personnalisées peuvent mettre un instant à se charger la première fois. Enfin, si vous retirez de l'ensemble d'options un produit dont la photo sert d'arrière-plan, choisissez un nouvel arrière-plan, car celui-ci n'existe plus.

Si le mockup n'apparaît pas sur votre page produit, vérifiez que vous avez le forfait Unlimited ou Shopify Plus, qu'au moins une option a la case Show on mockup cochée, et que l'ensemble d'options est publié et appliqué à ce produit. Si vous avez choisi une image produit précise, le produit doit avoir au moins autant de photos. Certains thèmes personnalisés utilisent une galerie produit non standard ; si c'est le cas du vôtre, notre équipe la configurera pour votre thème via le chat en direct.

3. Ce que fait le scan IA de la boutique

Le scan IA de la boutique est présent dans Qikify Custom Product Options depuis un moment et passe facilement inaperçu : il mérite qu'on s'y attarde maintenant que le mockup vous donne une raison de plus de créer des ensembles d'options.

L'application analyse votre catalogue Shopify et recommande des templates d'ensembles d'options adaptés à ce que vous vendez réellement, au lieu de vous laisser parcourir plus de 25 types d'options en partant d'une page blanche.

App dashboard with the scan card reading Analyzing your products and matching templates, above the Setup guide

La carte du scan se trouve au-dessus du guide de configuration et affiche une barre de progression pendant l'analyse

4. Comment fonctionne le scan IA de la boutique

La carte du scan se trouve au-dessus du guide de configuration, sur le tableau de bord de l'application. Cliquez sur « Scan my products » : la carte affiche alors une barre de progression pendant qu'elle analyse vos produits et les compare aux templates. Une fois l'analyse terminée, elle vous indique combien de templates correspondent et propose un bouton « View my templates » qui mène à la page Templates, où chaque recommandation prend la forme d'une carte que vous pouvez ouvrir.

Option set templates page showing three templates recommended for the store's products, each listing its option types

Les templates recommandés, chacun avec la liste des types d'options qu'il configure

Un seul scan suffit, et les suggestions restent ensuite sur la page Templates. Deux situations l'empêchent de fonctionner : une boutique qui n'a pas encore de produits et une boutique protégée par mot de passe. Dans les deux cas, la carte vous le signale et vous indique quoi corriger.

5. Ce que fait l'extension Shopify Sidekick

Sidekick est l'assistant IA intégré à votre interface d'administration Shopify. Une fois l'extension Qikify Custom Product Options installée, vous pouvez l'interroger sur vos options produit en langage courant, et il vous répond à partir de votre configuration réelle, exactement comme notre extension Sidekick pour Volume Discounts le fait pour les remises.

Vous pouvez lui demander de retrouver un ensemble d'options, de vérifier quel ensemble s'applique à un produit ou à une collection, et de passer en revue les options et la logique conditionnelle d'un ensemble. Il répond aussi aux questions pratiques sur la configuration et les réglages, vous indique les fonctionnalités incluses dans votre forfait actuel, vous oriente vers l'article d'aide correspondant et vous accompagne dans le guide de configuration.

Il fonctionne en lecture seule. Sidekick peut rechercher des informations et vous guider, mais il ne modifie jamais vos ensembles d'options.

6. Comment fonctionne l'extension Shopify Sidekick

Ouvrez Sidekick dans votre interface d'administration Shopify et posez votre question. Sidekick répond dans le panneau et, selon votre demande, peut aussi vous emmener directement sur la bonne page de Qikify Custom Product Options : inutile de fouiller dans le menu pour retrouver l'ensemble qui vous intéressait.

Pour commencer, voici deux questions que notre équipe a utilisées pour tester l'extension :

  • « review my option sets »
  • « how do I show engraving option only when option customize is selected »

Pour la seconde, Sidekick a d'abord vérifié le forfait de la boutique, confirmé que la logique conditionnelle était incluse, puis listé les étapes pour configurer la règle.

Shopify Sidekick answering how to show an engraving option only when Customize is selected

Sidekick vérifie d'abord le forfait, puis détaille les étapes de la logique conditionnelle

FAQ

Quel forfait inclut le mockup Live Preview ?

Le mockup Live Preview de Qikify Custom Product Options est disponible avec les forfaits Unlimited et Shopify Plus. S'il ne s'affiche pas sur votre page produit, vérifiez d'abord votre forfait, puis qu'au moins une option a la case Show on mockup cochée.

L'image du mockup est-elle enregistrée dans la commande Shopify ?

Non. Le panier et la commande conservent uniquement ce que le client a saisi ou importé, comme avant. Le mockup est un aperçu sur la page produit et n'ajoute aucune propriété ni image supplémentaire.

Shopify Sidekick peut-il modifier mes ensembles d'options ?

Non. L'extension Qikify Custom Product Options pour Sidekick fonctionne en lecture seule : elle retrouve les ensembles d'options, explique la logique conditionnelle et vous renvoie vers la bonne page, mais c'est toujours vous qui effectuez les modifications dans l'application.

Prêt à montrer à vos clients ce qu'ils achètent ?

Qikify Custom Product Options est disponible sur le Shopify App Store. Installez l'application, lancez le scan de la boutique pour obtenir vos premiers ensembles d'options, puis activez le mockup et regardez un prénom s'afficher sur votre propre photo produit.

Installer Qikify Custom Product Options

En savoir plus : L'emballage cadeau comme option produit

En savoir plus : Créer et optimiser des remises sur volume Shopify avec l'assistant IA et Sidekick

about the author

Lauren Nguyen

Lauren Nguyen

Growth Marketing Specialist at Qikify

Hey there! Lauren here - the data-driven marketing gal at Qikify. My thing? Providing eCommerce merchants like you with the most valuable insights and streamlined solutions to help grow your online stores and drive more sales. Since joining this exciting industry, I've been all about sharing expertise to boost your success. When I'm not geeking out over marketing, you'll find me kickstarting my day with a delicious morning coffee (and let's be real, an afternoon cup is a must some days to power through). Feel free to connect with me through LinkedIn. I'm always stoked to chat with fellow marketing enthusiasts, store owners, swap ideas, and explore cool new collaborations. Together, we can take your online business to new heights!