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

# Sezzle Banner

Add a Sezzle banner to your online store to let customers know they can shop now and pay later.

<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

Select the implementation that fits your needs:

### Shopify:

* [Asset from CDN](#from-cdn)
* [Asset as Local File](#local-file)
* [Plain HTML](#install-as-html)

### All Platforms:

* [Asset from CDN](#from-cdn-2)
* [Asset as Local File](#local-file-2)
* [Plain HTML](#install-as-html-2)

***

## Shopify

### Install as Asset

#### From CDN

1. Log in to your Shopify Admin
2. Go to `Online Store` > `Themes`
3. Next to the applicable theme, click `Actions` then `Edit Code`
4. Paste the following snippet into the `sections/header.liquid` file where the banner should appear, update the `merchantUUID` value, then click `Save`

* Note: this is typically below the `header` or `sticky-header` closing tag. Open the file, then search (Cmd+F or Ctrl+F) for the word "sticky-header"

<Tabs>
  <Tab title="Template">
    ```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="Example">
    ```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>
      Your merchant ID which is of the format: `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Find it here](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Renders the page design with dark purple or black background

      Available options: `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      The placeholder or parent container where the banner should appear. Should be a unique `.class-name` or `#id-name`
    </ParamField>
  </Tab>
</Tabs>

#### Local File

1. Clone/pull down the [Static-Widgets](https://github.com/sezzle/static-widgets/) project, then run `npm run build-banner`
2. Log in to your Shopify Admin
3. Go to `Online Store` > `Themes`
4. Next to the applicable theme, click `Actions` then `Edit Code`
5. Scroll to the Assets folder, then click `Add A New Asset`
6. Click `Create a Blank File`, name the section `sezzle-home-banner`, select `.js` as the file type, then click `Add Asset`
7. In the Assets folder, select the asset you just created (you may need to scroll, files are not in alphabetical order).
8. Overwrite the asset template with the code contents here: `static-widgets/build/sezzle-home-banner.js`, then click `Save`.
9. Paste the following snippet into the `sections/header.liquid` file where the banner should appear, update the `merchantUUID` value, then click `Save`:

* Note: this is typically below the `header` or `sticky-header` closing tag. Open the file, then search (Cmd+F or Ctrl+F) for the word "sticky-header"

<Tabs>
  <Tab title="Template">
    ```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="Example">
    ```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>
      Your merchant ID which is of the format: `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Find it here](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Renders the page design with dark purple or black background

      Available options: `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      The placeholder or parent container where the banner should appear. Should be a unique `.class-name` or `#id-name`
    </ParamField>
  </Tab>
</Tabs>

### Install as HTML

1. Log in to your Shopify Admin
2. Go to `Online Store` > `Themes`
3. Next to the applicable theme, click `Actions` then `Edit Code`
4. Paste the code snippet [here](https://github.com/sezzle/static-widgets/tree/production/src/sezzle-home-banner/sezzle-home-banner.html) into the `sections/header.liquid` file where the banner should appear, then click `Save`

* Note: this is typically below the `header` or `sticky-header` closing tag. Open the file, then search (Cmd+F or Ctrl+F) for the word "sticky-header"

#### Customization

* Update the wrapper element's class name to the theme color you desire (indigo or black)
* Update the Learn More href URL to point to your own [How Sezzle Works](/docs/guides/about-sezzle) page, if applicable

## Other Platforms

### From CDN

Paste the following where the banner should appear, such as below `</header>` and update the `merchantUUID` value

<Tabs>
  <Tab title="Template">
    ```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="Example">
    ```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>
      Your merchant ID which is of the format: `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Find it here](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Renders the page design with dark purple or black background

      Available options: `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      The placeholder or parent container where the banner should appear. Should be a unique `.class-name` or `#id-name`
    </ParamField>
  </Tab>
</Tabs>

### Local File

Clone/pull down the [Static-Widgets](https://github.com/sezzle/static-widgets/) project, then run `npm run build-banner`
Create a new .js file and populate it with the code contents from here: `static-widgets/build/sezzle-home-banner.js`
Paste the following where the banner should appear, such as below `</header>`, then update the file path and `merchantUUID` value

<Tabs>
  <Tab title="Template">
    ```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="Example">
    ```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>
      Your merchant ID which is of the format: `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Find it here](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="indigo" type="string">
      Renders the page design with dark purple or black background

      Available options: `indigo`, `black`
    </ParamField>

    <ParamField path="renderToContainer" default="#sezzle-banner-render-reference" type="string">
      The placeholder or parent container where the banner should appear. Should be a unique `.class-name` or `#id-name`
    </ParamField>
  </Tab>
</Tabs>

### Install as HTML

Paste the code snippet [here](https://github.com/sezzle/static-widgets/tree/production/src/sezzle-home-banner/sezzle-home-banner.html) where the banner should appear, such as below `</header>`

#### Customization

* Update the wrapper element's class name to the theme color you desire (indigo or black)
* Update the Learn More href URL to point to your own [How Sezzle Works](/docs/guides/about-sezzle) page, if applicable