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.

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

Shopify Plus partners who have migrated to extensibility can still enable checkout callouts via our General App.

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.