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

# About Sezzle Page

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:

Select your website platform:

* [Shopify](#shopify-process)
* [Lightspeed](#lightspeed-process)
* [Other](#other-platforms)

<Tip>
  To see a sample of what the page looks like, click [here](https://sezzle-test.myshopify.com/pages/how-sezzle-works).
</Tip>

## Shopify Process

To set up the page on Shopify, follow the steps below.

### Part 1: Create the Page

1. Log in to your Shopify Store
2. Under `Online Store`, click `Pages`
3. Click `Add Page`, and give it a title - we recommend something like "How Sezzle Works" or "How to use Sezzle"
4. Click `</>` (Show HTML)
5. Copy the [code](#code-snippet) and paste it into the new template
6. In the config, update the `merchant_uuid` value to your [Sezzle merchant ID](https://dashboard.sezzle.com/merchant/settings/business), then click `Save`
   * See [below](#options) for additional details and config options
7. Click `Save` then click `Preview` to confirm installation success.
8. Return to the editor, change to `Visible` then click `Save`

### Part 2: Add to Navigation

1. Go to `Content` > `Menus`
2. Select the menu you wish to edit (ex: `Main menu`, `Footer menu`)
3. Click `Add menu item`
4. Enter the label as you want the link to appear, ex: `About Sezzle`
5. Click into the `Link` box, select `Pages`, then the new Sezzle page you created
6. Click `Save`

## 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](https://github.com/sezzle/sezzle-merchant-resources/blob/4eb6f8bafb645c8b4e41524d7dc968bf5c60afb1/light-theme.html) (`<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](https://github.com/sezzle/sezzle-merchant-resources/blob/4eb6f8bafb645c8b4e41524d7dc968bf5c60afb1/light-theme.html)
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:

<Tabs>
  <Tab title="Template">
    ```html expandable theme={"system"}
    <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>
    ```
  </Tab>

  <Tab title="Example">
    ```html expandable theme={"system"}
    <div id="how-sezzle-works"></div>
      <script>
          const config = {
              merchant_uuid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
              theme: "light",
              language: "en",
              countryCode: "US",
              numberOfPayments: 5
          }
          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>
    ```
  </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="light" type="string">
      Renders the page design in dark or light mode

      Available options: `dark`, `light`
    </ParamField>

    <ParamField path="language" default="en" type="string">
      Controls the translation of the page content

      Available options: `en`, `fr` , `es`
    </ParamField>

    <ParamField path="countryCode" default="US" type="string">
      Handles regional product availability. Set up to read the shopper's IP location, or the selected value in your store's country dropdown if IP address is unavailable. If country code is not CA, logic will default to US.

      Available options: `US`, `CA`
    </ParamField>

    <ParamField path="numberOfPayments" default="5" type="integer">
      Handles max biweekly installments available. Overwrite this to `4` if pay-in-5 should not be displayed. Use `countryCode` for regional product availability.

      Available options: `5`, `4`
    </ParamField>

    ### Long-Term Financing

    If you are enrolled in our long-term financing program, the following options are also available:

    <ParamField path="LTgroup" type="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`
    </ParamField>

    <ParamField path="minPriceLT" type="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`.
    </ParamField>

    <ParamField path="maxPriceLT" type="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`.
    </ParamField>

    <ParamField path="minAPR" type="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`.
    </ParamField>

    <ParamField path="medianAPR" type="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`.
    </ParamField>

    <ParamField path="maxAPR" type="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`.
    </ParamField>

    <ParamField path="termsToShow" type="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`.
    </ParamField>
  </Tab>
</Tabs>