Links

Shopify On-Site Messaging App

*Note: This document is only for On-Site Messaging for Splitit Shopify Users. You will also need to add the Shopify app for checkout functionality, which you can do here.

Installation

1. Go to the app's URL and select Add App (you can also search for the app within Shopify).
\
2. Select your store (you may need to login), then on the next page, click Install app. You will be taken to a configuration page.
3. Make sure the "Click to enable and disable the On-Site Messaging plugin" box is selected.
4. Find your Splitit Payment Terminal API Key, which you can get from your Splitit merchant account. In your merchant portal, go to Credentials -> Gateway Provider Credentials.
\
5. Enter your key in the field Payment Terminal API Key. (Make sure to Save at the bottom if you aren't changing any other configurations.)
6. In the next field, select the theme for which you'd like to display On-Site Messaging.
7. Next, define which products will show Splitit messaging on your website. The dropdown includes two values:
Show Splitit on All Products (recommended and the default)
or
Show Splitit Journey per product's minimum amount
If you have selected the second option, enter a minimum price for showing On-Site Messaging on a product.
8. In the next box, enter the default number of payments by which you'd like to divide a product's price.

Configuration

Splitit's On-Site Messaging banner element configurations manage where to display On-Site content on your storefront. The first column consists of pages where the content will be shown. For each page, you can specify the area to display Splitit content via configurations in the Position column and you can specify what to show in the View options column.
Home page - Location not configurable, always below the header. Displays as a strip across the top of the entire page.
Available view options are "Black-Text, Grey Background, Purple Logo", "Black-Text, Grey Background, Black Logo", "White-Text, Purple Background, White Logo", "White-Text, Black Background, White Logo", and "None".
Catalog page - Custom, enter in the HTML element to attach this to, specifying a class or id (you can attach this to a regular or a sale selector; the sale selector is for a product that has been designated as "on sale" in Shopify). The selector is optional if you select "None" for view options and required if you select one of the other choices.
Available view options are "$X per month with [logo]" (Default), "$X/month on your credit card[logo]", "No interest monthly payments on your credit card[logo]", "Pay monthly on credit card[logo]" and "None".
Product page - Display under the product's price or in a custom location (enter in the HTML element to attach this to, specifying a class or id).
Available view options are "$X per month with [logo]" (Default), "$X/month on your credit card[logo]", "No interest monthly payments on your credit card[logo]", "Pay monthly on credit card[logo]", or "None".
Cart page - Display under the cart's form or in a custom location (enter in the HTML element to attach it to, specifying a class or id).
Available view options are "$X per month with [logo]" (Default), "$X/month on your credit card[logo]", "No interest monthly payments on your credit card[logo]", "Pay monthly on credit card[logo]", or "None".
Footer page - Display in the list of payment cards (center footer) or in a custom location (enter in the HTML element to attach it to, specifying a class or id).
Available view options are "Splitit logo" or "none".
In the large empty blank at the bottom, you can further customize your Splitit On-Site Messaging blocks by adding your own CSS directives.
Once you have finished making any changes, including entering your API key and selecting your UI choices, make sure to click Save at the bottom.
Last modified 17d ago