.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
Installation
Before beginning your Shopify installation, make sure you have signed up for a production Splitit account:
1. Log into your Splitit merchant admin (if you aren't already logged in) using either your credentials or Google OAuth.
Click Add app and then select your Shopify store (if applicable).
3. On the next screen (after you are in your store's admin), click Install app:
4. You will be directed to another screen in the Shopify portal where you will need to select your merchant account, then your terminal in the box that appears (you can also change your order number configuration here and select an order tagging strategy):
Click Save Changes to get a success message:
5. Click on the button that appears: Next step: Activate Splitit in Shopify payment settings:
(Note that this button takes you to the URL {yourstore.myshopify.com}/admin/settings/payments/alternative-providers/1057713).
6. On the next screen, select the cards you would like to accept, leave Enable test mode unchecked, and then click Activate Splitit:
7. Splitit Checkout is now activated in your store. (Shopify Plus users click here for additional installation steps.)
8. Proceed to the section below to add On-Site Messaging.
1. Go to the On-Site Messaging app's URL and select Add App (you can also search for the app within Shopify).
2. Select your store (login if necessary), then on the next page, click Install app. You will be taken to a configuration page.
3. On the next screen, (Configuration) select the "Click to enable and disable the On-Site Messaging plugin" box.
4. Find your Splitit Payment Terminal API Key, which you can get from your Splitit merchant portal. In your merchant portal, go to Credentials -> Gateway Provider Credentials. 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.)
5. In the next field, select the theme for which you'd like to display On-Site Messaging.
6. 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.
7. In the next box, enter the default number of payments by which you'd like to divide a product's price.
8. 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".
9. In the large empty blank at the bottom, you can further customize your Splitit On-Site Messaging blocks by adding your own CSS directives.
10. 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 2mo ago