Sezzle Banner

​

Installation

​

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”

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

​

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”

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

​

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

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

​

Local File

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

​

Install as HTML

​

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