Tilføjelse af tilpasset CSS til widgetten

Bundlex giver dig en komplet visuel editor til styling af widgetten, men nogle gange har du brug for at ændre en detalje, som editoren ikke viser, eller tilsidesætte noget, dit tema påtvinger widgetten. Tilpasset CSS er netop løsningen for avancerede brugere. Denne artikel gennemgår de to steder, hvor du kan tilføje CSS, og hvordan du målretter widgetten på en pålidelig måde.

To steder, hvor du kan tilføje tilpasset CSS

Der er to separate felter til tilpasset CSS, og de har forskelligt omfang.

Bundlets felt til tilpasset CSS

Hvert bundle har sin egen sektion med Tilpasset CSS, som findes under fanen Stil. Den CSS, du indsætter her, følger med det pågældende bundle, så dette er det rigtige valg, når en ændring kun skal gælde, hvor netop dette bundle vises.

1. Åbn bundlet i Bundlex-kontrolpanelet.
2. Åbn fanen Stil, og udvid Tilpasset CSS, som er det sidste punkt under Widgetstil.
3. Indsæt dine regler i kodeeditoren. Feltet viser formatet med en pladsholder: .bx-widget-container {margin-bottom: 10px;}.
4. Gem bundlet.

App-embed'ets felt til tilpasset CSS

Bundlex-app-embed'et, altså temaappudvidelsen, som du aktiverer i Shopify-temaeditoren under App-embeds, har også et felt til Tilpasset CSS, som vises, når Vis avancerede indstillinger er aktiveret. CSS her gælder, uanset hvor embed'et vises, så brug det til ændringer for hele temaet, som skal gælde på alle produktsider, hvor widgetten vises.

1. Åbn Webshop i Shopify-administrationen, og klik på Rediger tema.
2. Åbn App-integrationer, og find Bundlex Bundles.
3. Aktivér Vis avancerede indstillinger, og indsæt dine regler i feltet Tilpasset CSS.
4. Gem temaet.

Som tommelfingerregel skal du bruge feltet bundle til ændringer for det enkelte bundle og feltet app-embed til ændringer, der skal gælde overalt, hvor widgetten vises.

Målretning af widgetten

Bundlex-markup bruger klasser med bx-. De er nyttige mål i den aktuelle widget:

• .bx-widget-container - widgetcontaineren.
• .bx-widget - widgetindholdet.
• .bx-offer-wrap - en tilbudsindpakning.
• .bx-offer - tilbudskortet i denne indpakning.
• .bx-active .bx-offer - det valgte tilbudskort. Klassen active findes på indpakningen.
• .bx-offer-title og .bx-offer-subtitle - tilbudstekst.
• .bx-original-price og .bx-discounted-price - tekst for oprindelig pris og nedsat pris.

Afgræns regler til widgetcontaineren. Eksempel:

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

Inspicer elementet på din produktside, før du styler det. Markup afhænger af de aktiverede funktioner, og en vælger, der er kopieret fra en ældre widgetversion, matcher muligvis ikke længere.

Overskrivning af temastile med !important

Brug først de indbyggede kontroller. For widgetbredde kan du prøve Stil > Widgetstil > Container > Maksimal bredde > Fuld bredde (100 %). Hvis en temaregel stadig overskriver resultatet, skal du inspicere det berørte element og kun bruge !important på de deklarationer, der har brug for det. Eksempel:

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

Dette eksempel udfylder den tilgængelige overordnede container. Det kan ikke gøre en smal temakolonne bredere. Hvis en regel ikke har nogen effekt, skal du kontrollere, at vælgeren matcher et gengivet element, at typografiarket er indlæst, og at deklarationen er gyldig. Undersøg derefter, hvilken konkurrerende regel der vinder. En mere specifik vælger kan være nok uden !important.

Hvornår du skal bede support om hjælp

Begge felter til tilpasset CSS oplyser, at du kan kontakte Bundlex-support, hvis du har brug for hjælp, og det tilbud er reelt. Hvis du ikke kan finde den rigtige vælger, eller et tilpasset tema modarbejder dine overskrivninger på en måde, som !important ikke løser, skal du sende support et link til produktsiden og en beskrivelse af den ændring, du ønsker. De kan give dig en testet vælger, som du kan indsætte.

Det samme gælder vælgerfelterne, som vises via embed'ets indstilling Vis avancerede indstillinger, til tilpasset placering, læg i kurv-knappen, produktformularen samt antals- eller variantblokkene. Det er også CSS-vælgere, og support kan hjælpe dig med at udfylde dem for tilpassede temaer, der ikke registreres automatisk.

CSS ændrer ikke rabatreglerne, men det kan skjule priser, valgmuligheder eller knapper og forhindre kunder i at bruge widgetten. Test alle tilbudstilstande, variantvalg og Læg i kurv på computer og mobil, når du har anvendt en regel.