Skip to main content

​
Oversigt

Denne sektion giver dig mulighed for at ændre udseendet af eksisterende kurvelementer eller anvende styles på brugerdefineret HTML, der er tilføjet via editoren.

​
Her finder du det

Gå til:
Upcart > Cart Editor > Settings > Custom CSS
Settings er en række faner; Custom CSS er en af dem, ved siden af Custom HTML. Hvis den ikke er synlig, ligger den bag More settings.

​
Sådan fungerer det

Du kan tilføje CSS for at:
  • Style kurvens standardelementer
  • Ændre udseendet af brugerdefineret HTML
  • Justere afstand, justering, typografi og meget mere
Mens du skriver, vil en autofuldførelses-popup foreslå gyldige Upcart-selektorer for at gøre redigeringen hurtigere. Når du vælger et forslag, autofuldføres reglen, og det hjælper dig med at strukturere din kode. Hvis ændringerne ikke vises som forventet, så gennemgå de almindelige fejlfindingsforslag, såsom at opdatere cachen i både browseren og Upcart-editoren, kontrollere CSS-placeringer og sikre korrekt specificitet i dine CSS-regler.

​
Brug af selektorer

Upcart tilbyder et bredt udvalg af brugerdefinerede selektorer. Klik på “Show list” for at se alle tilgængelige muligheder. Undgå at bruge globale selektorer som body, div eller h3, medmindre de er afgrænset med .upcart-cart, for at forhindre utilsigtede ændringer i din webshop. I situationer, hvor styles ikke anvendes korrekt, kan du overveje at øge CSS-specificiteten eller tilføje !important til dine CSS-regler. Det sikrer, at de tilsidesætter eventuelle modstridende styles. Eksempel:
Eksempel (sikker selektor):

​
Eksempel: Styling af takkebesked

Antag, at du har tilføjet denne brugerdefinerede HTML under checkout-knappen:
Uden CSS vil beskeden se helt almindelig ud. For at style den:

​
Almindelige problemer og løsninger

​
CSS vises ikke på mobile enheder

Hvis din brugerdefinerede tekst eller dine styles ikke er synlige på mobil:
  • Opdater siden i både Upcart Editor og din mobilbrowser for at rydde cachelagrede versioner.
  • Sørg for, at den senest publicerede kurvversion er aktiv.
  • Bekræft, at CSS er gemt på fanen Custom CSS under Upcart > Cart Editor > Settings.

​
Forskelle mellem editoren og den live butik

Hvis styles vises korrekt i editoren, men ikke på det live website, kan det være nødvendigt at øge selektor-specificiteten eller tilføje !important til de vigtigste regler.

​
Forkert brug af CSS-selektorer

Kontroller, at det er den korrekte klasse eller det korrekte ID, der rammes. Inkluder altid præfikser som .upcart- for Upcart-specifikke elementer for at undgå utilsigtede resultater. Hvis stylen ikke anvendes som forventet, skal du sikre dig, at selektoren .thank-you-message rammer det tilsigtede HTML-element præcist, og kontrollere, at CSS-koden er placeret på den rigtige fane (Upcart > Cart Editor > Settings > Custom CSS).
Support til tilpasninger: Upcart Support kan ikke hjælpe med at implementere eller fejlfinde brugerdefineret CSS. Til avanceret hjælp med styling anbefaler vi at samarbejde med en Shopify Expert. Til fejlfinding af brugerdefineret CSS kan du se sektionen om almindelige problemer for vejledning i at løse problemer som manglende styles på mobile enheder, forskelle mellem editor-forhåndsvisninger og den live webshop samt forkert placering af selektorer.