About Sezzle Page

• Shopify
• Lightspeed
• Other

​

Shopify Process

​

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 and paste it into the new template
6. In the config, update the merchant_uuid value to your Sezzle merchant ID, then click Save
   • See below 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

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

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

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

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