> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Comment configurer CSS personnalisé pour les popups > ℹ️ **Note:** Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien. Tu veux que tes popups correspondent parfaitement à la marque de ton magasin ? 🎨 Alors Hoppy Popups comprend des options de personnalisation de conception étendues, **CSS personnalisé** vous donne un contrôle complet sur les réglages de style avancés qui vont au-delà des paramètres standard. Que vous raffiniez la typographie, ajustiez l'espacement, créiez des effets visuels uniques ou résolvez des conflits de style spécifiques à un thème, Custom CSS vous permet de personnaliser vos popups exactement comme vous voulez. --- # **⚠️ Avant de commencer** Avant d'utiliser Custom CSS: * Assurez-vous que votre popup a déjà été créé et sauvegardé. * Avoir une compréhension de base de CSS ou l'accès à un développeur. * Comprendre que CSS personnalisé peut dépasser les paramètres de conception standard. 💡 Des options de style standard telles que les couleurs, les polices et l'espacement sont déjà disponibles dans l'onglet Design. CSS personnalisé est destiné à des exigences de style plus avancées. --- # **🛠️ Étape 1 — Ouvrez votre configuration popup** Ouvrir la **Hoppy Popups** app depuis Shopify Admin. Alors : ➡️ Ouvrez un popup existant. ➡️ Ou créez un nouveau popup si vous ne l'avez pas déjà fait. Naviguez jusqu'au **Conception** onglet. Faites défiler jusqu'à ce que vous trouviez le **CSS personnalisé** Chapitre. --- # **🎨 Étape 2 — Ouvrir la section CSS personnalisée** Dans la **CSS personnalisé** section que vous trouverez: * Un éditeur CSS * Une **Appliquer** bouton * A **Réinitialiser** bouton * Un modèle CSS de démarrage Le modèle comprend des sélecteurs de popups couramment utilisés, ce qui rend facile de commencer à personnaliser votre popup sans avoir besoin d'identifier les noms de classe manuellement. --- # **✍️ Étape 3 — Ajouter votre CSS personnalisé** L'éditeur fournit plusieurs sélecteurs prêts à l'emploi pour le style des éléments popup. ### **Sélecteurs disponibles** Sélecteur Désignation des marchandises `.futureblink-popup` Conteneur contextuel complet `.futureblink-popup .title` Titre popup `.futureblink-popup .description` Popup description texte `.futureblink-popup .cta-button` Bouton d'appel à l'action `.futureblink-popup .close-btn` Fermer le bouton --- ### **Sélecteurs mobiles** Pour un style spécifique au mobile, utilisez la `.mobile` variation. Sélecteur Désignation des marchandises `.futureblink-popup.mobile` Conteneur contextuel mobile `.futureblink-popup.mobile .title` Titre mobile `.futureblink-popup.mobile .description` Description mobile `.futureblink-popup.mobile .cta-button` Bouton CTA mobile `.futureblink-popup.mobile .close-btn` Bouton de fermeture mobile --- ### **Exemple CSS** Pour personnaliser le titre contextuel et le bouton CTA : `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 Vous pouvez également ajouter des sélecteurs supplémentaires, des animations, des requêtes multimédias et d'autres règles CSS valides au besoin. --- # **📱 Étape 4 — Ajouter un style spécifique au mobile** Pour appliquer des styles uniquement sur les appareils mobiles, utilisez le `.mobile` Sélecteurs. Exemple : `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` L'application enveloppe automatiquement `.mobile` sélecteurs à l'intérieur d'une requête de médias mobiles lors du rendu sur votre front de magasin. Cela signifie que vous n'avez pas besoin de créer manuellement des points d'arrêt mobiles pour ces sélecteurs. --- # **✅ Étape 5 — Appliquer votre CSS** Une fois votre CSS ajouté: ➡️ Cliquez sur **Appliquer**. Les mises à jour de prévisualisation automatiquement afin que vous puissiez examiner immédiatement vos modifications de style. ⚠️ Il suffit de coller CSS dans l'éditeur ne l'active pas. Vous devez cliquer **Appliquer** avant que les styles deviennent actifs. Si vous voulez supprimer votre style personnalisé: ➡️ Cliquez sur **Réinitialiser**. Cela restaure le modèle par défaut et désactive le CSS personnalisé. --- # **👀 Étape 6 — Examiner l'aperçu** Après avoir appliqué votre CSS : ➡️ Consultez l'aperçu Bureau. ➡️ Passez en revue l'aperçu mobile. Vérifier que: * Le texte s'affiche correctement. * Les boutons restent alignés. * L'espacement semble cohérent. * Les effets visuels se comportent comme prévu. Si des changements sont nécessaires: ➡️ Mettez à jour le CSS. ➡️ Cliquez sur **Appliquer** Encore. L'aperçu se rafraîchit automatiquement après chaque mise à jour. --- # **💾 Étape 7 — Enregistrer et publier** Une fois que vous êtes satisfait de la conception: ➡️ Cliquez sur **Enregistrer**. ➡️ Cliquez sur **Publier**. ⚠️ Enregistrer seul ne met pas à jour votre magasin. Le popup doit également être publié avant que les clients puissent voir les changements. --- # **⚠️ Remarques importantes** ### **Paramètres de conception personnalisés CSS Overrides** CSS personnalisé a priorité sur la plupart des paramètres de conception standard. Si un paramètre de conception semble être ignoré, il est probablement dépassé par votre CSS. --- ### **La manipulation mobile est automatique** L'application convertit automatiquement `.mobile` sélectionne des styles mobiles réactifs. Cela rend facile de maintenir des conceptions de bureau et mobiles séparées sans écrire des requêtes multimédias personnalisées. --- ### **Étendue** Le CSS personnalisé est automatiquement appliqué au popup spécifique en cours d'édition. Cela permet de prévenir les conflits de style avec: * Autres popups * Éléments thématiques * Autres contenus en vitrine --- ### **Option de remise à zéro** Cliquer **Réinitialiser** supprime uniquement le CSS personnalisé. Elle n'affecte pas: * Paramètres popup * Paramètres de conception * Modèles * Configuration du contenu --- ### **Validation CSS** L'éditeur ne valide pas la syntaxe CSS. Si un style n'apparaît pas correctement : ➡️ Vérifiez les noms des sélecteurs. ➡️ Vérifier les bretelles et les demi-colons. ➡️ Consultez le CSS pour les erreurs de syntaxe. --- # **❓ Dépannage** Si vos styles ne apparaissent pas correctement : ➡️ Confirmer que **Appliquer** a été cliqué. ➡️ Vérifier que le popup a été **Enregistrer** et **Publié**. ➡️ Vérifiez que les sélecteurs correspondent exactement au modèle fourni. ➡️ Testez dans une fenêtre de navigateur Incognito ou privé. ➡️ Rafraîchir la vitrine pour effacer les styles mis en cache. --- # **🎉 Résultat final** ✅ Votre popup peut être personnalisé au-delà des paramètres de conception standard. ✅ Des expériences bureautiques et mobiles peuvent être conçues indépendamment. ✅ Des effets visuels avancés et un style spécifique à la marque deviennent possibles. ✅ Les styles personnalisés restent isolés du popup sélectionné. Le CSS personnalisé offre la flexibilité nécessaire pour créer une expérience popup plus polie et cohérente avec la marque tout en maintenant la simplicité des outils de conception intégrés de l'application. ✨