Skip to main content

Overzicht

De sticky cart-knop van Upcart kan met aangepaste CSS worden vergroot, verkleind en verplaatst. Zo kun je de knop beter laten aansluiten op de branding van je winkel of je voorkeuren voor de gebruikerservaring op desktop en mobiel. Er zijn twee benaderingen beschikbaar, afhankelijk van hoeveel controle je wilt.

Optie 1: geschaald verkleinen (eenvoudige installatie)

Deze methode gebruikt één schaalfactor om de knop en het pictogram proportioneel te verkleinen of te vergroten. Het is de makkelijkste manier om de knopgrootte aan te passen met minimale code.

Waar je dit toevoegt

Ga naar Upcart > Sticky Cart > Custom CSS en plak de onderstaande code.

Hoe je dit aanpast

  • Wijzig transform om de knop te vergroten of te verkleinen (bijv. 0.8, 0.6, 1.25 enz.)

Optie 2: pixel-specifiek formaat (geavanceerde controle)

Met deze methode kun je de afmetingen van elk element afzonderlijk regelen met px-waarden. Gebruik deze wanneer je precieze aanpassingen wilt die niet afhankelijk zijn van schaal.

Hoe je dit aanpast

  • Pas de variabelen in :root aan om de grootte van elk element te vergroten of te verkleinen
  • Stel de waarden van left en top binnen de selectors bij om het pictogram en de badge visueel te centreren

Hulp nodig?

Weet je niet zeker welke methode het beste bij je past of heb je hulp nodig bij het schrijven van aangepaste CSS, dan raden we je aan contact op te nemen met een Shopify Expert. De support van Upcart helpt niet rechtstreeks bij het implementeren van CSS. Bekijk Shopify Experts