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

# Bannière Sezzle

Ajoutez une bannière Sezzle à votre boutique en ligne pour informer les clients qu'ils peuvent acheter maintenant et payer plus tard.

<Frame>
  <img src="https://mintcdn.com/sezzle/hKhvshWly4M3cXTJ/images/Frame1456677764(1).png?fit=max&auto=format&n=hKhvshWly4M3cXTJ&q=85&s=d2dd598b7780a4a1d394c7a8bcff3b1e" alt="Frame1456677764(1) Pn" width="2439" height="2622" data-path="images/Frame1456677764(1).png" />
</Frame>

## Installation

Sélectionnez l'implémentation qui correspond à vos besoins :

### Shopify:

* [Ressource depuis CDN](#from-cdn)
* [Ressource en fichier local](#local-file)
* [HTML simple](#install-as-html)

### Toutes les plateformes :

* [Ressource depuis CDN](#from-cdn-2)
* [Ressource en fichier local](#local-file-2)
* [HTML simple](#install-as-html-2)

***

## Shopify

### Installer en tant que ressource

#### Depuis CDN

1. Connectez-vous à votre interface d'administration Shopify
2. Accédez à `Online Store` > `Themes`
3. À côté du thème applicable, cliquez sur `Actions` puis `Edit Code`
4. Collez le snippet suivant dans le fichier `sections/header.liquid` là où la bannière doit apparaître, mettez à jour la valeur `merchantUUID`, puis cliquez sur `Save`

* Note: this is typically below the `header` ou `sticky-header` balise de fermeture. Ouvrez le fichier, puis recherchez (Cmd+F ou Ctrl+F) le mot "sticky-header"

<Tabs>
  <Tab title="Modèle">
    ```html theme={"system"}
    {{ "//checkout-sdk.sezzle.com/sezzle-home-banner.min.js" | script_tag }}
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "string",
        theme: "string",
        renderToContainer: "string",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html theme={"system"}
    {{ "//checkout-sdk.sezzle.com/sezzle-home-banner.min.js" | script_tag }}
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        theme: "indigo",
        renderToContainer: "#sezzle-banner-render-reference",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField path="merchant_uuid" type="string" required>
      Votre identifiant marchand au format : `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Trouvez-le ici](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Affiche le design de la page avec un fond violet foncé ou noir

      Options disponibles : `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      L'espace réservé ou le conteneur parent où la bannière doit apparaître. Doit être un `.class-name` ou `#id-name`
    </ParamField>
  </Tab>
</Tabs>

#### Fichier local

1. Clonez/téléchargez le projet [Static-Widgets](https://github.com/sezzle/static-widgets/), puis exécutez `npm run build-banner`
2. Connectez-vous à votre interface d'administration Shopify
3. Accédez à `Online Store` > `Themes`
4. À côté du thème applicable, cliquez sur `Actions` puis `Edit Code`
5. Faites défiler jusqu'au dossier Assets, puis cliquez sur `Add A New Asset`
6. Cliquez sur `Create a Blank File`, nommez la section `sezzle-home-banner`, sélectionnez `.js` comme type de fichier, puis cliquez sur `Add Asset`
7. Dans le dossier Assets, sélectionnez la ressource que vous venez de créer (vous devrez peut-être faire défiler, les fichiers ne sont pas dans l'ordre alphabétique).
8. Remplacez le modèle de ressource par le contenu du code ici : `static-widgets/build/sezzle-home-banner.js`, puis cliquez sur `Save`.
9. Collez le snippet suivant dans le fichier `sections/header.liquid` là où la bannière doit apparaître, mettez à jour la valeur `merchantUUID`, puis cliquez sur `Save`:

* Note: this is typically below the `header` ou `sticky-header` balise de fermeture. Ouvrez le fichier, puis recherchez (Cmd+F ou Ctrl+F) le mot "sticky-header"

<Tabs>
  <Tab title="Modèle">
    ```html theme={"system"}
    {{ "sezzle-home-banner.js" | asset_url | script_tag }}
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "string",
        theme: "string",
        renderToContainer: "string",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html theme={"system"}
    {{ "sezzle-home-banner.js" | asset_url | script_tag }}
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        theme: "indigo",
        renderToContainer: "#sezzle-banner-render-reference",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField path="merchant_uuid" type="string" required>
      Votre identifiant marchand au format : `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Trouvez-le ici](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Affiche le design de la page avec un fond violet foncé ou noir

      Options disponibles : `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      L'espace réservé ou le conteneur parent où la bannière doit apparaître. Doit être un `.class-name` ou `#id-name`
    </ParamField>
  </Tab>
</Tabs>

### Installer en HTML

1. Connectez-vous à votre interface d'administration Shopify
2. Accédez à `Online Store` > `Themes`
3. À côté du thème applicable, cliquez sur `Actions` puis `Edit Code`
4. Collez le snippet de code [ici](https://github.com/sezzle/static-widgets/tree/production/src/sezzle-home-banner/sezzle-home-banner.html) dans le fichier `sections/header.liquid` là où la bannière doit apparaître, puis cliquez sur `Save`

* Note: this is typically below the `header` ou `sticky-header` balise de fermeture. Ouvrez le fichier, puis recherchez (Cmd+F ou Ctrl+F) le mot "sticky-header"

#### Personnalisation

* Mettez à jour le nom de classe de l'élément wrapper selon la couleur de thème souhaitée (indigo ou noir)
* Mettez à jour l'URL href "En savoir plus" pour pointer vers votre propre page [Comment fonctionne Sezzle](/fr/docs/guides/about-sezzle) page, le cas échéant

## Autres plateformes

### Depuis le CDN

Collez ce qui suit là où la bannière doit apparaître, par exemple en dessous de `</header>` et mettez à jour le `merchantUUID` valeur

<Tabs>
  <Tab title="Modèle">
    ```html theme={"system"}
    <script src="https://checkout-sdk.sezzle.com/sezzle-home-banner.min.js"></script>
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "string",
        theme: "string",
        renderToContainer: "string",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html theme={"system"}
    <script src="https://checkout-sdk.sezzle.com/sezzle-home-banner.min.js"></script>
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        theme: "indigo",
        renderToContainer: "#sezzle-banner-render-reference",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField path="merchant_uuid" type="string" required>
      Votre identifiant marchand qui est au format : `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Trouvez-le ici](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Affiche le design de la page avec un fond violet foncé ou noir

      Options disponibles : `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      L'espace réservé ou le conteneur parent où la bannière doit apparaître. Doit être un `.class-name` ou `#id-name`
    </ParamField>
  </Tab>
</Tabs>

### Fichier local

Clonez/téléchargez le projet [Static-Widgets](https://github.com/sezzle/static-widgets/) puis exécutez `npm run build-banner`
Créez un nouveau fichier .js et remplissez-le avec le contenu du code disponible ici : `static-widgets/build/sezzle-home-banner.js`
Collez ce qui suit là où la bannière doit apparaître, par exemple en dessous de `</header>`, puis mettez à jour le chemin du fichier et la `merchantUUID` valeur

<Tabs>
  <Tab title="Modèle">
    ```html theme={"system"}
    <script src="YOUR_FILE_PATH_HERE.js"></script>
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "string",
        theme: "string",
        renderToContainer: "string",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html theme={"system"}
    <script src="YOUR_FILE_PATH_HERE.js"></script>
    <div id="sezzle-banner-render-reference"></div>
    <script>
    new SezzleBanner({
        merchantUUID: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        theme: "indigo",
        renderToContainer: "#sezzle-banner-render-reference",
    }).init();
    </script>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField path="merchant_uuid" type="string" required>
      Votre identifiant marchand qui est au format : `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Trouvez-le ici](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Affiche le design de la page avec un fond violet foncé ou noir

      Options disponibles : `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      L'espace réservé ou le conteneur parent où la bannière doit apparaître. Doit être un `.class-name` ou `#id-name`
    </ParamField>
  </Tab>
</Tabs>

### Installer en tant que HTML

Collez l'extrait de code [ici](https://github.com/sezzle/static-widgets/tree/production/src/sezzle-home-banner/sezzle-home-banner.html) là où la bannière doit apparaître, par exemple en dessous de `</header>`

#### Personnalisation

* Mettez à jour le nom de classe de l'élément wrapper selon la couleur de thème souhaitée (indigo ou noir)
* Mettez à jour l'URL href "En savoir plus" pour pointer vers votre propre page [Comment fonctionne Sezzle](/fr/docs/guides/about-sezzle), le cas échéant