ℹ️ 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. ✨

Mis à jour le : 10/09/2026