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

Vous voulez que votre barre de livraison gratuite corresponde parfaitement à la marque de votre magasin? 🎨

Alors que l'onglet Design comprend de vastes contrôles de style, CSS personnalisé offre une flexibilité supplémentaire pour une personnalisation visuelle avancée.

Que vous ajustiez la typographie, peaufiniez l'espacement, ajoutiez des animations, créiez des mises en page spécifiques aux mobiles ou résolvez des conflits de style spécifiques aux thèmes, Custom CSS vous donne un meilleur contrôle sur la façon dont votre barre de livraison gratuite apparaît sur le devant de la boutique.

⚠️ Avant de commencer

Avant d'utiliser Custom CSS:

• Assurez-vous d'avoir déjà créé une configuration d'expédition gratuite Upsell.
• Assurez-vous d'avoir accès aux Conception onglet.
• Avoir une compréhension de base de CSS ou l'accès à un développeur.

⚠️ Important:

CSS personnalisé est disponible sur tous les types de placement pris en charge sauf Page de départ les placements.

Les placements soutenus comprennent :

• Page produit
• Page panier
• Tiroir
• Bannière (en haut et en bas)

🛠️ Étape 1 — Ouvrez l'onglet Conception

Ouvrir la Hoppy Free Shipping app et naviguez vers la configuration d'Upsell d'expédition gratuite que vous souhaitez personnaliser.

Alors :

➡️ Cliquez sur le Conception onglet.

Faites défiler jusqu'à ce que vous trouviez le CSS personnalisé Chapitre.

Cette section se trouve généralement sous les paramètres de configuration Typographie, Progress Bar, Button et Upsell.

🎨 Étape 2 — Ouvrez l'éditeur CSS personnalisé

Dans la CSS personnalisé section que vous trouverez:

• Un éditeur CSS
• A Afficher le guide bouton
• Une Appliquer bouton
• Un modèle CSS de démarrage

Le modèle contient des sélecteurs couramment utilisés qui peuvent être personnalisés sans avoir besoin d'inspecter manuellement les éléments de front de magasin.

🎯 Étape 3 — Comprendre les sélecteurs disponibles

Le modèle de démarrage comprend plusieurs sélecteurs qui ciblent différents éléments de la barre de livraison gratuite.

Sélecteurs disponibles

Sélecteur

Désignation des marchandises

.futureblink-free-shipping

Entire Free Shipping Bar conteneur

.futureblink-message

Texte du message de progression

.futureblink-icon

Icône affichée avec le message

.futureblink-cta-button

Bouton d'appel à l'action

.futureblink-price-text

Prix en évidence ou valeur de progression

Sélecteurs mobiles

Pour un style spécifique au mobile, utilisez la .mobile variation.

Sélecteur

Désignation des marchandises

.futureblink-free-shipping.mobile .futureblink-message

Message de progression mobile

.futureblink-free-shipping.mobile .futureblink-icon

Icône mobile

.futureblink-free-shipping.mobile .futureblink-cta-button

Bouton CTA mobile

.futureblink-free-shipping.mobile .futureblink-price-text

Prix mobile/texte de progression

💡 Il vous suffit de personnaliser les sélecteurs en fonction de vos exigences de conception.

✍️ Étape 4 — Ajoutez votre CSS personnalisé

Entrez vos règles CSS dans l'éditeur.

Exemple 1 — Personnaliser le message de progression

.futureblink-free-shipping .futureblink-message {
font-size: 18px;
color: #ff6600;
}

Exemple 2 — Personnaliser le bouton CTA

.futureblink-free-shipping .futureblink-cta-button {
background-color: #000000;
color: #ffffff;
border-radius: 20px;
}

Exemple 3 — Styling mobile spécifique

.futureblink-free-shipping.mobile .futureblink-message {
font-size: 14px;
}

💡 Commencez par de petits changements de style, puis élargissez votre CSS au besoin.

✅ Étape 5 — Appliquer votre CSS

Après avoir entré votre CSS :

➡️ Cliquez sur Appliquer.

Les mises à jour de prévisualisation automatiquement afin que vous puissiez examiner immédiatement les changements de style.

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 dans l'application.

Vérifier que:

• Le texte s'affiche correctement.
• Les boutons apparaissent comme prévu.
• Les icônes restent alignées.
• Les couleurs et l'espacement correspondent à votre marque.

Si des ajustements sont nécessaires:

➡️ Mettez à jour le CSS.

➡️ Cliquez sur Appliquer Encore.

L'aperçu se rafraîchit automatiquement après chaque changement.

💾 É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 le magasin.

La configuration de Free Shipping Upsell doit également être publiée avant que les clients puissent voir les changements.

⚠️ Remarques importantes

Manipulation automatique !important

Lorsque les styles sont rendus sur le devant de la boutique, l'application ajoute automatiquement !important priorité aux déclarations CSS.

Cela permet d'assurer que vos styles personnalisés ont priorité sur le style de thème.

Si les styles ne semblent pas

Dans de rares cas où les styles de thème restent dominants, vous pouvez ajouter manuellement !important dans l'éditeur.

Exemple :

.futureblink-free-shipping .futureblink-message {
taille de police: 18px !important;
couleur: #ff6600 !important;
}

Manipulation mobile automatique

Tout sélecteur utilisant la .mobile La variation est automatiquement enveloppée à l'intérieur d'une requête de médias mobiles lorsqu'elle est rendue sur le devant du magasin.

Vous n'avez pas besoin de créer manuellement des points d'arrêt réactifs pour ces sélecteurs.

Limitation de la page de vérification

CSS personnalisé n'est pas disponible pour les placements de page de départ parce que Shopify limite l'injection personnalisée de CSS dans les environnements Checkout.

Validation CSS

L'éditeur ne valide pas la syntaxe CSS.

Si un style ne s'applique pas correctement:

➡️ Vérifier les noms des sélecteurs.

➡️ Vérifie 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érification de l'installation Enregistrer et Publié.

➡️ Vérifiez que les noms des 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 barre de livraison gratuite peut être personnalisée au-delà des paramètres de conception standard.

✅ Des expériences bureautiques et mobiles peuvent être conçues indépendamment.

✅ La typographie personnalisée, l'espacement, les couleurs et les animations sont entièrement pris en charge.

✅ La barre de livraison gratuite peut être alignée plus étroitement avec la marque de votre magasin.

Le CSS personnalisé offre une flexibilité supplémentaire lorsque les contrôles de conception intégrés ne sont pas suffisants, aidant à créer une expérience plus polie et cohérente en vitrine. ✨

Mis à jour le : 10/09/2026