> ## 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.

# Schnellstart-Anleitung für Upcart

> Erfahre, wie du Upcart aktivierst, Kernfunktionen einschaltest und deinen Cart Drawer live veröffentlichst.

Diese Anleitung führt dich durch die Einrichtung von Upcart mit seinen Hauptmodulen — von der visuellen Anpassung bis zur Aktivierung in deinem Storefront.

Upcart ersetzt deinen Theme-Cart-Drawer visuell, aber es **integriert sich nicht in den Cart Drawer oder die Warenkorbseite deines Themes**. Die Shopify-Warenkorbseite bleibt weiterhin zugänglich.

<div id="managing-modules">
  # **Module verwalten**
</div>

Jedes Upcart-Modul kann **einfach aktiviert oder deaktiviert** werden. Klicke einfach auf die Schaltfläche **Enable/Disable** in der oberen rechten Ecke, um ein Modul jederzeit ein- oder auszuschalten. Deine Änderungen werden nach dem Speichern sofort wirksam.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-announcements-module-row-disabled.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=454a834d8ea953a99ba987dfdb80499a" alt="Zeile des Announcements-Moduls mit der Markierung Disabled und einem Pfeil auf die Enable-Schaltfläche" width="1548" height="210" data-path="images/upcart/quickstart-announcements-module-row-disabled.png" />

<div id="cart-design">
  # Warenkorb-Design
</div>

Wenn du den Cart Editor von Upcart zum ersten Mal öffnest, landest du im [Design-Modul](/de/upcart/design_module). Hier kannst du die Grundfarben des Drawers anpassen, damit sie zum Branding deines Stores passen.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-cart-editor-design-module.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=e15c4d0893916f9200cf1884c1d0adfe" alt="Upcart Cart Editor Design-Modul mit Farbeinstellungen neben einer Live-Vorschau des Cart Drawers" width="600" data-path="images/upcart/quickstart-cart-editor-design-module.png" />

<div id="announcements">
  # Ankündigungen
</div>

Um eine Warenkorb-Nachricht oder einen Countdown-Timer anzuzeigen, gehe zu **Body > [Announcements](/de/upcart/announcements_module)**.

Klicke in der oberen rechten Ecke auf **Enable**. Das Badge neben dem Modulnamen wechselt von **Disabled** zu **Active**.

Gib deine Nachricht in das Feld **Announcement Text** ein und konfiguriere bei Bedarf den Timer.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-announcement-settings-timer-text.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=2a726b39f6ea92d5899e2aae2968c2d1" alt="Ankündigungseinstellungen mit Timer, Ankündigungstextfeld und Farboptionen" width="645" height="679" data-path="images/upcart/quickstart-announcement-settings-timer-text.png" />

Achte darauf, die Variable `{TIMER}` für Countdowns in deinem Ankündigungstext zu verwenden, um die korrekte Funktion sicherzustellen (z. B. „Dieses Angebot ist nur für {TIMER} verfügbar.“). Vermeide es, formatierten Text direkt aus Drittanbieter-Tools zu kopieren.

Wenn du fertig bist, klicke unbedingt auf **Save** in der oberen rechten Ecke.

<div id="theme-level-issues">
  #### Probleme auf Theme-Ebene
</div>

* **CSS- oder App-Konflikte:** Stelle sicher, dass CSS-Eigenschaften wie `display: none;` die Ankündigungsleiste nicht ausblenden. Prüfe außerdem, ob Drittanbieter-Apps diese Einstellungen überschreiben.
* **Textsichtbarkeit:** Bestätige, dass die Textfarbe der Ankündigungsleiste sich vom Hintergrund abhebt, und passe sie bei Bedarf in deinen Theme-Einstellungen an.

<div id="advanced-debugging-steps">
  #### Erweiterte Debugging-Schritte
</div>

Prüfe bei hartnäckigen Problemen die Browser-Konsole auf Skriptfehler, die die Ankündigungsleiste beeinflussen, und deaktiviere Drittanbieter-Apps vorübergehend, um Konflikte einzugrenzen.

<div id="rewards">
  # Prämien
</div>

Um eine Fortschrittsleiste anzuzeigen, die Kunden ermutigt, mehr auszugeben, aktiviere das Rewards-Modul.

<div id="general-settings">
  ### **Allgemeine Einstellungen**
</div>

Lege deine Branding-Farben und die Nachricht fest, die nach Erreichen der letzten Prämienstufe angezeigt wird.

Wähle eine Prämienbasis in der Karte **Rewards calculation** unterhalb der allgemeinen Einstellungen:

* **Cart total (\$)**: Verfolgt den Gesamtwert des Warenkorbs
* **Cart quantity (#)**: Verfolgt die Anzahl der Artikel

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-rewards-module-general-settings.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=d702c06541f1304d2d2e742f79d62140" alt="Allgemeine Einstellungen des Rewards-Moduls mit Leistenfarben und Feldern für die Abschlussnachricht" width="600" data-path="images/upcart/quickstart-rewards-module-general-settings.png" />

<div id="tier-settings">
  ### **Stufeneinstellungen**
</div>

Wähle deinen Prämientyp:

* [**Shipping**](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates/flat-shipping-rates): Schaltet kostenlosen Versand auf der Stufe frei
* [**Discount**](https://help.shopify.com/en/manual/discounts/discount-types): Schaltet einen Rabatt auf der Stufe frei
* [**Product**](/de/upcart/set_up_a_free_product_reward_tier_in_upcart): Fügt ein Produkt zum Warenkorb hinzu

Ob der Stufenfortschritt vor oder nach Rabatten gemessen wird, wird einmal für die gesamte Leiste festgelegt — mit dem Kontrollkästchen **Use pre-discounted prices for cart total** in **Rewards calculation**. Es ist keine Eigenschaft des Prämientyps.

Lege eine Mindestschwelle zum Auslösen der Prämie fest und passe das Feld **Title before achieving tier** an. Du kannst bis zu **vier Prämienstufen** erstellen.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-rewards-settings-reward-type.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=2085093e9f85cdd42ed163fab7d726db" alt="Stufeneinstellungen mit der Prämientyp-Auswahl, dem Mindestbetrag und den Feldern für den Stufentitel" width="600" data-path="images/upcart/quickstart-rewards-settings-reward-type.png" />

<Note>
  Dieser Screenshot stammt aus der Zeit vor den aktuellen Bezeichnungen: Er zeigt den Abschnitt als „Rewards settings“ und das Feld als „Text before achieving“. Es handelt sich um dieselben Steuerelemente — sie heißen jetzt **Tier settings** und **Title before achieving tier**.
</Note>

<div id="upsells">
  # Upsells
</div>

Aktiviere **Use AI Recommended Upsells**, wähle den Algorithmus **Related** und schalte **Smart Variant Matching** ein, um passende Produktvarianten basierend auf dem Warenkorb-Inhalt vorauszuwählen.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-upsells-settings-ai-recommended.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=65cddd8e07bfe9e9805ce76e43377ab3" alt="Upsell-Einstellungen mit aktivierten KI-empfohlenen Upsells, dem Related-Algorithmus und Smart Variant Matching" width="600" data-path="images/upcart/quickstart-upsells-settings-ai-recommended.png" />

Passe deinen Abschnittstitel und die Beschriftung der **Add**-Schaltfläche an.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-upsell-fields-maximum-upsells.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=58ad7bd0311baa003f3ea5dae376505d" alt="Upsell-Felder für die maximale Anzahl anzuzeigender Upsells und den Abschnittstiteltext" width="600" data-path="images/upcart/quickstart-upsell-fields-maximum-upsells.png" />

<div id="add-ons">
  # Add-ons
</div>

Um ein umschaltbares Add-on im Footer anzuzeigen, kannst du eine dieser Optionen aktivieren:

<div id="shipping-protection">
  ### **Versandschutz**
</div>

Wähle **Shipping Protection** und konfiguriere dynamische Preisstufen basierend auf dem Warenkorbwert.\
Dadurch wird ein echtes Produkt in deinem Shopify-Katalog erstellt.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-shipping-protection-add-settings.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=a8432cf06443d21b7c341a0942ef7d7e" alt="Shipping-Protection-Add-on-Einstellungen mit Titel, Beschreibung und Preisstufen" width="862" height="708" data-path="images/upcart/quickstart-shipping-protection-add-settings.png" />

<div id="product-add-on">
  ### **Produkt-Add-on**
</div>

Wechsle zum Tab **Product Add-On** und wähle ein bestehendes Produkt aus, das du als Upsell anbieten möchtest.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-product-add-on-energy-drink.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=d7eaf37fa102b147636bfae244fef54c" alt="Produkt-Add-on-Tab mit einem ausgewählten Energy-Drink-Produkt und der Schaltfläche Change Product" width="862" height="428" data-path="images/upcart/quickstart-product-add-on-energy-drink.png" />

<div id="activating-upcart-on-your-store">
  # Upcart in deinem Store aktivieren
</div>

<div id="step-one-make-your-cart-live">
  ### Schritt eins: Deinen Warenkorb live schalten
</div>

Sobald alles konfiguriert ist, gehe zu **Manage All Carts** > wähle den Warenkorb aus, den du aktivieren möchtest, > klicke auf **Publish**.

Nach der Veröffentlichung wird der Warenkorb in den Live-Bereich der Warenkorb-Tabelle verschoben. Er zeigt ein Warn-Badge **„App embed off“**, bis du das Upcart-App-Embed in deinem Theme aktivierst — das ist der nächste Schritt. Mit aktiviertem Embed wird das Badge zu einem grünen **„Live“**-Badge, das bestätigt, dass der Warenkorb in deinem Storefront angezeigt wird.

<Note>
  Das App-Embed steuert, ob der Upcart-Cart-Drawer in deinem Storefront angezeigt wird. Wenn du Rabatte konfiguriert hast, bleiben diese Regeln über Shopifys Rabattsystem aktiv, auch wenn das App-Embed deaktiviert ist.
</Note>

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-publish-cart-confirmation.gif?s=e8cc3d709577ee5a1ab9848afb9f6269" alt="Veröffentlichen eines Warenkorbs in Upcart mit geöffnetem Publish-Bestätigungsdialog" width="2008" height="1080" data-path="images/upcart/quickstart-publish-cart-confirmation.gif" />

<div id="step-two-enable-theme-app-embed">
  ### **Schritt zwei: Theme-App-Embed aktivieren**
</div>

Um Upcart in deinem Theme zu aktivieren, gehe zu **Shopify-Admin → Onlineshop → Themes → Anpassen → App-Embeds**, aktiviere das **Upcart**-App-Embed und klicke auf **Save**.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-app-embed-toggle.gif?s=9244c8509f67622ebb4e1cc2af7ecebb" alt="Aktivieren des Upcart-Cart-Drawer-Umschalters im App-Embeds-Panel des Shopify-Themes" width="1352" height="1080" data-path="images/upcart/quickstart-app-embed-toggle.gif" />

Wenn du auf Probleme stößt oder Kompatibilitätsprobleme hast, kontaktiere gerne unseren **Support-Chat** für Unterstützung.
