Shopify
Introduction
Adding Splitit payments to your Shopify store will let your customers use their existing credit cards to pay for items with interest-free monthly installments. Splitit is added using Shopify apps and a new payment method, and it functions by providing your users a Splitit form for checkout.
Checkout Flow
The shopper begins by selecting Splitit as a payment option:
The shopper then uses a Splitit checkout form to complete their order:
About On-Site Messaging for Shopify
In addition to Shopify checkout, you can add installments messaging throughout your Shopify site so that your shoppers are made aware early in their experience that they will have the option to pay in installments at checkout.
On-Site messages include a Learn more link, which displays information about potential plans in a popup:
Installation
Before beginning your Shopify installation, make sure you have signed up for a production Splitit account.
Add Splitit Checkout
1. Log into your Splitit merchant admin (if you aren't already logged in) using either your credentials or Google OAuth.
2. Proceed to the Splitit app's page on Shopify.
Click Install (if you are already logged into your Shopify account), or click Log in to Install, then select your Shopify account.
3. On the next screen (in your store's admin), click Install:
4. You will be directed to another screen in the Shopify portal where you will need to choose your merchant account, then your terminal. Finally click Save Changes.
You will get a success message:
5. Click on the bar that appears above : Next step: Activate Splitit in Shopify payment settings:
(Note that this bar 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:
7. Splitit Checkout is now activated in your store.
8. Proceed to the section below to add On-Site Messaging.
Add On-Site Messaging
Installation and Configuration
1. Go to the On-Site Messaging app's URL. Click Install (if you are already logged into your Shopify account), or click Log in to Install, then select your Shopify account.
2. On the next page, click Install.
You will be taken to a configuration page.
3. Enable and disable the app and/or enable/disable Visa Installments (uncommon, most should leave disabled) using the switches at the top of the page.
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 box, enter the default number of payments by which you'd like to divide a product's price.
6. In the box after that, select the theme for which you'd like to display On-Site Messaging (this allows you to enable the plugin for certain themes only).
7. Finally, define which products will show Splitit messaging on your website.
-
Show Splitit on All Products is recommended and the default
-
Show Splitit Customer Journey per product's minimum amount lets you set a minimum product price for On-Site Messaging. If you select this, enter a minimum product amount.
Page Settings
You can configure On-Site Messaging separately for your home page, catalog page, product page, and cart page, and thus each of these pages has a section where you can choose from strips, banners, logos and one liners. Refer below for information about customizing the individual elements. (You can see what each does in your Shopify admin by changing it then clicking Preview.)
Strips
Enabled Strip/Disabled Strip - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
Selection of Texts - Default: The strip uses the default message. Other: Allows you to enter your own message.
Button Text - Changes "Learn More" button text
Font Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Position - The strip can be positioned on the page's top or bottom.
Text Alignment - The text can be centered or located at the left or right edges of the strip.
Background Color - The color of the strip. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Text Strip Color - The color of the main text
Background Button Color - The color of the button that contains the “Learn More” link. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Text Button Color - The “Learn More” link text color. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Hide Learn More - This switch enables or disables the “Learn More” button.
Button Reverse Icon - This switch changes the order of the Splitit logo and text “Learn More” on the link.
The Preview button applies the changes to the message example that can be seen on this page.
Banners
Enabled Banner/Disabled Banner - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
CSS Selector - This option is needed to help the plugin identify where the banner should be. Examples: ".yourClassName" or "#yourId"
Show Title - Setting to display small text at upper-left of banner
Text Title - Content of title, the small text at upper-left of banner
Text Title Size - Font size for title, the small text at upper-left of banner. Default value is in pixels, but you can specify other measurements, like percentages.
Text Title Color - Color of title, the small text at upper-left of banner. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Text Main - Default: The banner uses the default message. Other: Allows you to enter your own message.
Text Main Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Text Main Color - The color of the text on the banner. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Banner Size - Width and Height - You can enter the overall banner size. Default value is in pixels, but you can specify other measurements, like percentages.
Banner Background Color - The color of the strip. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Background Button Color - The color of the button that contains the “Learn More” link. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Text Button Color - The “Learn More” link text color. It can be selected by color picking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Button Reverse Icon - This switch changes the order of the Splitit logo and text “Learn More” on the link.
Hide Icon - Hide icon on "Learn More" button
The Preview button applies the changes to the message example that can be seen on this page.
Logos
Enabled Logo/Disabled Logo - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
Regular CSS Selector - This option is needed to help the plugin identify where the logo should be for regular products. Examples: ".yourClassName" or "#yourId"
Sale CSS Selector - This option is needed to help the plugin identify where the logo should be for the products identified as “Sale Products." Examples: ".yourClassName" or "#yourId"
Logo Text - None - The text near the logo is absent. Other - Allows you to enter your own message.
Hide Tooltip - This switch disables the tooltip, which by default shows up when a customer moves the mouse over the logo.
Tooltip Text - An option that allows setting custom text for the tooltip, which by default shows up when a customer moves the mouse over the logo.
Font Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Docking - The relative position of the logo.
Logo Color - The color of the logo. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Background Color - The color of the small square area around the logo. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Hide Learn More - The switch enables or disables the “Learn More” link in the tooltip.
The Preview button applies the changes to the message example that can be seen on this page.
One Liners
Enabled One Liner/Disabled One Liner - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
Regular CSS Selector - This option is needed to help the plugin identify where the one liner should be for regular products. You need to enter the selector for the element that contains the product price. Examples: ".yourClassName" or "#yourId"
Sale CSS Selector - This option is needed to help the plugin identify where the one liner should be for the products identified as “Sale Products”. You need to enter the selector for the element that contains the product price. Examples: ".yourClassName" or "#yourId"
Text Option - A parameter that allows configuring text for the One Liner. Four built-in options are available, but you can also configure your own text.
Font Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Hide Learn More - This switch enables or disables the “Learn More” link. The Splitit logo stays visible.
Learn More Color - The color of the "Learn More" link. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Hide Icon - This switch hides the Splitit logo. The “Learn More” link stays visible.
Logo Color - Color of logo next to "Learn More"
The Preview button applies the changes to the message example that can be seen on this page.
Configuring CSS Selectors
As you learned in Page Settings above, in some cases the app requires that you use CSS selectors to specify proper locations for your On-Site Messages. To place the On-Site Message in the proper location, you must fill in the corresponding field. Below are some tips for finding these selectors.
How to Find and Use Selectors in the App
You can use your web browser's built-in developer tools to find the selector for the element you want to add your element to. Here's how to do it:
Right-click on the element you want to select.
Click "Inspect" or "Inspect Element".
The developer tools will open with the selected element's HTML code highlighted.
Look at the highlighted code for the element's tag name, class, or ID.
Use the corresponding CSS selector syntax to select the element in the extension. For example, if the element has a class of "my-class", use the selector ".my-class".
Also, in many browsers, once the developers' console is open you may use the element inspector to find the most appropriate element.
Once you have the selector for the element, you can enter it into the corresponding field in the extension's settings to position the On-Site Message on the webpage.
It is important to remember that Logos and One Liners use the price information to calculate the payment offers. So, for those elements you have to pick the selector that contains the product price.
Selector Examples:
Improper selector was used for logo. This HTML element contains a lot of other elements inside, so the extension read some unrelated data instead of the price and thus is providing an incorrect payments calculation.
Proper selector “price-item price-item--regular” that contains the price was picked. The extension can find the price and calculate payments accurately.
Custom CSS
The last configurable section block is On-Site Messaging CSS. It allows you to add custom CSS code to modify the styles of the On-Site Messages. Make sure to click Save once you are finished on this page.
Testing
Use unpublished themes to test your configuration. You can create a duplicate of the theme you're using, then enable the app for this theme only.
Once that is done, go to Sales Channels > Online Store > Themes, find the theme and preview it.
Shopify Admin Order Management
Note that all order management for Splitit plans originating in Shopify should be done in Shopify, not in your Splitit Merchant Portal.
Refunds
Partial and Full Refunds
1. In your Shopify admin, go to Orders then click on the order you wish to refund.
2. Click Refund along the top right of the order (it will only appear if applicable).
3. Under Refund Amount, enter the amount you’d like to refund:
You can also decide whether to refund shipping or not and can add a reason for refunding:
Finally, click Refund to put the refund through.
4. You will see the amount refunded in your Splitit merchant admin and will see the status updated in your Shopify order list.
Note that refunds are applied using the default Splitit strategy, which is to subtract from a user's future obligations before returning funds to a user's card.
Canceling an Order
Orders that have been created without funds captured can be canceled.
1. In your Shopify store's admin, go to Orders then click on the order you wish to cancel.
2. Click More actions along the top right, then Cancel order from the dropdown:
3. In the popup, select the reason for cancelation, enter an optional staff note, decide whether to restock inventory, and whether to send a notification to the customer, then click Cancel order:
4. In your Splitit merchant admin, you will be able to verify that the plan was successfully cancelled by looking at the list under Transactions, in the Status column:
