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

# Snelstartgids voor Upcart

> Leer hoe je Upcart activeert, kernfuncties inschakelt en je cart drawer live publiceert.

Deze gids leidt je door het instellen van Upcart met de belangrijkste modules, van visuele aanpassing tot activering in je webshop.

Upcart vervangt de cart drawer van je thema visueel, maar het **integreert niet met de cart drawer of winkelwagenpagina van je thema**. De winkelwagenpagina van Shopify blijft toegankelijk.

<div id="managing-modules">
  # **Modules beheren**
</div>

Elke Upcart-module kan **eenvoudig worden in- of uitgeschakeld**. Klik gewoon op de knop **Enable/Disable** in de rechterbovenhoek om een module op elk moment aan of uit te zetten. Je wijzigingen worden direct van kracht zodra je ze opslaat.

<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="Rij van de aankondigingenmodule gemarkeerd als Disabled met een pijl naar de knop Enable" width="1548" height="210" data-path="images/upcart/quickstart-announcements-module-row-disabled.png" />

<div id="cart-design">
  # Winkelwagenontwerp
</div>

Wanneer je de Cart Editor van Upcart voor het eerst opent, kom je terecht in de [Design-module](/nl/upcart/design_module). Hier kun je de basiskleuren van de drawer aanpassen aan de huisstijl van je winkel.

<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="Design-module van de Upcart Cart Editor met kleurinstellingen naast een live voorbeeld van de cart drawer" width="600" data-path="images/upcart/quickstart-cart-editor-design-module.png" />

<div id="announcements">
  # Aankondigingen
</div>

Om een winkelwagenbericht of afteltimer weer te geven, ga je naar **Body > [Announcements](/nl/upcart/announcements_module)**.

Klik in de rechterbovenhoek op **Enable**. De badge naast de modulenaam verandert van **Disabled** in **Active**.

Voer je bericht in het veld **Announcement Text** in en configureer indien nodig de 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="Aankondigingsinstellingen met timer, tekstveld voor de aankondiging en kleuropties" width="645" height="679" data-path="images/upcart/quickstart-announcement-settings-timer-text.png" />

Zorg ervoor dat je de variabele `{TIMER}` gebruikt voor afteltimers in je aankondigingstekst om een correcte werking te garanderen (bijv. "Deze aanbieding is slechts {TIMER} beschikbaar."). Vermijd het direct kopiëren van opgemaakte tekst uit tools van derden.

Als je klaar bent, klik dan op **Save** in de rechterbovenhoek.

<div id="theme-level-issues">
  #### Problemen op themaniveau
</div>

* **CSS- of app-conflicten:** Controleer of CSS-eigenschappen zoals `display: none;` de aankondigingsbalk niet verbergen. Controleer ook of apps van derden deze instellingen niet overschrijven.
* **Zichtbaarheid van tekst:** Controleer of de tekstkleur van de aankondigingsbalk contrasteert met de achtergrond en pas deze indien nodig aan in je thema-instellingen.

<div id="advanced-debugging-steps">
  #### Geavanceerde stappen voor foutopsporing
</div>

Bekijk bij aanhoudende problemen de fouten in de browserconsole op scriptproblemen die de aankondigingsbalk beïnvloeden en schakel apps van derden tijdelijk uit om conflicten op te sporen.

<div id="rewards">
  # Beloningen
</div>

Om een voortgangsbalk weer te geven die klanten aanmoedigt om meer uit te geven, schakel je de beloningenmodule (Rewards Module) in.

<div id="general-settings">
  ### **Algemene instellingen**
</div>

Stel je huisstijlkleuren in en het bericht dat wordt getoond nadat het laatste beloningsniveau is bereikt.

Kies een beloningsbasis in de kaart **Rewards calculation** onder General settings:

* **Cart total (\$)**: Volgt de totale waarde van de winkelwagen
* **Cart quantity (#)**: Volgt het aantal artikelen

<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="Algemene instellingen van de beloningenmodule met balkkleuren en velden voor het voltooiingsbericht" width="600" data-path="images/upcart/quickstart-rewards-module-general-settings.png" />

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

Kies je beloningstype:

* [**Shipping**](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates/flat-shipping-rates): Ontgrendelt gratis verzending bij het niveau
* [**Discount**](https://help.shopify.com/en/manual/discounts/discount-types): Ontgrendelt een korting bij het niveau
* [**Product**](/nl/upcart/set_up_a_free_product_reward_tier_in_upcart): Voegt een product toe aan de winkelwagen

Of de voortgang van een niveau vóór of na kortingen wordt gemeten, stel je één keer in voor de hele balk, met het selectievakje **Use pre-discounted prices for cart total** in **Rewards calculation** — het is geen eigenschap van het beloningstype.

Stel een minimumdrempel in om de beloning te activeren en pas het veld **Title before achieving tier** aan. Je kunt maximaal **vier beloningsniveaus** aanmaken.

<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="Niveau-instellingen met de keuzelijst voor het beloningstype, het minimumbedrag en de titelvelden voor het niveau" width="600" data-path="images/upcart/quickstart-rewards-settings-reward-type.png" />

<Note>
  Deze schermafbeelding dateert van vóór de huidige labels: de sectie heet er "Rewards settings" en het veld "Text before achieving". Het zijn dezelfde instellingen — ze heten nu **Tier settings** en **Title before achieving tier**.
</Note>

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

Schakel **Use AI Recommended Upsells** in, selecteer het algoritme **Related** en zet **Smart Variant Matching** aan om passende productvarianten vooraf te selecteren op basis van de inhoud van de winkelwagen.

<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-instellingen met AI-aanbevolen upsells, het algoritme Related en slimme variantmatching ingeschakeld" width="600" data-path="images/upcart/quickstart-upsells-settings-ai-recommended.png" />

Pas de titel van je sectie en het label van de knop **Add** aan.

<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-velden voor het maximale aantal weer te geven upsells en de titeltekst van de sectie" width="600" data-path="images/upcart/quickstart-upsell-fields-maximum-upsells.png" />

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

Om een add-on met schakelaar in de footer te tonen, kun je een van deze opties inschakelen:

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

Selecteer **Shipping Protection** en configureer dynamische prijsniveaus op basis van de winkelwagenwaarde.\
Hiermee wordt een echt product in je Shopify-catalogus aangemaakt.

<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="Instellingen van de add-on Shipping Protection met titel, beschrijving en prijsniveaus" width="862" height="708" data-path="images/upcart/quickstart-shipping-protection-add-settings.png" />

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

Ga naar het tabblad **Product Add-On** en selecteer een bestaand product om als upsell aan te bieden.

<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="Tabblad Product add-on met een geselecteerd Energy Drink-product en de knop 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 activeren in je winkel
</div>

<div id="step-one-make-your-cart-live">
  ### Stap één: Zet je winkelwagen live
</div>

Zodra alles is geconfigureerd, ga je naar **Manage All Carts** > selecteer de winkelwagen die je actief wilt maken > klik op **Publish**.

Na publicatie verschuift de winkelwagen naar het live-gedeelte van de winkelwagentabel. Er wordt een waarschuwingsbadge **"App embed off"** getoond totdat je de Upcart-app-embed in je thema inschakelt, wat de volgende stap is. Met de embed aan verandert de badge in een groene badge **"Live"** die bevestigt dat de winkelwagen in je webshop wordt weergegeven.

<Note>
  De app-embed bepaalt of de Upcart cart drawer in je webshop wordt weergegeven. Als je kortingen (Discounts) hebt geconfigureerd, blijven die regels actief via het kortingssysteem van Shopify, zelfs wanneer de app-embed is uitgeschakeld.
</Note>

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-publish-cart-confirmation.gif?s=e8cc3d709577ee5a1ab9848afb9f6269" alt="Een winkelwagen publiceren in Upcart met het bevestigingsvenster voor Publish geopend" width="2008" height="1080" data-path="images/upcart/quickstart-publish-cart-confirmation.gif" />

<div id="step-two-enable-theme-app-embed">
  ### **Stap twee: Schakel de Theme App Embed in**
</div>

Om Upcart in je thema te activeren, ga je naar **Shopify Admin → Online Store → Themes → Customize → App embeds**, schakel je de app-embed **Upcart** in en klik je op **Save**.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-app-embed-toggle.gif?s=9244c8509f67622ebb4e1cc2af7ecebb" alt="De schakelaar Upcart Cart Drawer inschakelen in het paneel App embeds van het Shopify-thema" width="1352" height="1080" data-path="images/upcart/quickstart-app-embed-toggle.gif" />

Als je problemen tegenkomt of compatibiliteitsproblemen ervaart, neem dan gerust contact op met onze **Support Chat** voor hulp.
