Ajouter du CSS personnalisé au widget Bundlex

Bundlex vous offre un éditeur visuel complet pour personnaliser le style du widget, mais vous devez parfois accéder à un détail que l'éditeur n'expose pas ou remplacer un élément que votre thème impose au widget. Le CSS personnalisé est précisément la solution avancée prévue pour cela. Cet article présente les deux emplacements où vous pouvez l'ajouter et explique comment cibler le widget de manière fiable.

Deux emplacements pour ajouter du CSS personnalisé

Il existe deux champs CSS personnalisé distincts, dont la portée diffère.

Le champ CSS personnalisé du bundle

(1) Développez CSS personnalisé sous Style du widget. (2) Limitez la règle aux éléments Bundlex et testez le résultat avant de l'enregistrer. Cet exemple a été supprimé après sa capture.

Chaque offre groupée possède sa propre section CSS personnalisé, disponible dans l'onglet Style. Le CSS que vous collez ici est associé à cette seule offre groupée. C'est donc le bon choix lorsqu'une modification doit s'appliquer uniquement là où cette offre groupée précise est affichée.

Ouvrez le bundle dans le tableau de bord Bundlex.
Ouvrez l'onglet Style et développez CSS personnalisé, le dernier élément sous Style du widget.
Collez vos règles dans l'éditeur de code. Le champ indique le format à utiliser avec un espace réservé : .bx-widget-container {margin-bottom: 10px;}.
Enregistrez le bundle.

Le champ CSS personnalisé de l'intégration d'application

(1) Ouvrez Intégrations d'applications et développez Bundlex Bundles. (2) Afficher les paramètres avancés révèle les remplacements de sélecteurs et le champ CSS situé en dessous. Cet aperçu du thème brouillon a été restauré sans être enregistré.

L'intégration d'application Bundlex, c'est-à-dire l'extension d'application de thème que vous activez dans l'éditeur de thème Shopify sous Intégrations d'applications, possède également un champ CSS personnalisé, visible lorsque Afficher les paramètres avancés est activé. Le CSS ajouté ici s'applique partout où l'intégration est affichée. Utilisez-le donc pour les ajustements à l'échelle du thème qui doivent s'appliquer à chaque page produit où le widget apparaît.

Dans l'interface administrateur Shopify, ouvrez Boutique en ligne et cliquez sur Modifier le thème.
Ouvrez Intégrations d'applications et recherchez Bundlex Bundles.
Activez Afficher les paramètres avancés et collez vos règles dans le champ CSS personnalisé.
Enregistrez le thème.

Faites défiler le panneau Intégrations d'applications pour accéder à CSS personnalisé. Le champ vide affiché ici n'a pas été modifié.

En règle générale : utilisez le champ de l'offre groupée pour les modifications propres à une offre groupée et le champ de l'intégration d'application pour les changements à appliquer partout où le widget est affiché.

Cibler le widget

Le balisage Bundlex utilise des classes bx-. Elles sont utiles pour cibler le widget actuel :

.bx-widget-container - le conteneur du widget.
.bx-widget - le contenu du widget.
.bx-offer-wrap - un conteneur d'offre.
.bx-offer - la carte d'offre à l'intérieur de ce conteneur.
.bx-active .bx-offer - la carte de l'offre sélectionnée ; la classe active se trouve sur son conteneur.
.bx-offer-title et .bx-offer-subtitle - le texte de l'offre.
.bx-original-price et .bx-discounted-price - le texte des prix d'origine et remisés.

Limitez les règles au conteneur du widget. Exemple :

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Inspectez l'élément sur votre page produit avant de le styliser. Le balisage dépend des fonctionnalités activées, et un sélecteur copié depuis une ancienne version du widget peut ne plus correspondre.

Quand remplacer les styles du thème avec !important

Commencez par utiliser les contrôles intégrés. Pour la largeur du widget, essayez Style > Style du widget > Conteneur > Largeur maximale > Pleine largeur (100 %). Si une règle du thème remplace toujours le résultat, inspectez l'élément concerné et utilisez !important uniquement pour les déclarations qui en ont besoin. Exemple :

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Cet exemple remplit le conteneur parent disponible ; il ne peut pas élargir une colonne étroite du thème. Si une règle n'a aucun effet, vérifiez que le sélecteur correspond à un élément rendu, que la feuille de style est chargée et que la déclaration est valide. Examinez ensuite quelle règle concurrente l'emporte. Un sélecteur plus spécifique peut suffire sans !important.

Quand demander de l'aide au support

Les deux champs CSS personnalisé indiquent que vous pouvez contacter le support Bundlex si vous avez besoin d'aide, et cette proposition est réelle. Si vous ne parvenez pas à déterminer le bon sélecteur ou si un thème personnalisé neutralise vos remplacements d'une manière que !important ne résout pas, envoyez au support un lien vers la page produit et une description de la modification souhaitée. L'équipe pourra vous fournir un sélecteur testé à coller.

Il en va de même pour les champs de sélecteur révélés par l'option Afficher les paramètres avancés de l'intégration, pour le placement personnalisé, le bouton d'achat, le formulaire produit et les blocs de quantité ou de variante. Il s'agit également de sélecteurs CSS, et le support peut vous aider à les renseigner pour les thèmes personnalisés qui ne sont pas détectés automatiquement.

Le CSS ne modifie pas les règles de remise, mais il peut masquer des prix, des choix ou des boutons et empêcher les acheteurs d'utiliser le widget. Après avoir appliqué une règle, testez tous les états de l'offre, les choix de variantes et l'ajout au panier sur ordinateur et mobile.