Personnaliser l'apparence : Styles prédéfinis, Couleurs, Polices, CSS personnalisé

Options de conception par offre, styles à l'échelle de la boutique et classes CSS que vous pouvez cibler.

5 min de lecture

Par offre (Étape 3 de l'assistant)

Disposition : Cartes empilées, Horizontale, Tableau simple. « Souvent achetés ensemble » utilise toujours la disposition latérale.
Libellés « Le plus populaire » et « Meilleur rapport qualité-prix » sur les paliers sélectionnés.
Prix d'origine (barré) activé ou désactivé.
Hériter des couleurs du thème (recommandé) ou couleur d'accentuation ; arrondi des angles de 0 à 20 px.
Titre du widget et position (sous le prix ou au-dessus du bouton d'achat ; vous pouvez toujours faire glisser le bloc dans l'éditeur).

À l'échelle de la boutique (Paramètres › Général › Avancé)

Styles prédéfinis : Correspondance au thème, Simple, Doux, Audacieux. Ils modifient les bordures, les badges et les ombres ensemble.
Remplacement de la couleur d'accentuation et de la famille de polices.
Direction du texte : Auto (suit la langue de la boutique), de gauche à droite, de droite à gauche.
Jusqu'à 5 000 caractères de CSS personnalisé, injectés sur les pages produits et dans le panier à côté du widget.

Éditeur de thème (Paramètres du bloc)

Remplacement de la disposition, Taille (Compacte / Confortable), marges et une deuxième boîte CSS personnalisée par instance de bloc.

Classes CSS

Tout commence par .bf- : .bf-widget, .bf-title, .bf-tier, .bf-tier.is-selected, .bf-badge, .bf-add (le bouton), .bf-fbt-item, .bf-urgency, .bf-cart-bar, .bf-cart-track, .bf-card-badge. Les tailles sont en em, changer la valeur font-size sur .bf-widget redimensionne l'ensemble du widget.

Problèmes fréquents

La couleur ou la forme du bouton ne correspond pas à mon thème.

Le widget lit la couleur du bouton principal, la couleur de son texte, sa rondeur, ses bordures et sa police à partir des thèmes des familles Dawn et Horizon (Dawn, Sense, Craft, Horizon, Tinker, Ritual et autres thèmes Shopify) et des thèmes Impact/Prestige et Impulse/Motion. Un thème tiers qui n'expose aucune de ces variables obtient un bouton presque noir : définissez une couleur d'accentuation dans Paramètres › Widget ou dans l'offre, et le texte devient noir ou blanc automatiquement.

Le widget semble trop petit ou énorme.

Votre thème définit une taille de base de police différente. Utilisez le paramètre de taille sur le bloc (Compact/Confortable) ou le CSS personnalisé : .bf-widget { font-size: 15px; }.

Plus dans Boutique

← Tous les articles · Suivant : Langues, Traductions et Boutiques RTL · Toujours bloqué ? Contactez le support