How to Add the Sezzle Price Element Widget to Your Product and Cart Pages

Having our messaging on your product pages can greatly increase conversion rates. An example from tobi.com is shown below.

 

Image 2020-03-09 at 11.04.43 AM

Follow the instructions below to install your Sezzle widgets. If you need our assistance, we're happy to help you install your widgets. Please reach out to merchantsupport@sezzle.com to request the addition to your product and cart pages.

 

1. Copy the code below and paste into the very bottom of the code file of both your product and cart pages

<script type="text/javascript">
  document.sezzleConfig =
  {
    targetXPath: '.price',
    widgetType: 'product-page',
    renderToPath: '..',
    theme: 'light',
    alignment: 'auto',
    fontFamily: 'inherit',
    color: 'inherit',
    fontSize: 12,
    fontWeight: 300,
    logoSize: 1.00,
    maxWidth: 400,
    marginTop: 0,
    marginLeft: 0,
    marginRight: 0
  }
</script>

2. Update the targetXPath to match the HTML structure of the page (see explanation below). When replacing the targetXPath and other text values, the quotes need to remain, but number values should not have quotes.

3. Just after the previous code, paste this code.

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=[INSERT merchantID HERE]"></script>

4. Replace [INSERT merchantID HERE] in the above template, including the brackets, with your own merchantID.  Your MerchantID can be found here.

5. To explain the path to an element, we will assume the following HTML block containing the price: 

<!--ELEMENTS ABOVE THE PRICE-->

<div id="#price-container" class="price-amount" >
     <span class="money" >
      $50.00
     </span>
</div>

<!--ELEMENTS BELOW THE PRICE-->

Here the targetXPath will be

'#price-container/.money' or '.price-amount/.money'

6. Now that we understand paths to element, lets see what options you have to configure your Sezzle widget.

  1. targetXPath : '.price', // Path to the price element
  2. renderToPath: '..', // Path from the price element to where the widget should render
  3. widgetType: 'product-page', // Options: cart, product-page, product-preview
  4. theme: 'light', // Changes the color of the logo. Options: light, dark, grayscale, white
  5. alignment: 'auto', // Alignment of texts and images in the widget. Options: left, right, center
  6. fontFamily: 'inherit', // Decides the font of the widget text
  7. color: 'inherit', // Decides the font color of the widget text
  8. fontSize: 12, // Decides the font size in pixels.
  9. fontWeight: 300, // Decides the font boldness
  10. logoSize: 1.00, // Scales widget logo
  11. maxWidth: 400, // Maximum width of the widget element in pixels
  12. marginTop: 0, // Adjusts the position of the widget in pixels
  13. marginBottom : 0, //Adjusts the position of the element below the widget in pixels
  14. marginLeft: 0, // Adjusts the position of the widget in pixels
  15. marginRight: 0 // Adjusts the position of the widget in pixels