Comment vendre des coques de téléphone avec photo personnalisée sur Shopify
Configurez une coque iPhone personnalisée sur Shopify : modèles, couleurs, photo détourée sur la coque, options texte et image payantes, aperçu en direct.
En bref : Pour vendre des coques de téléphone personnalisées avec Podifai, regroupez tous les modèles sur un seul produit Shopify. Une liste déroulante Model change la photo de la coque, un choix Design Type bascule entre une coque unie et une impression photo intégrale, et la photo du client est détourée sur le contour exact de la coque grâce à un masque d'image. Le texte et les petits visuels sont des options payantes, avec leur propre couleur et police. Partez du modèle Custom iPhone 17 Phone Case : toutes les fonctions utilisées ici sont incluses dans la formule Free.
Que voit le client ?
- Cliquer sur Customize pour ouvrir la fenêtre du personnalisateur.
- Choisir le modèle : iPhone 17, iPhone 17 Pro ou iPhone 17 Pro Max. L'aperçu affiche la coque correspondante.
- Choisir Solid Color pour sélectionner une couleur de coque (Oat, Slate Blue ou Graphite), ou Custom Photo pour imprimer sa propre photo sur toute la coque.
- Pour une coque unie, ajouter si souhaité Text Only (+$1.00), Image Only (+$1.00) ou Text & Image (+$1.50).
- Saisir jusqu'à 20 caractères, puis choisir une couleur et une police de texte. L'aperçu et le prix se mettent à jour au fil des choix, puis le client ajoute au panier.
Essayez-le vous-même sur le produit de la démo en direct.
De quoi avez-vous besoin avant de commencer ?
1. Installer Podifai et activer l'app embed
Installez Podifai depuis le Shopify App Store, puis ouvrez Online Store > Themes > Edit theme > App embeds et activez Podifai Customizer. Les embeds sont enregistrés par thème : recommencez après un changement de thème. Voir Enable App Embed.
2. Créer un seul produit pour tous les modèles
Ajoutez un seul produit Shopify, par exemple « Custom iPhone 17 Case », avec votre prix de base ($19.99 dans la démo). Les modèles et les designs sont gérés dans Podifai : pas besoin de dizaines de variantes Shopify.
3. Préparer trois types d'images
Il vous faut une photo de face de chaque coque vierge dans chaque couleur (même taille, même angle), un contour PNG transparent de la zone imprimable de chaque modèle pour le masque et, en option, un design d'exemple servant de visuel provisoire. Exportez les contours depuis le gabarit d'impression de votre fournisseur pour que la photo détourée corresponde à ce que vous pouvez réellement imprimer. Voir Image & Asset Requirements.
Modèles de téléphone : variantes Shopify ou options Podifai ?
La démo garde le modèle, la couleur et le design dans Podifai, si bien qu'un seul produit Shopify couvre toutes les combinaisons. C'est la configuration la plus rapide, mais elle ne convient pas à toutes les boutiques :
| Votre situation | À utiliser | Ce que cela vous apporte |
|---|---|---|
| Chaque modèle et chaque couleur est un article de stock distinct avec son propre SKU | Variantes Shopify | Shopify suit le stock par SKU ; Podifai ajoute seulement la photo et le texte |
| Les coques sont imprimées à la demande à partir de coques vierges que vous ne comptez pas | Dropdown et Color Swatch Podifai (comme dans la démo) | Un produit, aucune limite de variantes, l'aperçu suit chaque choix |
| Vous gérez un stock de coques vierges mais voulez une page produit simple | Options Podifai avec Track inventory | Liez chaque valeur de modèle ou de couleur à une variante Shopify, ou définissez un Custom count |
Si vous utilisez des variantes Shopify pour la couleur, réglez le Background de la vue sur Variant image pour que l'aperçu suive la variante sélectionnée plutôt qu'un color swatch.
Quelle est la façon la plus rapide de le configurer ?
Podifai fournit un modèle Custom iPhone 17/17 Pro/17 Pro Max Phone Case prêt à l'emploi, avec les mêmes 13 options que la démo. Ouvrez Templates > Podifai Templates, repérez-le et cliquez sur Copy to Product. Dans Choose a product, trouvez votre produit coque et cliquez sur Apply (ou Override s'il a déjà des options Podifai, que le modèle remplace alors). La copie est unique : les modifications ultérieures du modèle n'affectent pas votre produit. Remplacez ensuite les photos de coque et les contours de masque par les vôtres, ajustez les couleurs et les prix, puis enregistrez. Les étapes ci-dessous détaillent chaque réglage.
De quelles options avez-vous besoin ?
Le configurateur complet repose sur 7 options Podifai sur un seul produit Shopify :
| Option | Type Podifai | Réglages clés | Prix |
|---|---|---|---|
| Model | Dropdown | Une valeur par modèle, chacune avec une photo de coque vierge ; calque d'aperçu en direct en pleine taille | Sans supplément |
| Design Type | Badge Group | Solid Color ou Custom Photo | Sans supplément |
| Case Color (one per model) | Color Swatch | Code couleur et photo de coque par couleur ; condition : ce modèle et Solid Color | Sans supplément |
| Upload Image (one per model) | Image Upload | Masque au contour de la coque ; condition : ce modèle et Custom Photo | Sans supplément |
| Customization | Badge Group | Blank, Text Only, Image Only, Text & Image ; condition : Solid Color | +$1.00 à +$1.50 |
| Upload Image (artwork) | Image Upload | Petite zone de visuel ; condition : une option Image est choisie | Inclus ci-dessus |
| Text, Text Color, Text Style | Text Input, Color Swatch, Font Swatch | 20 caractères, couleur et police liées, largeur fixe avec réduction du texte | Inclus ci-dessus |
Comment le configurer dans Podifai, pas à pas
Ces étapes correspondent au produit de la démo en direct. Les cadres rouges indiquent ce qu'il faut modifier et les numéros suivent l'ordre du texte de l'étape.
Étape 1 : Ajouter les types d'option
Ouvrez le produit dans l'éditeur Podifai et cliquez sur l'icône de menu à gauche. Dans Option Type, ajoutez un Dropdown pour le modèle, des Badge Groups pour le type de design et les options payantes, des Color Swatches pour les couleurs de coque et de texte, des Image Uploads pour la photo et les visuels du client, un Text Input et un Font Swatch. Vous ajouterez un color swatch de coque et un import de photo par modèle, car chaque modèle a ses propres photos et son propre contour.
Étape 2 : Changer la photo de la coque selon le modèle choisi
Ajoutez une valeur de Dropdown par modèle et associez-lui la photo de cette coque vierge : la liste affiche alors une petite vignette. Ouvrez l'onglet Live Preview du dropdown, activez Live customizer et réglez Width/height sur 100%. La photo du modèle choisi remplit désormais l'aperçu.
- Exportez toutes les photos de modèle avec la même taille de canevas, pour que le changement de modèle ne décale pas la mise en page.
- Définissez Default option sur votre modèle le plus vendu.
Étape 3 : Afficher chaque couleur de coque en vraie photo
Ajoutez un Color Swatch pour les couleurs de coque de chaque modèle (« iPhone 17 Case Color », etc.). Cliquez sur une valeur pour ouvrir Edit option value, définissez le code couleur de la pastille, puis importez la photo de la coque dans cette couleur comme Preview image. Avec Live customizer activé à 100%, choisir une couleur remplace toute la photo de la coque, ce qui est plus réaliste qu'une simple teinte.
Étape 4 : Afficher les bons champs pour chaque modèle et chaque design
Sur l'import de photo iPhone 17, activez Condition, réglez Show this when sur All et ajoutez deux règles : Model contains iPhone 17 et Design Type contains Custom Photo. Répétez l'opération pour l'import et le color swatch de chaque modèle, en utilisant Solid Color pour les swatches. Les clients ne voient ainsi que le champ qui correspond à leur téléphone.
Étape 5 : Détourer la photo sur le contour de la coque
Ouvrez l'onglet Live Preview de l'import. Activez Apply image mask/shape, cliquez sur + PNG pour importer le contour de la coque de ce modèle, puis sélectionnez-le. La photo du client est alors rognée à la zone imprimable, découpe de l'appareil photo comprise. Vous pouvez aussi activer Enable placeholder image et choisir un motif d'exemple, pour que la coque ne paraisse jamais vide avant l'import.
- Utilisez un contour par modèle : la bosse de l'appareil photo diffère entre l'iPhone 17, le 17 Pro et le 17 Pro Max.
- Prévoyez un peu de fond perdu dans votre fichier d'impression, même si l'aperçu est détouré au plus près.
- Sous Automatic image processing, vous pouvez aussi supprimer l'arrière-plan ou convertir les images en noir et blanc à l'import.
Étape 6 : Facturer les options texte et visuel
Ajoutez un Badge Group nommé Customization avec quatre valeurs : Blank, Text Only, Image Only et Text & Image. Cliquez sur une valeur payante pour ouvrir Edit option value et réglez Price adjustment sur Increase by fixed amount ($1.00 ou $1.50 dans la démo). Appliquez-lui la condition Design Type contains Solid Color, car une coque en photo intégrale n'a pas de place pour du texte supplémentaire.
Étape 7 : Lier le texte à sa couleur et à sa police
Sélectionnez le Text Input et ouvrez Live Preview. Réglez Color sur Link color swatch et choisissez Text Color, puis réglez Font sur Link font swatch et choisissez Text Style. Activez Fixed width (320px dans la démo) avec Shrink text, pour qu'un nom long se réduise afin de tenir sur la coque au lieu de déborder. Appliquez aux champs texte, couleur et police la condition Customization contains Text Only ou Text & Image.
- Avant d'enregistrer, parcourez chaque modèle avec Solid Color et Custom Photo dans l'aperçu de l'éditeur : un seul color swatch ou import doit s'afficher à la fois, et le prix en haut doit changer avec chaque option.
- Cliquez sur Save, puis refaites la même vérification sur votre boutique en ligne, sur ordinateur et sur mobile.
Que se passe-t-il dans le panier et après la commande ?
- Le modèle, le type de design, la couleur de coque, l'option, le texte, la couleur et la police sont enregistrés sur la ligne de commande sous forme de propriétés de ligne, visibles dans Shopify Admin > Orders.
- Le prix de l'option est facturé sur la même ligne : aucun produit de frais caché à gérer.
- La photo originale du client et un lien vers l'aperçu final sont enregistrés avec la commande.
- Avec Generate print-ready files activé, Podifai crée pour chaque commande un PNG transparent du design. Comparez-le au gabarit de votre fournisseur avant d'imprimer.
Dépannage
Deux color swatches ou deux boutons d'import s'affichent
Un des champs propres à un modèle n'a pas toutes ses règles. Ouvrez chaque color swatch de coque et chaque import de photo, et vérifiez que Show this when est réglé sur All et que les règles Model et Design Type sont toutes deux présentes. Voir Conditional Logic.
La photo déborde sur la zone de l'appareil photo ou sur les bords
Le contour du masque ne correspond pas à la photo de la coque. Exportez le contour depuis le même canevas que la photo de la coque, à la même taille, puis sélectionnez-le de nouveau sous Apply image mask/shape. Voir Image masks.
Un texte long déborde de la coque
Activez Fixed width dans Live Preview du Text Input et choisissez Shrink text, ou réduisez la limite de caractères.
Conseils de vente
- Demander une photo en haute résolution. Ajoutez sous l'import une note d'aide du type « Use a photo at least 1500 px tall ». Les photos prises au téléphone conviennent en général ; les captures d'écran et les images de réseaux sociaux, souvent non.
- Garder des prix d'options simples. De petits forfaits comme +$1.00 pour du texte sont faciles à accepter. Fixez le prix de la coque de base pour couvrir l'impression, et réservez les options au travail supplémentaire.
- Faire confirmer le modèle avant l'impression. Les erreurs de modèle sont la première cause de retour de coques de téléphone. Placez le modèle en premier dans le formulaire et affichez-le dans l'e-mail de confirmation de commande.
Que pouvez-vous vendre d'autre avec cette configuration ?
Le même sélecteur de modèle, le même masque et le même import de photo conviennent à tout produit dont la zone imprimable a une forme fixe :
- Coques Samsung et Pixel
- Étuis pour AirPods et tablettes
- Housses et skins pour ordinateur portable
- Dessous de verre et décorations avec photo
- Médailles pour animaux et porte-clés photo
Questions fréquentes
Oui. Dans Podifai, ouvrez Templates > Podifai Templates, repérez Custom iPhone 17/17 Pro/17 Pro Max Phone Case, cliquez sur Copy to Product puis sur Apply sur votre produit. Remplacez ensuite les photos de coque et les contours par les vôtres.
Activez Apply image mask/shape dans l'onglet Live Preview de l'Image Upload et importez un contour PNG transparent de la coque avec + PNG. La photo est détourée sur ce contour dans l'aperçu.
Oui. Ajoutez un Dropdown avec une valeur par modèle et utilisez des conditions pour que chaque modèle affiche ses propres couleurs et son propre import. Utilisez plutôt des variantes Shopify si chaque modèle a son propre SKU et son propre stock.
Associez à chaque valeur de Color Swatch une photo de la coque dans cette couleur comme Preview image, et activez Live customizer en largeur et hauteur 100%. Choisir une couleur remplace la photo de la coque.
Oui. Regroupez les choix dans un Badge Group et appliquez un ajustement de prix fixe aux valeurs payantes. La démo facture $1.00 pour le texte ou le visuel et $1.50 pour les deux.
Oui. Sous Automatic image processing dans l'Image Upload, choisissez Remove background on upload. L'image traitée est utilisée dans l'aperçu et dans le fichier de production.
Toutes les fonctions utilisées ici, masques d'image et conditions compris, sont disponibles dans la formule Free, qui couvre jusqu'à 3 produits personnalisés. Starter ($7.9/month) en couvre 30 et Growth ($15.9/month) est illimitée.
Plus de cas d'usage Podifai
- Comment vendre des bandanas brodés personnalisés pour chien sur Shopify
- Comment vendre des porte-clés en cuir avec monogramme sur Shopify
- Comment vendre des enseignes néon personnalisées sur Shopify
- Comment créer un configurateur de bracelet à breloques sur Shopify
- Comment vendre des sweats à capuche personnalisés (devant, dos, manches) sur Shopify
- Comment vendre des raquettes de pickleball personnalisées sur Shopify
- Comment vendre des faire-part de mariage personnalisés sur Shopify
- Comment vendre des stylos personnalisés avec gravure payante en option sur Shopify
- Comment vendre des casquettes trucker personnalisées sur Shopify
Aide associée (en anglais)
Créez ce configurateur dans votre boutique
Gratuit pour 3 produits personnalisés. Partez du modèle prêt à l'emploi et modifiez ce dont vous avez besoin.
Installer Podifai gratuitement