Bannière Sezzle

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.

​

Installation

​

Shopify:

• Ressource depuis CDN
• Ressource en fichier local
• HTML simple

​

Toutes les plateformes :

• Ressource depuis CDN
• Ressource en fichier local
• HTML simple

​

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”

{{ "//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>

{{ "//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>

​

Fichier local

1. Clonez/téléchargez le projet 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”

{{ "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>

{{ "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>

​

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 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 page, le cas échéant

​

Autres plateformes

​

Depuis le CDN

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

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

​

Fichier local

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

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

​

Installer en tant que HTML

​

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, le cas échéant