Sezzle Banner

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

Installation

Select the implementation that fits your needs:

Shopify:

• Asset from CDN
• Asset as Local File
• Plain HTML

All Platforms:

• Asset from CDN
• Asset as Local File
• Plain HTML

---

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”

Template

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

Example

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

Options

merchant_uuid · string · required

Your merchant ID which is of the format: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Find it here.

theme · string · default: "indigo"

Renders the page design with dark purple or black background

Available options: indigo, black

renderToContainer · string · default: "#sezzle-banner-render-reference"

The placeholder or parent container where the banner should appear. Should be a unique .class-name or #id-name

Local File

1. Clone/pull down the 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”

Template

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

Example

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

Options

merchant_uuid · string · required

Your merchant ID which is of the format: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Find it here.

theme · string · default: "indigo"

Renders the page design with dark purple or black background

Available options: indigo, black

renderToContainer · string · default: "#sezzle-banner-render-reference"

The placeholder or parent container where the banner should appear. Should be a unique .class-name or #id-name

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 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 page, if applicable

Other Platforms

From CDN

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

Template

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

Example

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

Options

merchant_uuid · string · required

Your merchant ID which is of the format: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Find it here.

theme · string · default: "indigo"

Renders the page design with dark purple or black background

Available options: indigo, black

renderToContainer · string · default: "#sezzle-banner-render-reference"

The placeholder or parent container where the banner should appear. Should be a unique .class-name or #id-name

Local File

Clone/pull down the 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

Template

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

Example

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

Options

merchant_uuid · string · required

Your merchant ID which is of the format: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Find it here.

theme · string · default: "indigo"

Renders the page design with dark purple or black background

Available options: indigo, black

renderToContainer · string · default: "#sezzle-banner-render-reference"

The placeholder or parent container where the banner should appear. Should be a unique .class-name or #id-name

Install as HTML

Paste the code snippet here 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 page, if applicable