Ajouter du CSS personnalisé

Les paramètres de style de l’application couvrent l’essentiel des besoins des boutiques. Lorsqu’ils ne suffisent pas (un arrondi de bordure précis, un ajustement qui ne doit s’appliquer que sur mobile), vous pouvez ajouter votre propre CSS.

Attention

C’est la seule page vraiment technique de cette documentation. Si vous n’êtes pas à l’aise avec le CSS, décrivez ce que vous souhaitez à [email protected]. L’équipe peut généralement fournir l’extrait exact, et du CSS que vous n’écrivez jamais est du CSS qui ne peut pas casser lors d’une mise à jour de votre thème.

Commencer par les paramètres intégrés

Presque toutes les modifications d’apparence pour lesquelles on se tourne vers le CSS sont déjà des paramètres de Quote settings > Customize. Vérifiez-les avant d’écrire quoi que ce soit.

Où	Ce que vous pouvez définir
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color et Font size.
Quote form > Style	Un préréglage de style, ainsi que Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color et Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color et Background color : ce sont les deux seuls que le widget flottant accepte.

La plupart des modifications d’apparence sont déjà des paramètres : commencez ici.

Note

Match theme styling if possible fait déjà une grande partie du travail à lui seul : « Theme styling applies on your storefront and is not shown in this preview. » Activez-le et regardez votre vitrine en ligne avant de décider que le formulaire a besoin de CSS. Consultez Adapter le style à votre thème.

Attention

Il y a une tâche qu’il ne faut jamais confier au CSS : masquer un prix ou un bouton d’achat. Advanced settings > Hide price propose des paramètres adaptés, dont Hide Add To Cart button et Hide Buy Now button. Une règle CSS laisse le prix dans la page, où il peut s’afficher brièvement avant le chargement de votre feuille de style : consultez Masquer Add to Cart et Buy now.

Où conserver votre CSS

Où que vous conserviez du CSS personnalisé, gardez-le à un endroit où vous pourrez le retrouver et l’annuler. Le CSS conservé dans votre propre thème a un effet secondaire utile : il suit les versions du thème, et dupliquer le thème avant de le modifier vous donne donc un point de retour.

Note

Parcourez les paramètres intégrés ci-dessus avant d’écrire quoi que ce soit. Si vous ne savez pas si une modification relève d’un paramètre ou du CSS, demandez d’abord à [email protected] : cela vous évite de maintenir une règle dont vous n’aviez pas besoin.

Trouver l’élément à cibler

Faites un clic droit sur l’élément de votre vitrine et choisissez Inspecter. Vous verrez ainsi les noms de classe sur lesquels écrire vos règles.

Inspectez le bouton de devis sur votre propre vitrine pour trouver ce qu’il faut cibler.

Deux points à connaître avant de commencer :

• Le bouton de devis s’affiche avec le Button text que vous avez défini, à l’endroit choisi sous Button position : vérifiez donc Product page button position avant de le chercher.
• Le widget de devis flottant, libellé Quote (n), se trouve dans un conteneur de classe grfq-quote-widget-container.

Note

Vous ne trouvez pas le bouton sur une page de collection pour l’inspecter ? Survolez une carte produit. Sur les thèmes récents, l’application l’attache au contrôle d’ajout rapide du thème : il reste donc à opacité nulle jusqu’au survol de la carte, puis apparaît sous la forme d’une petite icône plutôt que d’un bouton avec libellé. C’est le comportement du thème, pas un style manquant : consultez Bouton de devis sur les pages de collection.

Quelques règles pratiques

Règle	Pourquoi
Ne changez qu'une chose à la fois	Quand quelque chose casse, vous saurez quelle règle en est la cause.
Testez sur mobile	La plupart des demandes de devis viennent de téléphones, et un ajustement pensé pour le bureau y casse souvent.
Gardez une copie ailleurs	Collez aussi votre CSS dans une note, pour pouvoir le restaurer si nécessaire.
Évitez !important autant que possible	Il l'emporte aujourd'hui et complique chaque modification future.
Commentez chaque règle	Dans six mois, un bloc de CSS sans explication est un bloc que personne n'ose supprimer.

Après un changement de thème

Commencez par l’intégration d’application sur le nouveau thème. Elle est activée dans votre thème, et tant qu’elle ne l’est pas, rien de ce que fait l’application n’apparaît sur votre vitrine : consultez Activer l’application dans votre thème.

Vérifiez ensuite votre CSS. Il est écrit pour le balisage de votre thème : après un changement de thème ou une mise à jour majeure, examinez votre bouton de devis, votre formulaire de devis et votre widget flottant, car certaines règles peuvent nécessiter des ajustements.

Étapes suivantes

• Modifier le texte et les couleurs du bouton : les paramètres du bouton à essayer en premier
• Adapter le style à votre thème : laissez le formulaire suivre automatiquement votre thème
• Contacter l’assistance : demandez un extrait de code