Leer hoe je HTML, CSS en JavaScript gebruikt om custom functies en styling in je cart drawer te bouwen.
⚠️ Belangrijke mededelingDe voorbeeldaanpassing in dit document werkt alleen met V1.0 van de Upcart-cartmodules. Als je je cart onlangs hebt geüpgraded naar Version 2, werkt deze aanpassingscode niet. Je moet dan de nieuwe selectors voor Version 2 gebruiken uit de migratiegids.Bekijk de overige aanpassingsdocumentatie voor V2.0-oplossingen.
Upcart geeft je volledige controle om het uiterlijk en gedrag van de cart aan te passen met Custom HTML, Custom CSS en JavaScript. Met deze tools kun je nieuwe functies toevoegen, je cart stylen in lijn met je merk of logica introduceren om de werking van je cart te verbeteren.Deze gids behandelt de basisprincipes van elk onderdeel en laat zien hoe je begint. Elke sectie bevat een kort visueel voorbeeld om te laten zien hoe wijzigingen er in de praktijk uitzien.Bekijk voordat je begint het aanpassingsbeleid van Upcart, zodat je weet wat wel en niet door ons team wordt ondersteund.
HTML wordt gebruikt om statische content zoals tekst, banners of knoppen aan je cart toe te voegen. Je kunt kiezen uit meerdere HTML-locaties in de Custom HTML-editor (bijv. boven de checkout-knop, onderaan de cart, tussen items).Veelvoorkomende toepassingen:
Aangepaste berichten toevoegen
Juridische disclaimers of beleidslinks invoegen
Verzenddeadlines of leveringsinformatie uitlichten
Voorbeeld:
<div style="text-align: center; font-weight: bold;"> Thanks for shopping with us! </div
JavaScript regelt het gedrag en de logica van de cart. Je kunt het gebruiken om elementen te tonen of te verbergen, styling conditioneel toe te passen of realtime te reageren op cart-wijzigingen.Je plaatst je code in een <script>-tag en zet deze in Custom HTML > Scripts (Before Load) of Above Announcements, afhankelijk van wanneer de code moet draaien.Voorbeeld: Beperk de cart tot één upsell tegelijk:
<script> // Show upsells again when upsells are removed window.upcartSubscribeItemRemoved((event) => { if (event.item?.properties?.__upcartUpsell) { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "block"; } }); // Hide upsells once one is added window.upcartSubscribeUpsellsAddedToCart(() => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "none"; }); // Check for upsell in cart when it loads window.upcartSubscribeCartLoaded((event) => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); const items = event.cart.items || []; const hasUpsell = items.some(item => item?.properties?.__upcartUpsell); if (upsells && hasUpsell) { upsells.style.display = "none"; } }); </script>
Legacy-opmerking: de callbacks window.upcartOnItemRemoved, window.upcartOnAddUpsell en window.upcartOnCartLoaded werken nog steeds, maar zijn deprecated en loggen waarschuwingen in de console. Gebruik upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart en upcartSubscribeCartLoaded voor alle nieuwe scripts.
🔧 Opmerking voor developers:
Upcart biedt volledige Public API-documentatie met alle functies, variabelen en best-practicepatronen die beschikbaar zijn voor geavanceerde aanpassingen. We raden aan deze te bekijken wanneer je complexere scripts of integraties bouwt.
CSS regelt de look-and-feel van elementen in je cart. Gebruik het om ruimte, kleuren en lettergroottes aan te passen of ongewenste elementen te verbergen. Custom CSS is een van de tabbladen onder Settings (achter More settings als de tabbladrij te vol is).Veelvoorkomende toepassingen:
De kleur van producttitels of knoppen wijzigen
Lettergrootte of uitlijning aanpassen
Ruimte tussen secties toevoegen
Voorbeeld: de kleur van de upsell-titel wijzigen in V1.0:
Het supportteam van Upcart kan niet helpen bij het implementeren van custom code. Voor geavanceerdere wijzigingen raden we aan om een Shopify Expert in te huren.
Was deze pagina nuttig?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
