Shopify – Openpay Product Calculator App

Integration Guide

Objectives and Target Audience

This guide describes the process of installing and configuring the Openpay Product Calculator (Widget) App to Shopify. This app shows how Openpay is a flexible, interest-free payment method that gives the user an option to pay weekly or fortnightly, over available months.

You should have an existing Shopify Account for the website.

What is Shopify App / Widgets?

Shopify Widgets are Shopify Apps with a predefined set of configuration options. With their help, the store administrators can boost the functionality of front-end blocks. They provide great control as well as flexibility in creating informational and marketing content from the Shopify administrator panel.

Placement of the Widget

Openpay Product Calculator App is displayed on the Product Page, showing how Openpay is a flexible, interest-free payment method that gives the user an option to pay weekly or fortnightly, over available months.

Installing and Configuring Shopify Product Calculator App

Installation Steps

Click on the link above to install Openpay Product Calculator App to your Shopify store.

Enter your Shopify store name.

On submitting your valid store name, you will see a screen below.

Click on “Install Unlisted App“

Admin Setup

Navigate to Shopify Admin > Apps > Product Calculator App

To set up ‘Product Calculator App’ fill out the fields as required as per your Openpay account configuration. (This information will be provided by your Openpay Ecommerce Manager or Account Manager).

Please note a Merchant can either have Deposit Percentage or Fractional Payment.

Important note:
Check with Openpay / Ecommerce Manager if your account is configured with Deposit Percentage Plan Tiers.

Configuration for Deposit Percentage Payment

This option shows percentage deposit of the product price.

  • Product Calculator Status: Enable to activate.
  • Selector: Controls the position of the app on the product detail page. Add the CSS class or id and the app will be displayed below the specified section where the class or id is used.
  • Deposit Percentage: (normally 20 or as provided).
  • Pay of Month: Select Pay of Months (as provided by Openpay. eg 2, 3 or 4, multiple selection could be done).
  • Weekly, Fortnightly or Monthly: Check as provided by Openpay.
  • Enable Info Icon: Enable to display Openpay plan tiers as per your account settings.
  • Minimum Order Value: Enter amount (as provided).
  • Maximum Order Value: Enter amount (as provided).
  • Openpay Brand Message: This will show on products which have the price outside the minimum and maximum threshold order amount configured on your Openpay account. Brand message: Buy now, pay smarter.
  • Show Brand Message Only: Set this option to ‘Yes’, if you don’t want to display calculated price on the app. It will display Openpay message with Openpay logo and learn more text.
  • Enable Learn More: Enter text ‘Learn more’ on clicking ‘Learn more’ a popup will open explaining how to use Openpay at checkout and requirements to create an Openpay accounts.
  • Fractional Payment: Uncheck. 
  • Fractional Payment Pay of Month: Leave it blank.
  • Popup Image: A default popup is set to load. Only upload this image if provided by Openpay. Set it to ‘Yes’ and upload Popup image, specification: 500px (high) x 500px (wide).
  • Click ‘Save’.

Important note:
Check with Openpay / Ecommerce Manager if your account is configured with Fractional Plan Tiers.

Configuration for Fractional Payment

This option shows equal payment breakups of the product price.

Shopify Fractional

  • Product Calculator Status: Enable to activate.
  • Selector: Controls the position of the app on the product detail page. Add the CSS class or id and the app will be displayed below the specified section where the class or id is used.
  • Deposit Percentage: Leave it blank.
  • Pay of Month: Do not select any numbers.
  • Weekly, Fortnightly or Monthly: (Select as provided by Openpay).
  • Enable Info Icon: Uncheck.
  • Minimum Order Value: Enter amount (as provided).
  • Maximum Order Value: Enter amount (as provided).
  • Openpay Brand Message: This will show on products which have the price outside the minimum and maximum threshold order amount configured on your Openpay account. Brand message: Buy now, pay smarter.
  • Show Brand Message Only: Set this option to ‘Yes’, if you don’t want to display calculated price on the app. It will display Openpay message with Openpay logo and learn more text.
  • Enable Learn More: Enter text ‘Learn more’ on clicking ‘Learn more’ a popup will open explaining how to use Openpay at checkout and requirements to create an Openpay accounts.
  • Fractional Payment: Tick the checkbox.
  • Fractional Payment Pay of Month: Enter only one month as supplied by Openpay.
  • Weekly, Fortnightly or Monthly: (Select as provided by Openpay).
  • Popup Image: A default popup is set to load. Only upload this image if provided by Openpay. Set it to ‘Yes’ and upload Popup image, specification: 500px (high) x 500px (wide).
  • Click ‘Save’.

Frontend View

‘Product Calculator App’ with Percentage Deposit
If the module is enabled from the admin and Percentage Deposit is checked the widget will be displayed as follows on the Product Details page.

Hover on the ‘i’ icon and the calculator will be displayed as a popup.

‘Product Calculator App’ with Show Brand Message Only
If the module is enabled from the admin and Show Brand Message Only is checked the widget will be displayed as follows on the Product Details page.

‘Product Calculator App’ with Fractional Payment
If the module is enabled from the admin and Fractional payment is checked the widget will be displayed as follows on the Product Details page.

‘Learn more’ link opens a popup explaining how to use Openpay at checkout and the requirements to create an Openpay account.

Learn More - Popup

Demo Site

Shows the placement of all the Openpay widgets and assets.

Uninstallation

Note: App should be disabled before deleting as the code might stay on theme.liquid, which will then need to be manually removed.

Navigate to Shopify Admin > Apps > open Openpay Product Calculator App

Product Calculator Status > Disable

To delete the app

Shopify Admin > Apps > Openpay Product Calculator App > Delete

Version Control Table

# Date Version Description
1 September 2017 1.1 Created widget
2 July 2019 1.2 Update the widget features
3 September 2019 1.3 New feature of fractional payment added
4 January 2020 1.4 New design and features added, logo showing on min-max message