Lägga till anpassad CSS i widgeten

Bundlex ger dig en komplett visuell redigerare för widgetens utseende, men ibland behöver du komma åt en detalj som redigeraren inte exponerar eller skriva över något som temat tvingar på widgeten. Anpassad CSS är lösningen för avancerade användare i just sådana fall. I den här artikeln går vi igenom de två platserna där du kan lägga till CSS och hur du på ett tillförlitligt sätt riktar in dig på widgeten.

Två platser där du kan lägga till anpassad CSS

Det finns två separata fält för anpassad CSS, och de skiljer sig åt vad gäller omfattning.

Fältet för anpassad CSS för paketet

Varje paket har en egen sektion för Anpassad CSS, som finns på fliken Stil. CSS som du klistrar in här följer med just det paketet, så det är rätt val när en justering endast ska gälla där det specifika paketet visas.

1. Öppna paketet i Bundlex-kontrollpanelen.
2. Öppna fliken Stil och expandera Anpassad CSS, det sista objektet under Widgetstil.
3. Klistra in dina regler i kodredigeraren. Fältet visar formatet med en platshållare: .bx-widget-container {margin-bottom: 10px;}.
4. Spara paketet.

Fältet för anpassad CSS i appinbäddningen

Bundlex-appinbäddningen, det temaapptillägg som du aktiverar i Shopifys temaredigerare under Appinbäddningar, har också ett fält för Anpassad CSS, som visas när Visa avancerade inställningar är aktiverat. CSS här gäller överallt där inbäddningen renderas, så använd det för temövergripande justeringar som ska gälla på alla produktsidor där widgeten visas.

1. Öppna Webbshop i Shopify-administratören och klicka på Redigera tema.
2. Öppna Appinbäddningar och hitta Bundlex Bundles.
3. Aktivera Visa avancerade inställningar och klistra in dina regler i fältet Anpassad CSS.
4. Spara temat.

Som tumregel använder du fältet för paketet för justeringar av ett enskilt paket och fältet för appinbäddningen för ändringar som ska gälla överallt där widgeten visas.

Rikta in dig på widgeten

Bundlex-markup använder klasser med bx-. De är användbara mål i den aktuella widgeten:

• .bx-widget-container - widgetens behållare.
• .bx-widget - widgetens innehåll.
• .bx-offer-wrap - en behållare för ett erbjudande.
• .bx-offer - erbjudandekortet i den behållaren.
• .bx-active .bx-offer - det valda erbjudandekortet. Klassen för aktivt val finns på dess behållare.
• .bx-offer-title och .bx-offer-subtitle - erbjudandetext.
• .bx-original-price och .bx-discounted-price - text för ordinarie och rabatterat pris.

Begränsa reglerna till widgetens behållare. Exempel:

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

Inspektera elementet på produktsidan innan du formger det. Markupen beror på vilka funktioner som är aktiverade, och en selektor som kopierats från en äldre widgetversion kanske inte längre matchar.

Överstyra temastilar med !important

Använd de inbyggda kontrollerna först. För widgetens bredd kan du prova Stil > Widgetstil > Behållare > Maximal bredd > Full bredd (100 %). Om en temaregel fortfarande skriver över resultatet ska du inspektera det berörda elementet och använda !important endast för deklarationerna som behöver det. Exempel:

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

Det här exemplet fyller den tillgängliga överordnade behållaren. Det kan inte göra en smal temakolumn bredare. Om en regel inte får någon effekt kontrollerar du att selektorn matchar ett renderat element, att stilmallen har lästs in och att deklarationen är giltig. Inspektera sedan vilken konkurrerande regel som vinner. En mer specifik selektor kan räcka utan !important.

När du bör be supporten om hjälp

Båda CSS-fälten för anpassad CSS anger att du kan kontakta Bundlex support om du behöver hjälp, och det erbjudandet gäller. Om du inte kan hitta rätt selektor eller om ett anpassat tema motverkar dina överstyrningar på ett sätt som !important inte löser, skickar du supporten en länk till produktsidan och en beskrivning av ändringen du vill göra. De kan ge dig en testad selektor att klistra in.

Detsamma gäller selektorfälten som visas med alternativet Visa avancerade inställningar i inbäddningen, för anpassad placering, lägg i kundvagn-knappen, produktformuläret samt kvantitets- eller variantblocken. Även dessa är CSS-selektorer, och supporten kan hjälpa dig att fylla i dem för anpassade teman som inte identifieras automatiskt.

CSS ändrar inte rabattreglerna, men kan dölja priser, val eller knappar och hindra kunder från att använda widgeten. Testa alla erbjudandestatusar, variantval och Lägg i kundvagn på dator och mobil efter att du har tillämpat en regel.