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

1. Select your website platform
2. Copy the code from the "Code Snippets" section and integrate it into your site to create the page

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

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](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
          }
          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"
          }
          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>
  </Tab>
</Tabs>