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.
- 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
- 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.