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

# Guide de démarrage rapide d'Upcart

> Apprenez à activer Upcart, à activer les fonctionnalités principales et à publier votre tiroir de panier en ligne.

Ce guide vous accompagne dans la configuration d'Upcart avec ses principaux modules, de la personnalisation visuelle à l'activation sur votre boutique.

Upcart remplace visuellement le tiroir de panier de votre thème, mais il **ne s'intègre pas au tiroir de panier ni à la page de panier de votre thème**. La page de panier Shopify restera accessible.

<div id="managing-modules">
  # **Gérer les modules**
</div>

Chaque module Upcart peut être **facilement activé ou désactivé**. Il suffit de cliquer sur le bouton **Enable/Disable** dans le coin supérieur droit pour activer ou désactiver un module à tout moment. Vos modifications prennent effet immédiatement une fois enregistrées.

<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="Ligne du module Announcements marquée Disabled avec une flèche pointant vers le bouton Enable" width="1548" height="210" data-path="images/upcart/quickstart-announcements-module-row-disabled.png" />

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

Lorsque vous ouvrez pour la première fois le Cart Editor d'Upcart, vous arrivez dans le [module Design](/fr/upcart/design_module). Vous pouvez y personnaliser les couleurs de base du tiroir pour correspondre à l'image de marque de votre boutique.

<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="Module Design du Cart Editor d'Upcart avec les paramètres de couleur à côté d'un aperçu en direct du tiroir de panier" width="600" data-path="images/upcart/quickstart-cart-editor-design-module.png" />

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

Pour afficher un message de panier ou un compte à rebours, allez dans **Body > [Announcements](/fr/upcart/announcements_module)**.

Dans le coin supérieur droit, basculez l'interrupteur sur **Active**, ou cliquez sur **Activate** dans le message orange affiché en haut de la page.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-announcements-panel-disabled-notice.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=10a332b398e64dc296c69fe5f5a3a11e" alt="Panneau Announcements affichant l'avis Disabled avec un bouton Activate" width="600" data-path="images/upcart/quickstart-announcements-panel-disabled-notice.png" />

Saisissez votre message dans le champ **Announcement Text** et configurez la minuterie si nécessaire.

<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="Paramètres d'annonce avec minuterie, champ de texte d'annonce et options de couleur" width="645" height="679" data-path="images/upcart/quickstart-announcement-settings-timer-text.png" />

Assurez-vous d'utiliser la variable `{TIMER}` pour les comptes à rebours dans votre texte d'annonce afin d'assurer son bon fonctionnement (par exemple, « Cette offre n'est disponible que pendant {TIMER}. ») Évitez de copier du texte formaté directement depuis des outils tiers.

Une fois terminé, assurez-vous de cliquer sur **Save** dans le coin supérieur droit.

<div id="theme-level-issues">
  #### Problèmes au niveau du thème
</div>

* **Conflits de CSS ou d'applications :** vérifiez que des propriétés CSS comme `display: none;` ne masquent pas la barre d'annonce. Vérifiez également que des applications tierces n'écrasent pas ces paramètres.
* **Visibilité du texte :** confirmez que la couleur du texte de la barre d'annonce contraste avec l'arrière-plan et ajustez-la dans les paramètres de votre thème si nécessaire.

<div id="advanced-debugging-steps">
  #### Étapes de débogage avancées
</div>

Pour les problèmes persistants, examinez les erreurs de la console du navigateur à la recherche de problèmes de script affectant la barre d'annonce et désactivez temporairement les applications tierces pour identifier les conflits.

<div id="rewards">
  # Récompenses
</div>

Pour afficher une barre de progression qui encourage les clients à dépenser plus, activez le module Rewards.

<div id="general-settings">
  ### **Paramètres généraux**
</div>

Définissez les couleurs de votre marque et le message affiché après l'atteinte du dernier palier de récompense.\
Choisissez une base de récompense :

* **Cart Total** : suit la valeur totale du panier
* **Item Count** : suit la quantité d'articles

<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="Paramètres généraux du module Rewards avec les couleurs de la barre et les champs de message de complétion" width="600" data-path="images/upcart/quickstart-rewards-module-general-settings.png" />

<div id="rewards-settings-choose-your-reward-type">
  ### **Paramètres de récompenses** Choisissez votre type de récompense :
</div>

* [**Shipping**](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates/flat-shipping-rates) : prend en compte les remises appliquées
* [**Discount**](https://help.shopify.com/en/manual/discounts/discount-types) : ignore les remises
* [**Product**](/fr/upcart/set_up_a_free_product_reward_tier_in_upcart) : ajoute un produit au panier

Définissez un seuil minimum pour déclencher la récompense et personnalisez le champ « Text before achieving ». Vous pouvez créer jusqu'à **quatre paliers de récompense**.

<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="Paramètres de récompenses avec le type de récompense, le montant minimum et les champs de texte avant l'atteinte" width="600" data-path="images/upcart/quickstart-rewards-settings-reward-type.png" />

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

Activez **Use AI Recommended Upsells**, sélectionnez l'algorithme **Related** et activez **Smart Variant Matching** pour présélectionner les variantes de produits correspondantes en fonction du contenu du panier.

<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="Paramètres d'upsells avec les upsells recommandés par IA, l'algorithme Related et la correspondance intelligente des variantes activés" width="600" data-path="images/upcart/quickstart-upsells-settings-ai-recommended.png" />

Personnalisez le titre de votre section et le libellé du bouton **Add**.

<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="Champs d'upsell pour le nombre maximum d'upsells à afficher et le texte du titre de la section" width="600" data-path="images/upcart/quickstart-upsell-fields-maximum-upsells.png" />

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

Pour afficher un add-on à bascule dans le pied de page, vous pouvez activer l'une de ces options :

<div id="shipping-protection">
  ### **Protection d'expédition**
</div>

Sélectionnez **Shipping Protection** et configurez des paliers de tarification dynamique en fonction de la valeur du panier.\
Cela crée un produit réel dans votre catalogue Shopify.

<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="Paramètres de l'add-on Shipping Protection avec titre, description et paliers de tarification" width="862" height="708" data-path="images/upcart/quickstart-shipping-protection-add-settings.png" />

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

Passez à l'onglet **Product Add-On** et sélectionnez un produit existant à proposer en upsell.

<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="Onglet d'add-on produit avec un produit Energy Drink sélectionné et un bouton Change Product" width="862" height="428" data-path="images/upcart/quickstart-product-add-on-energy-drink.png" />

<div id="activating-upcart-on-your-store">
  # Activer Upcart sur votre boutique
</div>

<div id="step-one-make-your-cart-live">
  ### Première étape : mettre votre panier en ligne
</div>

Une fois que tout est configuré :

Remarque : l'app embed contrôle si le tiroir de panier Upcart s'affiche sur votre boutique. Si vous avez des remises configurées, ces règles resteront actives via le système de remises de Shopify même lorsque l'app embed est désactivé.

<div id="step-2-test-compatibility">
  ### **Étape 2 : tester la compatibilité**
</div>

allez dans **Manage All Carts** > sélectionnez le panier que vous souhaitez activer > cliquez sur **Publish**.

Une fois publié, un badge vert **« Live »** apparaîtra à côté du nom du panier confirmant qu'il est actif sur votre boutique.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-publish-cart-confirmation.gif?s=e8cc3d709577ee5a1ab9848afb9f6269" alt="Publication d'un panier dans Upcart avec la boîte de dialogue de confirmation Publish ouverte" width="2008" height="1080" data-path="images/upcart/quickstart-publish-cart-confirmation.gif" />

<div id="step-two-enable-theme-app-embed">
  ### **Deuxième étape : activer le Theme App Embed**
</div>

Pour activer Upcart sur votre thème, allez dans **Shopify Admin → Online Store → Themes → Customize → App Embeds**, activez le **Upcart Bridge** et cliquez sur **Save**.

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/quickstart-app-embed-toggle.gif?s=9244c8509f67622ebb4e1cc2af7ecebb" alt="Activation de l'interrupteur Upcart Cart Drawer dans le panneau App embeds du thème Shopify" width="1352" height="1080" data-path="images/upcart/quickstart-app-embed-toggle.gif" />

Si vous rencontrez des problèmes ou des soucis de compatibilité, n'hésitez pas à contacter notre **chat de support** pour obtenir de l'aide.
