⚠️ Belangrijke mededeling Deze aanpassing werkt alleen met Versie 1 van de Upcart-cartmodules. Als je je winkelwagen onlangs hebt geüpgraded naar Versie 2, werken deze aanpassingen mogelijk niet. Je moet dan de nieuwe selectors voor Versie 2 gebruiken uit de migratiegids. Als je aanpassingen niet werken zoals verwacht, kun je de winkelwagen zelf terugzetten naar Versie 1: gebruik in de Cart Editor de dropdown Cart version bovenaan het linkermenu en kies V1.0 (Legacy). De dropdown verschijnt zodra elke module in de winkelwagen op V2 staat. We werken momenteel aan nieuwe aanpassingstemplates voor Versie 2 van de modules; deze zijn binnenkort beschikbaar.

Overzicht

Met deze aanpassing kun je specifieke delen van de winkelwagen verbergen, zoals de rewards bar, als bepaalde producten aanwezig zijn. Dit is handig wanneer je de cartervaring voor bepaalde SKU’s wilt vereenvoudigen of wilt voorkomen dat specifieke promoties naast bepaalde artikelen verschijnen. Deze opzet gebruikt product-ID’s om te detecteren welke producten in de winkelwagen zitten en verbergt een gekozen element als er een match wordt gevonden. Je past de logica toe met aangepaste HTML en CSS in de Upcart-editor.

Wanneer gebruik je dit

De rewards bar verbergen wanneer er promotieartikelen in de winkelwagen zitten
Aangepaste contentblokken, vertrouwensbadges of upsell-secties verbergen op basis van producttype
Een schonere of meer op maat gemaakte checkoutflow behouden voor specifieke artikelen

Deze aanpak vereist basiskennis van HTML en JavaScript.

Stap 1: Vind de product-ID’s

Ga naar Shopify Admin > Products
Klik op het product dat je wilt targeten
Kopieer de numerieke product-ID uit de URL na /products/

Voorbeeld:

/products/1234567890 → 1234567890

Je gebruikt deze ID’s in de JavaScript-array die de zichtbaarheid bepaalt.

Stap 2: Voeg aangepaste HTML toe

Ga naar Upcart > Cart Editor > Settings > Custom HTML
Plak de volgende code in beide HTML-locaties: Above announcements/rewards en On empty cart screen
Vervang de waarden in productIDsToExclude door je eigen product-ID’s
Werk .YOUR-CLASS-HERE bij zodat deze het cartelement targt dat je wilt verbergen (bijvoorbeeld: .upcart-rewards, .custom-message, .trust-badge)

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

Legacy-opmerking: window.upcartOnCartLoaded-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik upcartSubscribeCartLoaded voor alle nieuwe scripts.

Stap 3: Optionele fallback-CSS

Als je er zeker van wilt zijn dat het element verborgen is voordat de winkelwagen volledig is geladen, voeg dan dit toe in de sectie Custom CSS:

.YOUR-CLASS-HERE {   display: none; }

Let op: dit kan het element tijdelijk voor alle gebruikers verbergen totdat JavaScript wordt uitgevoerd, wat flikkering kan veroorzaken. In de meeste gevallen is het beter om op de JavaScript-methode te vertrouwen.

Eindresultaat

Zodra alles is ingesteld:

Het getargete cartelement (zoals de rewards bar) wordt verborgen als de winkelwagen een van de opgegeven producten bevat
Het element blijft anders zichtbaar
Je kunt deze logica hergebruiken om verschillende elementen te verbergen of te tonen op basis van productspecifieke regels

Nog steeds hulp nodig?

Voor complexere aanpassingen raden we aan om samen te werken met een Shopify Expert. Zij kunnen helpen met HTML, CSS en JavaScript in je cart drawer. Bekijk Shopify Experts

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Specifieke cartelementen verbergen met product-ID's

Overzicht

Wanneer gebruik je dit

Stap 1: Vind de product-ID’s

Stap 2: Voeg aangepaste HTML toe

Stap 3: Optionele fallback-CSS

Eindresultaat

Nog steeds hulp nodig?

​Overzicht

​Wanneer gebruik je dit

​Stap 1: Vind de product-ID’s

​Stap 2: Voeg aangepaste HTML toe

​Stap 3: Optionele fallback-CSS

​Eindresultaat

​Nog steeds hulp nodig?

Overzicht

Wanneer gebruik je dit

Stap 1: Vind de product-ID’s

Stap 2: Voeg aangepaste HTML toe

Stap 3: Optionele fallback-CSS

Eindresultaat

Nog steeds hulp nodig?