> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Die Größe des Sticky-Cart-Buttons anpassen

> Passe Größe und Position des Sticky-Cart-Buttons von Upcart mit CSS an.

<div id="overview">
  # Überblick
</div>

Der Sticky-Cart-Button von Upcart kann mit benutzerdefiniertem CSS in Größe und Position angepasst werden. So kannst du ihn besser an das Branding deines Stores oder deine Vorlieben für das Nutzererlebnis auf Desktop- und Mobilgeräten anpassen.

Je nachdem, wie viel Kontrolle du möchtest, stehen zwei Ansätze zur Verfügung.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## Option 1: Skalierte Größenänderung (einfache Einrichtung)
</div>

Diese Methode verwendet einen einzigen Skalierungsfaktor, um den Button und das Symbol proportional zu verkleinern oder zu vergrößern. Es ist die einfachste Möglichkeit, die Button-Größe mit minimalem Code anzupassen.

<div id="where-to-add-this">
  ## Wo du das einfügst
</div>

Gehe zu **Upcart > Sticky Cart > Custom CSS** und füge den folgenden Code ein.

```
/* Set your desired scale factor here */  
/* Recommended range: 1 (default) to 0.65 (smaller) */  
.upcart-sticky-widget {  
  transform: scale(0.55);  
}  
  
/* Scale up your quatity icon */  
/* Recommended range: 1 (default) to 1.25 (bigger) */  
.upcart-sticky-cart-quantity-icon {  
  transform: scale(calc(1.5));  
}
```

<div id="how-to-customize">
  ## So passt du es an
</div>

* Ändere `transform`, um die Größe des Buttons anzupassen (z. B. `0.8`, `0.6`, `1.25` usw.)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## Option 2: Pixelgenaue Größenänderung (erweiterte Kontrolle)
</div>

Mit dieser Methode kannst du die Abmessungen jedes Elements einzeln mit `px`-Werten steuern. Verwende sie, wenn du präzise Anpassungen möchtest, die nicht auf Skalierung basieren.

```
:root {  
  --widgetMainSize: 40px;  
  --widgetCartIconSize: 30px;  
  --widgetQuantityIconSize: 20px;  
}  
  
.upcart-sticky-widget {  
  height: var(--widgetMainSize) !important;  
  width: var(--widgetMainSize) !important;  
}  
  
[class*="styles_CartIcon"] {  
  left: -2px !important;  
  top: 4px !important;  
}  
  
.upcart-sticky-cart-quantity-icon {  
  height: var(--widgetQuantityIconSize) !important;  
  width: var(--widgetQuantityIconSize) !important;  
  top: -5px !important;  
  left: 25px !important;  
  z-index: 100 !important;  
}  
  
.upcart-sticky-widget svg {  
  display: block !important;  
  height: var(--widgetCartIconSize);  
}
```

<div id="how-to-customize-2">
  ## So passt du es an
</div>

* Passe die Variablen in `:root` an, um die Größe jedes Elements zu vergrößern oder zu verkleinern
* Justiere die `left`- und `top`-Werte innerhalb der Selektoren, um das Symbol und das Badge visuell zu zentrieren

<div id="need-help">
  ## Brauchst du Hilfe?
</div>

Wenn du dir nicht sicher bist, welche Methode für dich die richtige ist, oder Hilfe beim Schreiben von benutzerdefiniertem CSS benötigst, empfehlen wir dir, dich an einen Shopify-Experten zu wenden. Der Upcart-Support unterstützt nicht direkt bei der CSS-Implementierung.

[Shopify-Experten ansehen](https://www.shopify.com/partners/directory)