Shopify – Openpay Widget App

Integration Guide

Objectives and Target Audience

This guide describes the process of installing and configuring the Openpay Widget App to Shopify. 

This app explains how Openpay is a flexible, interest-free payment method. It showcases the minimum and maximum order value, allowing the user to choose an option to pay weekly or fortnightly, over available months.

You should have an existing Shopify website to install Openpay Widget App.

What is Shopify App / Widgets?

Shopify Widgets are Shopify Apps with a predefined set of configuration options. 

Placement of the Widgets

Openpay Widget App is a set of widgets, when installed and activated will show the widgets on the following pages:

  • Info Belt – Top section of the HomePage
  • Product Catalog / Listing Page
  • Product Detail Page
  • Cart Page

Installing and Configuring Openpay Widget App on Shopify

Installation Steps

Click on the link below to install Openpay Widget App to your Shopify store.

Install Shopify Openpay Widget App

Enter your Shopify store name > Install Unlisted App

Openpay Shopify App

Admin Setup

Navigate to Shopify Admin > Apps > Openpay Widgets

To set up ‘Openpay Widgets’ 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.)

Important note:
Check with Openpay / Ecommerce Manager for your Plan Tier configuration.

Shopify Openpay App Configuration

Configuring Openpay Widget App

 

Openpay Widget Status ‘Enable’ to activate
Minimum Order Value Enter amount (as provided)
Maximum Order Value Enter amount (as provided)
Region Select Australia or United Kingdom (as per your contract)
Currency Select your store currency
Plan Tiers Select months (as provided by Openpay. eg 2, 3 or 4, multiple selection could be done)
Show Info Belt Widget There are two options to display the Info Belt on top of the website head section.
Home Page or Across the Site. Select your preferred option from the dropdown
Info Belt Widget Color Select an option from ‘Amber’, ‘Grey’ or ‘White’, one that suits your website theme
Info Belt Widget Sticky If your website theme has a sticky menu select ‘Yes’ else select ‘No’
Show Catalog Page Widget Tick the checkbox to show Catalog Page Widget on the product listing/catalog page of the website
Catalog Page Selector Controls the position of the Catalog Page Widget on the product listing/catalog page. Add the CSS ‘class’ or ‘id’ and the widget will be displayed below the specified section where the ‘class’ or ‘id’ is used
Show Openpay Logo on Catalog Widget Tick the checkbox to show Openpay logo on Catalog Page Widget for the product listing/catalog page of the website
Show Product Page Widget Tick the checkbox to show Product Page Widget on the product detail page of the website
Product Page Selector Controls the position of the Product Page Widget on the product detail page. Add the CSS ‘class’ or ‘id’ and the widget will be displayed below the specified section where the ‘class’ or ‘id’ is used
Show Cart Widget Tick the checkbox to show Cart Widget on the cart page of the website
Cart Page Selector Controls the position of the widget on the Cart page. Add the CSS ‘class’ or ‘id’ and the widget will be displayed below the specified section where the ‘class’ or ‘id’ is used
  Click ‘Save’

 

Frontend View of Openpay Widgets

If the module is enabled from the admin with the correct setting the widgets will be displayed as follows on the different sections of the website.

Info Belt Widget

Displayed on top of the homepage above the navigation.

Info Belt Widget

 


Catalog Page Widget

Displayed on Product Listing/Catalog Page.

Product Catalog / Listing Page

 


Product Page Widget

Displayed on Product Detail Page.

Product Page Widget

 


Cart Page Widget

Displayed on Cart Page.

Cart Page Widget

 


Learn More – Popup

All ‘Learn more’ links will open a popup as follows indicating the available repayment months and explaining what you need to get started to use Openpay.

Learn More - Pop up

Assets

The next step is to add the assets, Landing Page, Quick Links, Trust Logo, and Banners.

Landing Page

Create a new page > add Openpay HTML tag

Paste the code below on your page just like any other HTML element for Openpay Landing Page content.

<opy-landing-page></opy-landing-page>

Trust Seal

Add the Openpay trust seal under the “Available Payment Methods” section on the footer.

Download the trust seal from here.

Example of how Openpay Landing Page, Quick Link and Trust Seal will be showcased.

Assets - Landing Page, Quick Link and Trust Seal

Banners / Style Guide

The entire suite of digital banners can be found here.

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 Widget App

Product Calculator Status > Disable

To delete the app

Shopify Admin > Apps > Openpay Widget App > Delete

Version Control Table

# Date Version Description
1 September 2020 1.0 Created new all in one widget