Skip to main content
Met de Design-module kun je het uiterlijk van je cart aanpassen, waaronder de lay-out, merkkleuren en knopstijlen.

​
Algemeen

​
Lettertypen overnemen uit het thema

Met deze instelling gebruikt Upcart de lettertypen die zijn gedefinieerd in je Shopify-themainstellingen. Om je huidige lettertypekeuzes te bekijken, open je de Shopify Theme Editor en ga je naar het gedeelte Typography.

​
🚧 Cart-preview 🚧

Lettertypen die uit je thema worden overgenomen, verschijnen niet in het Upcart-previewvenster, maar worden wel correct weergegeven op je live storefront.

​
Doorgestreepte prijzen tonen

Schakel deze instelling in om een doorgestreepte prijs (ook bekend als de Compare At Price) naast elk item in de cart te tonen. Dit weerspiegelt kortingsprijzen, net als op je productpagina’s. Cart-item met een doorgestreepte oorspronkelijke prijs naast de kortingsprijs en de besparing

​
Subtotaalregel inschakelen

Voegt een subtotaalregel toe aan de cart. Als je dit inschakelt, verschijnt er ook een veld Subtotal text color onder Colors, zodat het subtotaal apart van de rest van de cart-tekst kan worden gestyled. Als de instelling uit staat, is dat kleurveld verborgen.

​
Cart-breedte

Bepaalt hoe breed de drawer is, apart in te stellen per viewport:
  • Desktop - Default of Wide
  • Mobile - Full (van rand tot rand) of Nearly full (een kleine marge aan de rand)

​
Kleuren

​
Achtergrondkleur

Stelt de hoofdachtergrondkleur van de cart in, exclusief de footer en upsell-kaarten.

​
Cart-accentkleur

Bepaalt de achtergrondkleur van de cart-footer en de kaarten van upsell-items. Upcart Colors-instellingen met de cart-accentkleur toegepast op roze upsell-kaarten

​
Cart-tekstkleur

Definieert de kleur van alle cart-tekst, behalve knoptekst en besparingstekst, die apart worden geregeld.

​
Kleur besparingstekst

Stelt de kleur in van de besparingstekst die onder de productprijs wordt getoond. Cart-item waarbij de tekst met het besparingsbedrag in magenta is gemarkeerd

​
Tekstkleur subtotaal

Stelt de kleur van de subtotaalregel in. Dit veld verschijnt alleen wanneer Enable subtotal line is ingeschakeld onder General.

​
🚧 Cart-preview 🚧

De preview-editor geeft de uiteindelijke styling mogelijk niet exact weer. Het thema van je winkel kan custom CSS bevatten die de tekstgrootte of kleur beïnvloedt. Controleer wijzigingen altijd op je live storefront.

​
Knopinstellingen

Upcart biedt geavanceerde opties voor knopstyling, inclusief specifieke aanpassingen voor de checkout-knop. Dit omvat methoden voor CSS-aanpassingen en integratie van de brandingtools van Shopify.

​
Hoekradius

Past de rondheid van de knophoeken aan, van 0 px tot 40 px. 0 geeft scherpe, vierkante hoeken; 40 is het rondste dat de slider kan. De waarde geldt voor de checkout-knop, upsell-knop, kortingsknop en upgrade-knop samen.
De slider stopt bij 40 px. Voor een volledig pilvormige knop heb je Custom CSS nodig — zie Geavanceerde CSS-aanpassing hieronder.
Hoekradius-slider ingesteld op 16 pixels waarmee de checkout-knop wordt afgerond

​
Knopkleur

Stelt de achtergrondkleur in voor alle knoppen in de cart, waaronder:
  • Checkout-knop
  • Upsell-knop “Add to Cart”
  • Kortingsknop “Apply”
  • Upgrade-knop voor abonnementen. Je kunt de kleur van deze knoppen aanpassen via de Cart Editor. Voor verdere geavanceerde aanpassingen zoals CSS-wijzigingen verwijzen we je naar het gedeelte over geavanceerde aanpassingen.

​
Knoptekstkleur

Bepaalt de tekstkleur die in alle cart-knoppen wordt gebruikt.

​
Hoverkleur knoptekst

Regelt de kleur van de knoptekst wanneer een klant er met de muis overheen beweegt. Als deze bijvoorbeeld op groen is ingesteld, wordt de tekst groen bij hover.

​
Knop Verder winkelen tonen

Voegt een knop Continue shopping toe aan de cart, waarmee klanten de drawer kunnen sluiten en verder kunnen browsen zonder het sluit-icoon te gebruiken.

​
Geavanceerde CSS-aanpassing voor checkout-knoppen

Voor grote designwijzigingen kun je Custom CSS-code gebruiken om de checkout-knop aan te passen:
  1. Open in de Cart Editor Settings en selecteer het tabblad Custom CSS.
  2. Gebruik de relevante CSS-selector, zoals .checkout. Voorbeeld-CSS-snippets: om een pilvormige knop te maken:
    Om een zwarte rand toe te voegen:
    Vervang .checkout door de daadwerkelijke CSS-class van je knop. Extra styling omvat hover-effecten, padding, tekstkleuren of lettertypen.

​
Shopify-branding integreren voor knopaanpassing

Als je Shopify gebruikt, kun je het design van je checkout-knop bijwerken via de Shopify-admin:
  1. Log in op je Shopify Admin.
  2. Ga naar Settings > Checkout > Customize.
  3. Gebruik de brandingopties om het lettertype, de rondheid of de kleur aan te passen voor een naadloos design.
Upcart cart drawer-preview met een upsell-knop Add en een checkout-knop