Shopify Widgets

​

Purpose

Increase AOV and conversions by promoting Sezzle on your storefront. Easily install assets to product and cart pages with the Sezzle Widget app.

​

Prerequisites

1. You should have a Sezzle merchant account
   • Please visit our signup page if you don’t have an account
2. Install and configure the Sezzle Payments App

​

Getting Started

1. Log in to your website’s Shopify admin
2. Install the Sezzle Widget app
   • Alternatively, click the Get the Widgets App button under the Add Sezzle to your product and cart pages step of the Sezzle Merchant Dashboard Setup Checklist
3. Click Install
   
4. Within the Sezzle Widget app, enter your Public API Key and click Link Sezzle Account
   • For most merchants, we are able to pre-fill the public API key based on the Shopify store URL
   • To enter the API key manually, copy from the API Keys page within the Sezzle Merchant Dashboard Settings
     

​

Installation

Please select ONE of the following installation methods:

​

Installation Wizard

1. Select the theme you wish to edit, then click Next
   This field does not default to your live theme - you must make a selection
   
2. Select the asset you wish to install, then click Next
   
3. Select the page you wish to install on, then click Finish
   
4. Click the Activate button
   You must click Activate for changes to take effect
5. Customize as desired, then click Save

​

Installing as Embed Blocks (manual)

If you are not already in the app, you can alternatively enable the Sezzle products directly from your theme customizer window.

1. Within Shopify Admin, go to Sales Channels then Online Store
2. Under Themes, click Customize for the theme you wish to edit
   
3. In the upper-left corner, click the third icon App Embeds
4. Search for Sezzle and activate the product(s) you wish to install
   • Customize as desired and click Save
     

​

Installing as App Blocks

App blocks allow merchants to control product placement. Compatible with 2.0 themes only.

1. Within Shopify Admin, go to Sales Channels then Online Store
2. Under Themes, click Customize for the theme you wish to edit
   
3. In the top toolbar, ensure the third icon Activate Inspector is activated

​

Installing Widget App Block on Product Page

1. Navigate to a product page
2. Hover over the area where you wish to display the widget
3. If app blocks can be placed there, + or Add block will appear. Click, then select Sezzle Widget under the Apps tab
   • Alternatively, open the Sections tab and click Add Block
   • Under the Apps tab, select Sezzle Widget
   • Drag & drop the block to the desired location in the contents menu
     
4. Customize as desired, then click Save

​

Installing Widget App Block and Checkout Button on Cart Page

1. Add a product to the cart
2. Navigate to the cart page
3. Hover over the area where you wish to display a Sezzle product
4. If app blocks can be placed there, + or Add block will appear
   • Click, then under the Apps tab, select the product
   • Alternatively, open the Sections tab and click Add Block
     • Under the Apps tab, select Sezzle Widget
     • Drag & drop the block to the desired location in the contents menu
5. Repeat the previous two steps for the other product, if desired
   
6. Customize as desired, then click Save

​

Customizations

The following section covers customization options that are available through the app.

​

Widget Customization Options

​

Checkout Button Customization Options

​

Default Placement

If Checked

• The Sezzle Checkout Button will be placed after the native checkout button and inherit page styles

If Unchecked

• The button will be placed as indicated by the app block placement
• Styles may also be affected, based on the placement selected

​

Custom CSS

If you are familiar with CSS and would like additional style customizations, you can write them directly to your theme.

1. In the upper-left corner, click the second icon Theme Settings
2. Expand Custom CSS section and write your custom snippet, then click Save
   

​

Troubleshooting

​

Customization

• We offer a few select customization options. Please contact Sezzle support to request any of the following:
  • Grayscale logo
  • Reflect checkout minimum in widget
  • Reflect Sezzle/Afterpay dual widget
  • Style & position changes
    • For position changes, you must use the embed block option.
  • Conditional rendering for subscription, gift cards, etc.
  • Conditional rendering above a certain price threshold

​

Request Help

If the Sezzle Widget app is not able to automatically install the Sezzle widget or checkout button on your storefront, please use the Request Help form within the app to contact the Sezzle Merchant Integrations team. The Request Help form in the Sezzle Widget app is for widget and checkout button help only. For questions regarding your account or issues with the Sezzle payment option at checkout, please reach out to [email protected].

​

Manual Theme Code Snippet Installation

Installations that require code changes directly to the theme are not recommended unless your site uses a headless CMS, and should be used as a last resort.

​

Widget Manual Theme Code Snippet Installation

1. Within Shopify Admin, go to Sales Channels then Online Store
2. Under Themes, click ... then Edit Code for the theme you wish to edit
   
3. In the Code Explorer, go to the Layout folder and select the theme.liquid file
4. Copy and paste the script to the very bottom of the file
   • Script template to be inserted into your webpage:
     Copy

     Ask AI

     <script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={sezzle_merchant_uuid}"></script>
     

5. Replace {sezzle_merchant_uuid} (including the curly brackets) in the script template with your site’s Merchant ID
   • This can be found in the Sezzle Merchant Dashboard Business Settings
   • Example with Merchant ID value updated:
     Copy

     Ask AI

     <script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=12a34bc5-6de7-890f-g123-4hi5678jk901"></script>
     

6. Click Save

​

Checkout Button Manual Theme Code Snippet Installation

To install the checkout button directly to your theme code, please refer to the documentation and snippet on GitHub.

​

Uninstalling

​

Uninstalling Embed Blocks

1. Within Shopify Admin, go to Sales Channels then Online Store
2. Under Themes, click Customize for the theme you wish to edit
   
3. In the upper-left corner, click the third icon App Embeds
4. Toggle the desired embed block(s) to the OFF position, then click Save
   

​

Uninstalling App Blocks

1. Within Shopify Admin, go to Sales Channels then Online Store
2. Under Themes, click Customize for the theme you wish to edit
   
3. Navigate to a product page
4. In the upper-left corner, click the first icon Sections
5. Next to the Sezzle Widget block, click the Delete trash can icon, then click Save
6. Navigate to the cart page, and repeat the previous step for each product, then click Save
   

​

Uninstalling Manual Theme Code Snippet

1. Within Shopify Admin, go to Sales Channels then Online Store
2. Under Themes, click ... then Edit Code for the theme you wish to edit
   
3. Review the layout/theme.liquid file for any Sezzle code snippets
   1. Remove them, then click Save
   2. Repeat for any files containing product and cart in the name
4. Once all references are removed, search for files containing sezzle in the name, and delete

​

Uninstalling the App

1. Go to Apps then Sezzle Widget
2. In the top-right corner, click the Menu icon, then select App Settings
3. Click Delete App
   Deleting the app will automatically remove all app blocks and embed blocks from all themes. Any code change installations will not be removed automatically.