Cet article va te guider dans la configuration de Personalization Studio de Gelato pour tes thèmes Shopify. Il couvre l'activation des aperçus de produits en direct, le masquage stratégique d'éléments et l'intégration fluide d'un bouton de modification sur tes pages produit et panier, même si ton thème n'est pas nativement pris en charge.
Afficher les aperçus de produits en direct
Imagine tes clients voyant leurs produits personnalisés prendre vie sous leurs yeux ! Voici comment y parvenir :
Inspecter pour localiser
Ouvre les outils de développement de ton navigateur web (fais un clic droit sur la page web et sélectionne « Inspecter » ou « Inspecter l'élément »).
Utilise l'outil de sélection d'élément (généralement une icône en forme de flèche) pour choisir la zone exacte sur ta page produit où tu souhaites que l'aperçu en direct apparaisse.
Copie le nom du sélecteur. C'est le code qui identifie la zone sélectionnée (par ex., '.product-media').
Intégrer le Selector
Va dans ton panneau d'administration Shopify et accède à l'application Personalization Studio.
Trouve les paramètres d'intégration de l'application.
Colle le nom du sélecteur copié dans le champ prévu pour les aperçus en direct.
Enregistre tes paramètres.
Découvre la magie
Actualise ta page produit. Et voilà ! Tu devrais maintenant voir les aperçus en direct en action.
Astuce : Pour un ciblage précis, évite les sélecteurs génériques comme « col-2 », « col-4 » ou « container ». Opte pour des sélecteurs spécifiques.
Masque les éléments en toute fluidité
Garde une page produit claire et ciblée en masquant les éléments superflus. Voici comment :
Inspecter pour sélectionner
Ouvre les outils de développement de ton navigateur (clic droit + inspecter).
Utilise le sélecteur d'éléments pour identifier l'élément que tu veux masquer.
Copie le nom du sélecteur pour cet élément spécifique.
Configure le sélecteur
Accède aux paramètres d'intégration de l'application dans Personalization Studio.
Trouve la section désignée pour masquer les éléments.
Colle le nom du sélecteur copié dans le champ prévu à cet effet.
Enregistre tes paramètres.
Assiste à la disparition
Actualise ta page, et l'élément sélectionné disparaîtra.
Améliore ta page panier avec des aperçus personnalisés
Améliore l'expérience d'achat en affichant des aperçus de produits personnalisés directement sur la page du panier. Suis ces étapes :
Inspecter pour identifier
Ouvre les outils de développement de ton navigateur et accède à ta page panier.
Utilise le sélecteur d'éléments pour choisir la zone où tu veux que l'aperçu personnalisé apparaisse. C'est généralement dans le conteneur d'image de l'article du panier.
Copie le nom du sélecteur en faisant bien attention de cibler l'élément image lui-même pour un affichage optimal de l'aperçu.
Configurer le sélecteur
Accède aux paramètres d'intégration de l'application dans Personalization Studio.
Colle le nom du sélecteur copié dans le champ prévu pour les aperçus de la page panier.
Enregistre tes paramètres.
Aperçu dans le panier
Actualise ta page panier. Tu devrais maintenant voir les aperçus des produits personnalisés dans les articles du panier, offrant un rappel visuel de tes choix personnalisés.
Astuce : Pour des aperçus personnalisés précis, cible l'image du panier spécifiquement, pas la div entière. Nous te recommandons de cibler la balise image dans la div cart-item, par exemple, ".cart-item img".
Facilite la modification avec un bouton d'édition sur la page panier
Offre à tes clients la liberté d'apporter des modifications même après avoir ajouté des articles à leur panier. Ce guide étape par étape t'aidera à ajouter un bouton « Modifier » à ta page panier :
Inspecter et localiser
Ouvre les outils de développement de ton navigateur et accède à la page panier.
Utilise le sélecteur d'éléments pour choisir l'emplacement précis où tu veux que le bouton « Modifier » apparaisse pour chaque article du panier.
Copie le nom du sélecteur. Cela peut impliquer l'utilisation de pseudo-sélecteurs comme :nth-child() pour cibler l'élément correct dans une liste d'articles du panier.
Intégrer le Selector
Dans les paramètres de ton application Personalization Studio, trouve la section dédiée au bouton de modification de la page panier.
Colle le nom du sélecteur copié dans le champ prévu à cet effet.
Enregistre tes paramètres.
Actualiser et vérifier
Actualise ta page panier. Tu devrais maintenant voir le bouton « Modifier » parfaitement positionné, permettant aux clients de modifier leurs produits personnalisés sans quitter le panier.
Maîtriser les sélecteurs pour un ciblage précis
Pense aux sélecteurs comme à tes coordonnées GPS dans le monde du développement web. Voici comment les utiliser efficacement :
Comprendre « div:nth-child() » : Cette combinaison est essentielle pour cibler des éléments spécifiques au sein d'un groupe. Le sélecteur « :nth-child() » t'aide à cibler des éléments enfants individuels imbriqués dans un élément parent.
Identifier l'élément parent : Commence par localiser l'élément parent qui sert de conteneur pour les éléments enfants que tu veux cibler. Par exemple, une div avec la classe « cart-item » peut contenir plusieurs éléments enfants comme l'image, le titre et le prix.
Compte les éléments enfants : Une fois que tu as identifié le parent, compte les éléments enfants qu'il contient. Le nombre que tu utilises dans le sélecteur ':nth-child()' correspond à la position de l'élément enfant que tu veux cibler. Par exemple, ':nth-child(2)' sélectionne le deuxième élément enfant dans le parent spécifié.
Pour consulter la liste des thèmes pris en charge nativement par Personalization Studio, clique ici.