Skip to main content
Including a dedicated page about Sezzle on your website helps customers understand how Sezzle works and highlights the benefits of using it as a payment option. We provide a pre-made HTML template to simplify the process. To get started:
  1. Select your website platform
  2. Copy the code from the “Code Snippets” section and integrate it into your site to create the page
    To see a sample of what the page looks like, click here.

Shopify Process

To set up the page on Shopify, follow the steps below.
  1. Log in to your Shopify Store
  2. Navigate to Online Store > Themes
  3. On the theme you want to edit, select Actions and then Edit Code
  4. Under the Templates folder, click Add New Template, select template for Page, template type liquid, and name the page Sezzle, then click Create Template
  5. Select the theme that best fits your store from the tabs listed
  6. Copy the code and paste it under {{page.content}} on the Shopify page
  7. Save
  8. Navigate to Pages
  9. Add a new page, and give it a title - we recommend something like How Sezzle Works or How to use Sezzle
  10. Under Theme Template (in the bottom-right), select sezzle
  11. Save and view the page

Add the page to your navigation

  1. Go to Online Store > Navigation
  2. Select the menu where you would like the Sezzle link to appear (ex: Main menu)
  3. Click Add menu item
  4. Enter the text you wish to appear (ex: How Sezzle Works)
  5. Click the second box, select Pages then the page you just created
  6. Click Add
  7. Click Save Menu

Lightspeed Process

Due to Lightspeed restrictions which prevent script and style tags being saved in Pages, our standard installation script is incompatible. Below are the instructions to install the HTML and CSS separately from an older version of our code.
  1. Log into your store admin
  2. Navigate to Content > Add Page
  3. Enter Title: About Sezzle or How Sezzle Works
  4. Under Content, click the <> button
  5. Copy+paste the code from Github (<script> and <style> tags will be removed automatically, due to Lightspeed restrictions)
  6. Click Save, then click Back to Home
  7. Navigate to Design > Theme Editor
  8. In the theme tile, click Advanced then Customize CSS
  9. Copy+paste the contents of the style tag from Github
  10. Wherever the font-family is given simply as Comfortaa, replace the value with 'Comfortaa', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', cursive, sans-serif;
  11. Find .sezzle-container section .breakdown-row .breakdown and reduce font-size from 28px to 24px.
  12. Click Save

Other Platforms

To set up the page on any other platform, please work with your web developer and/or follow the steps below.
  1. Create a new page in your theme
  2. Copy and paste the code into your website’s page
  3. Click save and/or publish!

Code Snippet

Insert the following code into your HTML file:
<div id="how-sezzle-works"></div>
  <script>
      const config = {
          merchant_uuid: string,
          theme: string,
          language: string,
          countryCode: string,
          numberOfPayments: integer
      }
      const node = document.getElementById('how-sezzle-works');
      const iframe = document.createElement('iframe');
      iframe.src = 'https://media.sezzle.com/how-sezzle-works/v2/index.html';
      iframe.height = '2000px';
      iframe.width = '100%';
      iframe.style.border = 'none';
      iframe.onload = function () {
          iframe.contentWindow.postMessage({
              key: "about_sezzle_config",
              ...config
          }, "*")
      };
      node.appendChild(iframe);
  </script>

Long-Term Financing

If you are enrolled in our long-term financing program, the following options are also available:
LTgroup
string
Applies long-term settings based on your lending package. Please confirm the applicable value for your enrollment with your account manager.Options: a, b
minPriceLT
integer
Minimum price (in dollars) override for which purchase is eligible for long-term lending. Above this amount, the monthly installments with interest will be reflected. Below this amount, only the bi-weekly installments will render.Additional Details: When LTgroup is set, defaults to 150 for a or 400 for b.
maxPriceLT
string
Maximum price (in dollars) override for which purchase is eligible for long-term lending. Below this amount, the monthly installments with interest will be reflected. Above this amount, the input field will indicate an error.Additional Details: When LTgroup is set, defaults to 15000 for a or 8000 for b.
minAPR
number
Lowest APR offered by the lending partner. Displayed as the lower bound of the APR range in the disclaimer.Additional Details: When LTgroup is set, defaults to 9.99 for a or 24.99 for b.
medianAPR
number
Representative APR used to calculate the monthly installment amount shown in the installment card.Additional Details: When LTgroup is set, defaults to 21.99 for a or 29.99 for b.
maxAPR
number
Highest APR offered by the lending partner. Displayed as the upper bound of the APR range in the disclaimer.Additional Details: When LTgroup is set, defaults to 34.99 for a or 35.99 for b.
termsToShow
object
Defines which loan term lengths (in months) appear based on the order amount. Keys are price thresholds (in dollars); the code picks the term array whose threshold the price exceeds (highest match wins). The default key is used when no threshold matches. The min and max term lengths shown in the disclaimer are derived from the union of all term arrays.Additional Details: When LTgroup is set, defaults to { default: [3, 6, 9], 300: [6, 9, 12], 500: [12, 18, 24], 1000: [24, 36, 48] } for a or { default: [3, 6, 9], 600: [6, 9, 12], 800: [9, 12, 24], 1000: [12, 24, 36] } for b.