Adding Clearpay site messaging

Site messaging means making your customers aware of the Clearpay payment method on the product and shopping cart pages of your Shopify website.

Complete these steps to place Clearpay visual assets on the product and cart pages of your Shopify website:

In your Shopify Admin page, navigate to Sales Channels > Online Store > Themes.
Click the Actions dropdown, then click Edit Code.
Under Layout, click theme.liquid.
Click the Copy to Clipboard icon to copy the javascript code below.

<!-- Begin Shopify-Clearpay JavaScript Snippet (v1.2.1) -->
{% if cart.currency.iso_code == shop.currency %}
<script type="text/javascript">
// Overrides:
// var clearpay_msg_size = 'sm';  // Can be 'xs', 'sm', 'md' or 'lg'.
// var clearpay_bold_amount = true;
// var clearpay_logo_theme = 'colour';  // Can be 'colour', 'black' or 'white'.
// var clearpay_modal_open_icon = true;
// var clearpay_hide_upper_limit = false;
// var clearpay_hide_lower_limit = true;
// var clearpay_show_if_outside_limits = true;
// var clearpay_product_integration_enabled = true;
// var clearpay_product_selector = '#product-price-selector';
// var clearpay_variable_price_fallback = false;
// var clearpay_variable_price_fallback_selector = '';
// var clearpay_variable_price_fallback_method = 'mutation';  // Can be 'mutation' or 'interval'.
// var clearpay_cart_integration_enabled = true;
// var clearpay_cart_static_selector = '#cart-subtotal-selector';
// var clearpay_variable_subtotal_fallback = false;
// var clearpay_variable_subtotal_fallback_selector = '';
// var clearpay_variable_subtotal_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
// var clearpay_dynamic_cart_integration_enabled = false;
// var clearpay_dynamic_cart_selector = '.cart-drawer__footer .totals';
// var clearpay_dynamic_cart_observer_target = '#CartDrawer';
// var clearpay_footer_logo_enabled = true;
// var clearpay_footer_logo_format = 'icon';  // Can be 'icon', 'stacked' or 'logo'.
// var clearpay_footer_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var clearpay_footer_logo_background = 'border';  // Can be 'border' or 'transparent'.
// var clearpay_footer_logo_container = 'footer ul.payment-icons';
// var clearpay_footer_logo_template = '<li class="payment-icon"><object data="{logo_path}" type="image/svg+xml"></object></li>';
// Non-editable fields:
var clearpay_js_language = {{ localization.language.iso_code | slice: 0, 2 | json }};
var clearpay_js_country = {{ localization.country.iso_code | json }};
var clearpay_shop_currency = {{ shop.currency | json }};
var clearpay_cart_currency = {{ cart.currency.iso_code | json }};
var clearpay_shop_money_format = {{ shop.money_format | json }};
var clearpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var clearpay_theme_name = {{ theme.name | json }};
var clearpay_product = {{ product | json }};
var clearpay_product_collections = {{ product.collections | map: 'title' | join: ',' | json }};
var clearpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var clearpay_cart_total_price = {{ cart.total_price | json }};
var clearpay_cart_skus = {{cart.items | map: 'sku' | join: ',' | json }};
var clearpay_cart_collections = {{cart.items | map: 'product' | map: 'collections' | map: 'title' | uniq | join: ',' | json }};
var clearpay_js_snippet_version = '1.2.1';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-clearpay-javascript.js"></script>
{% else %}
<!-- Clearpay disabled: {{ cart.currency.iso_code }} != {{ shop.currency }} -->
{% endif %}
<!-- End Shopify-Clearpay JavaScript Snippet (v1.2.1) -->

Scroll to the bottom of the theme.liquid file and click to set the cursor to the line below </html>.

Paste the copied text to the bottom line of the file.
Click Save.
If the Clearpay messaging does not appear in your desired location, update the selectors within the script to match your theme. For the Product Page, update the selectors on lines 14–16. For the Cart Page, update the selectors on lines 20–23.
The product selector and cart static selector control the positioning of the Clearpay messaging. If required, uncomment lines 15 and 21, set the fallback option to true, and update the fallback selectors to target the product page and cart page price elements.
Select Save to apply your changes. The updated selectors will take effect immediately.

Sliding cart messaging option

To show the messaging in the sliding cart, you must uncomment the line // var clearpay_dynamic_cart_integration_enabled and explicitly set it to true, for example, var clearpay_dynamic_cart_integration_enabled = true; and provide a valid clearpay_dynamic_cart_selector.