⚠️ Belangrijke mededeling Deze aanpassing werkt alleen met versie 1 van de Upcart-winkelwagenmodules. 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 het dropdownmenu Cart version bovenaan het linkermenu en kies V1.0 (Legacy). Het dropdownmenu verschijnt zodra elke module in de winkelwagen op V2 staat. We werken momenteel aan nieuwe aanpassingssjablonen voor versie 2 van de modules; deze zijn binnenkort beschikbaar.

Inleiding

Welkom bij deze CSS-tutorial, waarin we je laten zien hoe je de breedte van je mobiele winkelwagen op nul instelt tenzij deze door Upcart wordt geactiveerd. Dit is een handige manier om je winkelwagen verborgen te houden en de mobiele winkelervaring te stroomlijnen totdat je klanten er klaar voor zijn om deze te bekijken. Deze gids is bedoeld voor winkeleigenaren of developers met basiskennis van CSS. Met deze aanpassing houd je je winkelwagen uit het zicht en verbeter je de pagina-indeling, waardoor afleiding wordt verminderd en je klanten zich beter kunnen concentreren op winkelen. Het is een kleine aanpassing die een groot verschil kan maken in de mobiele ervaring van je winkel. Laten we beginnen en je mobiele winkelwagen slimmer laten werken, niet harder!

Toegang tot de instellingen voor aangepaste CSS

Volg deze stappen om de CSS van je Upcart aan te passen:

Open de Upcart-app in je dashboard.
Navigeer naar de Cart Editor.
Open Settings en selecteer het tabblad Custom CSS (achter More settings als de rij tabbladen niet past).
Kopieer en plak vervolgens de code in het CSS-invoerveld
Klik als je klaar bent op “Save” en vernieuw je webshoppagina om het resultaat live te zien.

Dit is de CSS-code om te kopiëren en te plakken in de CSS-sectie:

@media (max-width: 440px) {  
    .upcartPopupShow [class*="styles_CartPreview__right__"] {  
        width: 100%;  
        max-width: 440px;  
    }  
  
    [class*="styles_CartPreview__right__"] {  
        width: 0px;  
	max-width: 440px;  
    }  
}

Conclusie

En dat is alles! Je hebt nu geleerd hoe je de breedte van je mobiele winkelwagen op nul instelt totdat deze door Upcart wordt geactiveerd, voor een schonere en meer gefocuste winkelervaring.

🚧 Ondersteuning voor aanpassingen

Het supportteam van Upcart kan niet helpen bij het implementeren van aangepaste CSS- of HTML-oplossingen in je winkelwagen. Als je hulp nodig hebt bij het ontwerpen of stylen van iets op maat, raden we je aan een Shopify Expert te raadplegen: Bekijk Shopify Experts

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Stel de mobiele winkelwagenbreedte in op nul totdat deze door Upcart wordt geactiveerd met CSS

Inleiding

Toegang tot de instellingen voor aangepaste CSS

Dit is de CSS-code om te kopiëren en te plakken in de CSS-sectie:

Conclusie

🚧 Ondersteuning voor aanpassingen

​Inleiding

​Toegang tot de instellingen voor aangepaste CSS

​Dit is de CSS-code om te kopiëren en te plakken in de CSS-sectie:

​Conclusie

​🚧 Ondersteuning voor aanpassingen

Inleiding

Toegang tot de instellingen voor aangepaste CSS

Dit is de CSS-code om te kopiëren en te plakken in de CSS-sectie:

Conclusie

🚧 Ondersteuning voor aanpassingen