Shopify On-Site Messaging — Installation Guide

Splitit's On-Site Messaging plugin provides you with customizable UI elements that you can use to inform your customers early on in their journey on your Shopify website that installments will be available at checkout. Available for you to add to your site are Strips and One Liners.

Installation

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.

Configuring the Plugin

The configuration page has multiple settings, which you can see in the image below (descriptions underneath):

1. Begin by enabling (or disabling) the app using the switch at the top of the page: Enable/Disable Splitit On-Site Messaging Plugin.

2. Next, under Payment Terminal API Key, enter your Splitit Payment Terminal API Key, which you can get from your Splitit Hub (see the dropdown below if you need helping finding it; also make sure to Save at the bottom after you enter it if you aren't changing any other configurations.)

Finding Your API Key on Your Splitit Hub

In your Hub, go to Merchants Management on the left-hand side. Click on your merchant name, then in the new window, go to Terminals on the left-hand side. Finally copy the Terminal Id you'd like to use (this is the Payment Terminal API Key). Enter your key in the field Payment Terminal API Key.

3. In the box Set the default number of payments to display in your On-Site Messages, enter the default number of payments by which you'd like to divide a product's price. For example, this will display as "4 monthly payments of $25.00" for a $100 item.

4. In the box Select the Shopify theme for which you'd like to display On-Site Messaging, choose the theme for which you'd like to display On-Site Messaging (this allows you to enable the plugin for certain themes only).

5. Define which products will show Splitit messaging on your website using the dropdown Specify which products will display On-Site Messages:

• 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.

6. In the box below, set Checkout payment method name, which is the label that will be shown for Splitit at checkout.

7. Finally, specify Checkout payment method position, which is where Splitit will appear in your list of payment options (specify a number between 1-20).

Make sure to click Save when you are finished with your configuration.

More info about checkout payment method name and position

• With respect to position, the native Shopify “credit card” stays pinned first on non-Plus US/Canada stores (a Shopify platform rule); other methods cannot move above it if you don't have Shopify Plus.
• On test/development stores, the payment position counts hidden test gateways (Bogus Gateway, Deferred, etc.) that shoppers never see, so if you choose a low number, it may resolve to the same slot as those. On a live store, the number maps directly to the shopper-visible position.
• The payment name and position are saved to a store metafield; a Shopify Function (payment customization) reads that metafield at checkout and renames/reorders the Splitit method. Because it runs on Shopify’s side, the Splitit payment app must be installed (it provides the method being reordered), and the store must have granted the write_payment_customizations scope (each merchant approves this on install/reinstall.

Choosing Your On-Site Messages

Your options for On-Site Messages include Strips and One Liners. Strips display across the top or bottom of your page and One Liners appear by the prices of individual products (e.g., "4 monthly payments of $25.00"). One Liners and Strips are configured separately for your home page, catalog page, product page, and cart page. For each page type, go to it using the dropdown icon, turn on its "Enabled" toggle, configure it, and finally save it. Refer below for more information about settings.

Strips

Strips display across the top or bottom of your page, letting your shoppers know that Splitit is an option.

Settings:

Enabled Strip - This switch allows you to turn on or off Strips for the current page type. Only one message type can be enabled for the current page type. 

Text Size - Set small, medium, or large.

Position (Strip) - Set top or bottom.

Alignment (Text) - Set left, center, or right.

Text Color - Set the color of the main text. 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 - Set 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".

The Preview button applies the changes to the message example that can be seen on the page (in the Live Preview box)

Make sure to click Save when you are finished with your configuration.

One Liners

One Liners are small messages that appear near the prices of your individual products (e.g., "4 monthly payments of $25.00"). They include an optional link to a Learn More popup.

Settings:

Enabled One Liner - This switch allows you to turn on or off One Liners for the current page type. Only one message type can be enabled for the current page type. 

Text Size - Set small, medium, or large.

Font Weight - Choose 100, 200, 400, 500, 600, 700.

Show Info Icon - Shows the (?) tooltip icon, which opens a Learn More popup.

Payment Frequency - Display calculations for monthly or biweekly payment options.

Text Option - Choose one of three built-in texts you'd like to use for your One Liner, or select Custom to use a text that you define in your Merchant Hub (Go to Merchants Management--> Select your merchant account--> Customize Plan design --> On-site messaging, where you can add one or more custom texts for the API key used in the app).

Text Color - Set the color of the main text. 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".

Custom Text - This box appears if "Custom" is set under "Text Option". Choose an option from the available.

Regular CSS Selector/Primary CSS Selector - See dropdown at bottom Configuring CSS Selectors for One Liners

Sale CSS Selector/Additional CSS Selector - See drowdown at bottom Configuring CSS Selectors for One Liners

The Preview button applies the changes to the message example that can be seen on this page (in the Live Preview box).

Make sure to click Save when you are finished with your configuration.

Configuring CSS Selectors for One Liners

One Liners are attached to your page with CSS selectors. Each page type is different:

• Catalog page - The On-Site configuration has inputs for Regular CSS Selector (required) and Sale CSS Selector (optional). The selectors must be for elements that contain a price, which the Splitit app uses to calculate the installment amounts.

• Product and Cart pages - The On-Site configuration has inputs for Primary CSS Selector (required) and Additional CSS Selector (optional). The primary selector is the anchor where the message is displayed; the additional selector is a fallback used if the primary element is missing. The selectors must contain a price.

You can use your web browser's built-in developer tools to find the selector where you want to add your One Liner. Here's how to do it:

1. Right-click on the element you want to select.

2. Click "Inspect" or "Inspect Element".

3. The developer tools will open with the selected element's HTML code highlighted.

4. Look at the highlighted code for the element's tag name, class, or ID.

5. 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".

6. Additionally, in many browsers, once the developer's console is open, you can use the element inspector to find the most appropriate element by clicking on the element inspector then running your mouse over UI elements on the page on the left (when you hover over an element, its corresponding code is highlighted in the console).

warning

Don't forget that One Liners use price information to calculate payment offers. Thus you need to pick a selector that contains a product price.

Selector Examples:

Improper Selector

An improper selector was used for the One Liner. 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

Proper selector “price-item price-item--regular” that contains the price was picked. The extension can find the price and calculate payments accurately.

tip

If a One Liner does not appear on the storefront, an empty or incorrect CSS selector is the most common cause.

Custom CSS

The On-Site Messaging CSS block lets you add custom CSS code to modify the style of your On-Site Messages.

Your CSS is added to the page <head> as a <style> block and shows up within seconds. If the field is empty, no <style> block is added.

warning

Live Preview within the One Liner and Strip settings does not apply Custom CSS, rather it renders the component using the settings from that section only. Thus when using Custom CSS, make sure to view it on your storefront itself. Also, note that Custom CSS cannot change parameters that appear in the normal settings, such as text color, size, font weight (for One Liners) and background color (for Strips).

Make sure to click Save when you are finished with your configuration.

Selectors

Use the following selectors to apply custom styles to your On-Site messages:

• spt-strip - every Strip on every page
• spt-one-liner - every One Liner on every page
• #upstream_messaging_home_strip - the wrapper of the Homepage Strip
• #upstream_messaging_catalog_strip - the wrapper of Catalog page Strip
• #upstream_messaging_product_strip - the wrapper of the Product page Strip
• #upstream_messaging_cart_strip- the wrapper of the Cart page Strip
• #upstream_messaging_product_one_liner - the wrapper of the Product page One Liner
• #upstream_messaging_cart_one_liner - the wrapper of the Cart page One Liner
• .upstream_messaging_catalog_one_liner - the wrapper of each Catalog page One Liner. This is a class, not an id, because the catalog shows one message per product card

Custom CSS Examples

Copy the examples, changing the values according to your needs.

---

1. Match the theme's header font for all Strips, uppercase with some letter spacing:

spt-strip {  
  font-family: var(--font-heading-family);  
  text-transform: uppercase;  
  letter-spacing: .08em;  
}

--font-heading-family in the example images is related to the Dawn-family themes. For another theme, use that theme's font variable or name the font directly, for example font-family: Georgia, serif;

2. Add a soft shadow to the Homepage Strip and keep it at the top of the screen while the shopper scrolls:

#upstream_messaging_home_strip {  
  position: sticky;  
  top: 0;  
  z-index: 5;  
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);  
}

If your theme's sticky header covers the Strip, raise the z-index.

Strip without the code from examples 1 and 2 applied:

Strip with examples 1 and 2 applied:

3. Product page: show the One Liner as a boxed callout:

#upstream_messaging_product_one_liner {  
  padding: 0 14px;  
  border: 1px solid rgba(0, 0, 0, .15);  
  border-radius: 8px;  
  background: #fff;  
}

The component already adds some space above and below its text, so vertical padding is not needed.

Product One Liner without Custom CSS:

Product One-Liner with example 3 applied:

4. Catalog page: Italic One Liner, moved closer to the price:

.upstream_messaging_catalog_one_liner {  
  margin-top: -10px;  
  font-style: italic;  
}

Catalog page One Liner without Custom CSS:

Catalog page One Liner with example 4 applied:

5. Hide the homepage Strip on phones:

@media (max-width: 749px) {  
  #upstream_messaging_home_strip { display: none; }  
}

749px matches the mobile breakpoint of Dawn-family themes. The same pattern works for any selector above, for example to hide the One Liner on Catalog pages on phones. To hide a message type for every screen size, turn off its Enabled toggle instead.

If your CSS has no effect:

• Check your storefront, not the Preview. As mentioned above, Live Preview ignores Custom CSS.
• Check that your message is on the page. A wrapper exists only while its component is enabled and chosen in a Display Component.
• Check the property. Text color, font size, font weight and the Strip background come only from the admin settings.
• Check the syntax. One missing } can disable every rule after it. Keep one rule per block, as in the examples.

Testing

Use unpublished themes to test your configuration. You can create a duplicate of the theme you're using, then enable the app for that theme only.

Once that is done, go to Sales Channels > Online Store > Themes, find the theme, and preview it.