Configuration de la boutique en ligne
Ajoutez le bouton Personnaliser à vos pages produit et activez la modification depuis le panier grâce aux blocs d'application du thème Shopify — sans code.
Customezo s’installe dans votre boutique en ligne sous forme de blocs d’application de thème. Rien n’est injecté dans le code de votre thème, rien ne reste si vous désinstallez l’application, et vous pouvez activer ou désactiver chaque élément depuis l’éditeur de thème Shopify.
Il y a deux éléments :
| Élément | Où il se place | Ce qu’il fait |
|---|---|---|
| Bouton Personnaliser | Modèle de produit, sous forme de bloc | Ouvre l’outil de personnalisation pour ce produit. |
| Customezo Panier UX | Intégration d’application (sur tout le site) | Ajoute les liens Modifier le design et Voir l’aperçu du design aux lignes du panier. |
Ajouter le bouton Personnaliser
- Dans l’admin Shopify, allez dans Boutique en ligne → Thèmes et cliquez sur Personnaliser sur votre thème publié.
- Dans le sélecteur en haut, choisissez un modèle Produits → Produit par défaut (ou le modèle précis qu’utilisent vos produits personnalisés).
- Dans le panneau de gauche, sous la section des informations produit, cliquez sur Ajouter un bloc et choisissez Bouton Personnaliser dans le groupe des applications Customezo.
- Faites-le glisser à sa place — juste au-dessus ou en dessous du bouton Ajouter au panier, c’est là qu’il fonctionne le mieux.
- Cliquez sur Enregistrer.
Le bouton n’apparaît que sur les produits dont l’outil de personnalisation est activé dans Customezo : vous pouvez donc l’ajouter sans risque à un modèle partagé par tous les produits.
Réglages du bouton
| Réglage | Ce qu’il fait |
|---|---|
| Texte du bouton | Le libellé affiché aux acheteurs. Laissez vide pour utiliser le texte par défaut, traduit automatiquement. |
| Style du bouton | Plein ou Contour. |
| Couleur du bouton / Couleur du texte | Remplacent les couleurs pour les accorder à votre thème. |
| Taille de police | 12 à 24 px. |
| Rayon de bordure | 0 à 30 px. |
| Afficher l’icône | Affiche une petite icône de design avant le libellé. |
| Pleine largeur | Étire le bouton sur toute la largeur du formulaire produit. |
| Alignement | Gauche, centre ou droite lorsque le bouton n’est pas en pleine largeur. |
| Ouvrir l’outil de personnalisation dans | Ouvre l’outil de personnalisation dans le même onglet ou dans un nouvel onglet. |
Accordez-le à votre thème
Donnez à la couleur du bouton la couleur du bouton principal de votre thème, et au rayon la même valeur que celle de votre bouton Ajouter au panier. L’outil de personnalisation lui-même se configure séparément — voir Image de marque de l’outil.
Activer Customezo Panier UX
- Toujours dans l’éditeur de thème, ouvrez l’onglet Intégrations d’applications dans le panneau de gauche.
- Activez Customezo Panier UX.
- Cliquez sur Enregistrer.
Cette intégration détecte les articles personnalisés dans votre panier et ajoute les liens dont vos acheteurs ont besoin.
Réglages de Panier UX
| Réglage | Ce qu’il fait |
|---|---|
| Modifier le design | Affiche un lien Modifier le design sur les articles personnalisés du panier pour que les acheteurs puissent rouvrir l’outil de personnalisation. |
| Libellé du bouton | Un texte personnalisé pour ce lien. |
| Libellé du badge de verrouillage | Le texte affiché lorsque le design ne peut plus être modifié, par exemple une fois la production commencée. |
| Voir l’aperçu du design | Affiche un lien qui ouvre l’aperçu en taille réelle du design du client. |
| Libellé du lien d’aperçu | Un texte personnalisé pour le lien d’aperçu. |
| ID des sections du panier (avancé) | Nécessaire uniquement si votre thème utilise des noms de sections de panier non standard et que les liens n’apparaissent pas. |
| Analyses | Envoie des événements d’interaction anonymes pour que les statistiques de votre tableau de bord restent exactes. |
Vérifier que tout est en ligne
De retour dans Customezo, le tableau de bord affiche une carte Statut du thème :
- Thème — le thème publié que Customezo a inspecté.
- Bouton de design — détecté ou non détecté.
- Cart UX — détecté ou non détecté.
- Revérifier — relance la détection après l’enregistrement de vos modifications du thème.
Modèles Liquid anciens
Si votre page produit utilise un modèle Liquid ancien plutôt qu’un modèle JSON, Shopify ne fournit pas assez d’informations pour la détection automatique. Ajoutez le bloc comme d’habitude, puis marquez l’étape de configuration avec Je l’ai installé. Si la détection réussit plus tard, elle remplace automatiquement votre confirmation manuelle.
Le tester
- Sur votre boutique en ligne, ouvrez un produit dont l’outil de personnalisation est activé.
- Le bouton Personnaliser doit apparaître là où vous l’avez placé.
- Créez un design, ajoutez-le au panier et vérifiez que les liens Modifier le design et Voir l’aperçu du design s’affichent sur la ligne du panier.
- Rouvrez le design depuis le panier, modifiez quelque chose et mettez le panier à jour — la ligne et son prix doivent se mettre à jour.
Dépannage
Le bouton n’apparaît pas.
- Vérifiez que l’outil de personnalisation est activé pour ce produit dans Customezo (Produits → le produit → Activer l’outil de personnalisation).
- Vérifiez que le statut du produit est Actif et que le produit est publié sur le canal de vente Boutique en ligne.
- Vérifiez que vous avez ajouté le bloc au modèle qu’utilise réellement ce produit.
- Cliquez sur Revérifier sur la carte Statut du thème du tableau de bord.
Le bouton apparaît sur des produits qui ne devraient pas l’avoir. Le bloc se masque de lui-même sur les produits sans configuration d’outil de personnalisation. S’il s’affiche quand même, l’outil de personnalisation est probablement activé pour ce produit — désactivez-le sur la page du produit dans Customezo.
Les liens du panier n’apparaissent pas. Vérifiez que l’intégration d’application est activée et enregistrée. Si votre thème affiche le panier avec des noms de sections personnalisés, saisissez-les dans le réglage ID des sections du panier.
Le style ne convient pas. Ajustez les couleurs, le rayon et la pleine largeur dans les réglages du bloc plutôt que d’ajouter du CSS. Si votre thème remplace globalement le style des boutons, passez le bloc en Contour et définissez les couleurs explicitement.
Plus de solutions : Dépannage.