Catch Messaging for Shopify

Add Catch messaging to PDP, Cart, and Checkout

🚧

You'll need to complete the onboarding requirements to go live with Catch. If you haven't started that process, reach out to [email protected] to get started.

Summary

This page shares starter code snippets for using Catch's JavaScript SDK (Catch.js) to add Catch messaging to your PDP, Cart, and Mini Cart in Shopify. The initialization script provided is connected to our Live environment.

Catch Environments

Catch has two environments: Live and Sandbox. You can learn more about these environments here and learn more about Sandbox testing here. Typically our Shopify partners skip over using Sandbox unless they have a dedicated staging storefront. Please reach out to your integration manager if you will need a set of Sandbox-enabled credentials.

Create new snippets

Considerations for customizing starter snippets

• Confirm the widget is price reactive:
  • The benefit text should calculate the earnings potential for the product price shown. If you are seeing a percentage based offer, you may need to adjust the value provided in the price attribute.
  • The benefit text should dynamically respond to changes in price based on quantity or product variation selected. For carts, this includes adding or removing an item.
• There are other border styles and an or-prefix option available, if desired. (demo)
• You may need to add additional styles to the style attribute based on the needs of your layout.
• Ensure that the page-type value of a given widget is reflective of the page it's rendered on.

catch-callout-product.liquid

Create new snippet called catch-callout-product.liquid:

<catch-callout
  theme="light-color"
  price="{{ product.selected_or_first_available_variant.price | money_without_currency | times: 100 | ceil }}"
  page-type="product"
  border-style="none-no-padding"
  style="font-family: inherit;">
</catch-callout>

catch-callout-cart.liquid

Create new snippet called catch-callout-cart.liquid:

<catch-callout
  theme="light-color"
  price="{{ cart.total_price | money_without_currency | times: 100 | ceil }}"
  page-type="cart"
  border-style="none-no-padding"
  style="font-family: inherit;">
</catch-callout>

catch-callout-mini-cart.liquid

Create new snippet called catch-callout-mini-cart.liquid:

<catch-callout
  theme="light-color"
  price="{{ cart.total_price | money_without_currency | times: 100 | ceil }}"
  page-type="mini-cart"
  border-style="none-no-padding"
  style="font-family: inherit;">
</catch-callout>

Edit existing files

theme.liquid

Import and initialize Catch.js at the bottom of your theme.liquid file as shown below. Replace the public_key_value with the API key provided by your integration manager.

  <script src="https://js.getcatch.com/catchjs/v1/catch.js"></script>
      <script>
        catchjs.init("public_key_value", {});
      </script>

  
</body>
</html>

File rendering PDP

We recommend placing Catch messaging near the price or add to cart button.

{% render 'catch-callout-product' %}

File rendering Cart

We recommend placing Catch messaging directly above the checkout button.

{% render 'catch-callout-cart' %}

File rendering Mini Cart

We recommend placing Catch messaging directly above the checkout button.

 {% render 'catch-callout-mini-cart' %}

Customize Catch at checkout

With checkout.liquid

If you are using checkout.liquid to style checkout, follow these instructions to create and import catch-pay.liquid. This file will customize the look of the Catch payment method option and will add checkout page callouts below the express payment methods and below the promo code box.

Without checkout.liquid

Shopify Plus partners can still enable checkout callouts via our General App.

QA

Share a link to your staged changes with your integration manager for QA.

Go Live

We'll need to enable Catch as a payment method at checkout before you release these theme changes. Your integration manager will guide you through this process after all onboarding requirements have been completed.