Integration with checkout.liquid updates

Storefront requirements

This page outlines the steps to integrate Catch on Shopify Plus storefronts with checkout.liquid enabled.

๐Ÿ“˜

If you're on a non-Plus tier of Shopify, or a Plus tier with Checkout Extensibility enabled (which disables checkout.liquid), please use our Shopify without checkout.liquid integration documentation.

Complete your account onboarding requirements

Prior to launch, you'll need to complete a few steps in order to provide Catch with information we are required to obtain from each of our customers.

๐Ÿšง

Completing the onboarding requirements doesn't block your full integration, but you must complete these steps prior to launching with Catch on your live storefront.

Implement Catch upfunnel messaging in a development theme

Add Catch messaging on upfunnel pages of a development (i.e., non-live) theme.

Typically, this entails adding Catch Callouts under the price of the item or subtotal on the Product Detail Page (PDP) and cart, but you'll want to confirm these placements for your particular site in consultation with Catch.

Catch's Live Demo illustrates the look and feel of many Catch.js features, including the Callout UI widgets.

This may be used as a reference companion alongside our Catch.js documentation.

๐Ÿšง

Please ensure that pageType is correctly specifying the type of page in which Catch.js is currently running (e.g., product, mini-cart, cart).

Install Catch's payments app

Typically, your Catch integration manager will install the Catch payments app for you, but you may also install the app yourself.

At this time, payment apps can only be activated across all themes. However, your team can install the payments app at any point without any concern that it will be live for consumers, as it will only be visible once 'activated'.

1296

โ—๏ธ

Do not activate the payments app until both teams are ready for your Catch integration manager to conduct a live test transaction.

Add styling to Catch payment option on your development theme

Update checkout.liquid to import a Catch snippet that adds Catch messaging to the checkout page for you.

This snippet will style the whole checkout page and the payment option selector to augment the basic user experience provided by the Shopify payments app.

585

Catch payment option selector without styling

1176

Checkout page styling with the 'catch-pay' snippet included checkout.liquid file

Add the confirmation page widget

Add a script to the order status page in order to show a Catch-provided UI widget on the order status page which confirms for the consumer that they paid with Catch successfully.

<script defer merchantPublicKey="<public_key_value>" src="https://js.getcatch.com/shopify.min.js"></script>
927

Select Shopify Settings icon

1848

Select Checkout & Accounts

1849

Add the script & save

Conduct QA

Your integration manager will confirm the success of the implementation by testing your upfunnel implementation and conducting a test transaction.

Follow the instructions listed here.

Go live

After coordinating a launch time and date with the Catch team, publish the changes from your development theme to a live theme.

Please persist changes related to Catch in future live themes and share the shared documentation with your developers who manage the tech stack. It's important that the Catch code continue to be reflected in future site updates to prevent breakage.

The Catch team will monitor the integration in the days following the launch as customers begin paying with Catch.

โ—๏ธ

Should you need to stop processing new orders with Catch, deactivate the payments app instead of uninstalling it.

Deactivating the app will remove it from the live site for new orders while uninstalling Catchโ€™s payments app prevents Shopify from processing refunds correctly on preexisting orders paid with Catch.

Recommended optimization

Set up an automation on Shopify Flow to tag orders paid with Catch to easily identify them in the Shopify Admin interface using our guide.

๐Ÿ“˜

Any questions?

Reach out to your technical contact at Catch or e-mail [email protected].