Aangepaste CSS aan de widget toevoegen

Bundlex biedt een volledige visuele editor voor de stijl van de widget, maar soms moet je een detail aanpassen dat de editor niet beschikbaar maakt, of iets overschrijven wat je thema op de widget afdwingt. Aangepaste CSS is precies daarvoor de uitweg voor gevorderde gebruikers. In dit artikel lees je op welke twee plaatsen je CSS kunt toevoegen en hoe je de widget betrouwbaar kunt targeten.

Twee plaatsen om aangepaste CSS toe te voegen

Er zijn twee afzonderlijke velden voor aangepaste CSS en ze verschillen in bereik.

Het veld voor aangepaste CSS van de bundel

Elke bundel heeft een eigen sectie Aangepaste CSS, beschikbaar op het tabblad Stijl. De CSS die je hier plakt, wordt met die ene bundel opgeslagen. Dit is dus de juiste keuze wanneer een aanpassing alleen moet worden toegepast waar die specifieke bundel wordt weergegeven.

1. Open de bundel in het Bundlex-dashboard.
2. Open het tabblad Stijl en vouw Aangepaste CSS uit, het laatste item onder Widgetstijl.
3. Plak je regels in de code-editor. Het veld geeft met een tijdelijke aanduiding aan welk formaat je moet gebruiken: .bx-widget-container {margin-bottom: 10px;}.
4. Sla de bundel op.

Het veld voor aangepaste CSS van de app-embed

De Bundlex-app-embed, de thema-app-extensie die je in de Shopify-thema-editor onder App-embeds inschakelt, heeft ook een veld Aangepaste CSS. Dit wordt zichtbaar wanneer Geavanceerde instellingen weergeven is ingeschakeld. CSS die je hier toevoegt, wordt toegepast overal waar de embed wordt weergegeven. Gebruik dit dus voor themabrede aanpassingen die op elke productpagina moeten gelden waarop de widget verschijnt.

1. Open in Shopify-beheer Online Store en klik op Thema bewerken.
2. Open App-embeds en zoek Bundlex Bundles.
3. Schakel Geavanceerde instellingen weergeven in en plak je regels in het veld Aangepaste CSS.
4. Sla het thema op.

Als vuistregel geldt: gebruik het veld voor de bundel voor aanpassingen per bundel en het veld voor de app-embed voor wijzigingen die overal moeten gelden waar de widget wordt weergegeven.

De widget targeten

De markup van Bundlex gebruikt klassen met bx-. Deze zijn bruikbare targets in de huidige widget:

• .bx-widget-container - de widgetcontainer.
• .bx-widget - de widgetinhoud.
• .bx-offer-wrap - een wrapper voor een aanbieding.
• .bx-offer - de aanbiedingskaart in die wrapper.
• .bx-active .bx-offer - de geselecteerde aanbiedingskaart. De actieve klasse staat op de wrapper ervan.
• .bx-offer-title en .bx-offer-subtitle - tekst van de aanbieding.
• .bx-original-price en .bx-discounted-price - tekst van de oorspronkelijke en de kortingsprijs.

Beperk regels tot de widgetcontainer. Bijvoorbeeld:

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

Inspecteer het element op je productpagina voordat je het stijlt. De markup hangt af van de ingeschakelde functies en een selector die uit een oudere widgetversie is gekopieerd, komt mogelijk niet meer overeen.

Themastijlen overschrijven met !important

Gebruik eerst de ingebouwde bedieningselementen. Probeer voor de widgetbreedte Stijl > Widgetstijl > Container > Maximale breedte > Volledige breedte (100%). Als een themaregel het resultaat nog steeds overschrijft, inspecteer je het betreffende element en gebruik je !important alleen voor de declaraties die dit nodig hebben. Bijvoorbeeld:

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

Dit voorbeeld vult de beschikbare bovenliggende container, maar kan een smalle themakolom niet breder maken. Als een regel geen effect heeft, controleer dan of de selector overeenkomt met een weergegeven element, of het stylesheet is geladen en of de declaratie geldig is. Inspecteer vervolgens welke concurrerende regel wint. Een specifiekere selector kan voldoende zijn zonder !important.

Wanneer je hulp van support moet vragen

Beide velden voor aangepaste CSS vermelden dat je contact kunt opnemen met Bundlex-support als je hulp nodig hebt, en dat aanbod is oprecht. Als je niet de juiste selector kunt bepalen, of een aangepast thema je overschrijvingen op een manier tegenwerkt die !important niet oplost, stuur support dan een link naar de productpagina en een beschrijving van de gewenste wijziging. Support kan je een geteste selector geven die je kunt plakken.

Hetzelfde geldt voor de selectorvelden die zichtbaar worden via de optie Geavanceerde instellingen weergeven van de embed, voor aangepaste plaatsing, de knop Toevoegen aan winkelwagen, het productformulier en de blokken voor hoeveelheid of variant. Dit zijn ook CSS-selectors en support kan je helpen ze in te vullen voor aangepaste thema's die niet automatisch worden gedetecteerd.

CSS verandert de kortingsregels niet, maar kan prijzen, keuzes of knoppen verbergen en voorkomen dat klanten de widget gebruiken. Test na het toepassen van een regel alle aanbiedingsstatussen, variantkeuzes en de knop Toevoegen aan winkelwagen op desktop en mobiel.