Skip to main content

​
Overzicht

In dit gedeelte kun je de look-and-feel van bestaande cart-elementen wijzigen of stijlen toepassen op custom HTML die via de editor is toegevoegd.

​
Waar vind je het

Ga naar:
Upcart > Cart Editor > Settings > Custom CSS
Settings is een rij tabbladen; Custom CSS is er daar één van, naast Custom HTML. Als het niet zichtbaar is, staat het achter More settings.

​
Hoe het werkt

Je kunt CSS toevoegen om:
  • Standaard cart-elementen te stylen
  • Het uiterlijk van custom HTML aan te passen
  • Ruimte, uitlijning, typografie en meer aan te passen
Terwijl je typt, stelt een auto-complete-popup geldige Upcart-selectors voor om het bewerken te versnellen. Als je een suggestie selecteert, wordt de regel automatisch aangevuld en helpt dit je om je code te structureren. Als wijzigingen niet zoals verwacht verschijnen, bekijk dan veelvoorkomende probleemoplossingssuggesties, zoals het verversen van caches in zowel de browser als de Upcart-editor, het controleren van de plaatsing van je CSS en het zorgen voor de juiste specificiteit in je CSS-regels.

​
Selectors gebruiken

Upcart biedt een breed scala aan custom selectors. Klik op “Show list” om alle beschikbare opties te bekijken. Vermijd het gebruik van globale selectors zoals body, div of h3, tenzij ze zijn gescoped met .upcart-cart, om onbedoelde wijzigingen aan je storefront te voorkomen. Als stijlen niet correct worden toegepast, kun je de CSS-specificiteit verhogen of !important aan je CSS-regels toevoegen. Zo weet je zeker dat ze conflicterende stijlen overschrijven. Voorbeeld:
Voorbeeld (veilige selector):

​
Voorbeeld: styling van een bedankbericht

Stel dat je deze custom HTML onder de checkout-knop hebt toegevoegd:
Zonder CSS ziet het bericht er kaal uit. Om het te stylen:

​
Veelvoorkomende problemen en oplossingen

​
CSS verschijnt niet op mobiele apparaten

Als je aangepaste tekst of stijlen niet zichtbaar zijn op mobiel:
  • Ververs de pagina in zowel de Upcart Editor als je mobiele browser om gecachte versies te wissen.
  • Zorg ervoor dat de laatst gepubliceerde cart-versie actief is.
  • Controleer of de CSS is opgeslagen op het tabblad Custom CSS in Upcart > Cart Editor > Settings.

​
Verschillen tussen editor en live winkel

Als stijlen correct worden weergegeven in de editor maar niet op de live site, kan het nodig zijn om de specificiteit van de selector te verhogen of !important toe te voegen aan belangrijke regels.

​
Onjuist gebruik van CSS-selectors

Controleer of de juiste class of ID wordt getarget. Gebruik altijd prefixes zoals .upcart- voor Upcart-specifieke elementen om onbedoelde resultaten te voorkomen. Als de stijl niet zoals verwacht wordt toegepast, controleer dan of de selector .thank-you-message daadwerkelijk het bedoelde HTML-element target en of de CSS-code op het juiste tabblad staat (Upcart > Cart Editor > Settings > Custom CSS).
Ondersteuning voor aanpassingen: Upcart Support kan niet helpen bij het implementeren of debuggen van custom CSS. Voor geavanceerde stylinghulp raden we aan om samen te werken met een Shopify Expert. Voor het oplossen van problemen met custom CSS verwijzen we je naar het gedeelte met veelvoorkomende problemen, met richtlijnen voor het oplossen van zaken zoals ontbrekende stijlen op mobiele apparaten, verschillen tussen editor-previews en live storefronts, en verkeerd geplaatste selectors.