Snippet reference

Enable/Disable Google Analytics Event Tracking - DEPRECATED

clearpay_ga_enabled

Some merchants may choose to disable anonymous tracking of customer behaviour when using the Shopify-Afterpay JS solution.

Enable CBT Features

clearpay_cbt_enabled

Not all merchants have Cross-Border Trade enabled at the account level. For those that do, this variable can be added/edited to reflect the configuration of the merchant account. If set to true, the JS will use the CBT editions of the modal images for the PDP and cart integrations.

Show/Hide Currency Code

clearpay_show_currency_code

Clearpay displays the Shopify store's base currency next to the instalment amounts on product and cart pages.

This can be disabled for merchants that meet the following criteria:

• Only transacting in one currency.
• Don't have a currency-switcher plugin operating in their front-end.
• Request for the currency code to be removed.

Snippet version 1.0.2 and above, GBP currency:

false

Otherwise:

true

Enable/Disable Responsive Modal

clearpay_modal_responsive

By default, the "more info" link next to the Clearpay logo launches a popup containing a static image. The image will be one of two options, depending on the screen width at the time of clicking the link.

Snippet version 1.0.2 and above:

true

Otherwise:

false

Enable/Disable Icon

clearpay_modal_open_icon

If enabled, an "ⓘ" icon is displayed next to the Clearpay logo in place of the "more info" text. Clicking the link launches the same info modal as normal.

Hide Range Decimals

clearpay_hide_range_decimals

Since the Clearpay minimum and maximum values are predicable and usually rounded numbers, there is usually no need to show the two decimal places after the dollar amount. If desired, the decimal places can be removed with this override.

Note: Although it's likely that this override will be used to remove the period and two zeros, the script does not examine the decimal places to verify that they are zeros before stripping them.

Snippet version 1.0.2 and above:

true

Snippet version 1.0.1 and below:

false

Hide Range Upper Limit

clearpay_hide_upper_limit

Hide the upper limit from the outside limits messaging.

For example:

Clearpay available for orders over £1 Learn more

Snippet version 1.0.2 and above; using the Afterpay JS:

true

Otherwise:

false

Hide Range Lower Limit

clearpay_hide_lower_limit

Hide the lower limit from the outside limits messaging.

For example:

Clearpay available for orders up to £1000 Learn more

Enable/Disable Footer Logo

clearpay_footer_logo_enabled

Render a Clearpay logo in the footer next to the other payment methods.

Snippet version 1.0.5 and above:

true

Otherwise:

false

Customise Footer Logo Format

clearpay_footer_logo_format

The following options are available:

• icon
• stacked
• logo

Customise Footer Logo Theme

clearpay_footer_logo_theme

The following options are available:

• colour
• color
• black
• white

Customise Footer Logo Background

clearpay_footer_logo_background

The following options are available:

• border
• transparent

Change Footer Logo Selector

clearpay_footer_logo_container

Clearpay normally determines the container selector automatically, through a series of search passes. If it cannot find a match, or the placement of the Clearpay elements needs to be changed, this override can be used.

Change Footer Logo Template

clearpay_footer_logo_template

Clearpay normally determines the logo markup template automatically, through a series of search passes. If it cannot find a match, or the placement of the Clearpay elements needs to be changed, this override can be used.

var clearpay_footer_logo_template = '<li class=""><img class="" src="{logo_path}" alt="Clearpay" /></li>';

var clearpay_footer_logo_template = '<li class=""><object class="" data="{logo_path}" type="image/svg+xml"></object></li>';

Change Footer Logo CSS

clearpay_footer_logo_css

Clearpay footer logo normally inherits styling of other payment icons by applying the their class names. In case the styling needs to be changed, this override can be used.

Enable/Disable Clearpay Instalment Message

clearpay_product_integration_enabled

Most merchants want to see Clearpay calculations on their product pages. Some don't. This override controls whether or not the Clearpay elements will appear on the individual product pages.

Logo Theme

clearpay_product_logo_theme

This override allows the theme of only this specific placement of the Clearpay logo to be different from the theme globally defined in clearpay_logo_theme.

Change Price Selector

clearpay_product_selector

Clearpay normally determines the product selector automatically, through a series of search passes. If it cannot find a match, or the placement of the Clearpay elements needs to be changed, this override can be used.

If this is defined, the Clearpay paragraph will be injected after this element. It should be the closest block element that wraps the price.

var clearpay_product_selector = '#product-price-selector';

Custom CSS

clearpay_product_css

The CSS of the Clearpay paragraph (the p tag) used on individual product pages can be customised with this override.

var clearpay_product_css = {
'margin-top': '15px'
};

Different Price Selector for Desktop and Mobile

clearpay_product_selector

Sometimes, the theme uses different markup for desktop versus mobile, and the Clearpay elements may therefore not appear at the correct location in both views. If this is the case, use JavaScript to define a different value of the override depending on the screen size.

Change the window.innerWidth based on the website.

if ( window.innerWidth > 800 ) {
var clearpay_product_selector = '.product-meta--desktop .product-meta__prices';
} else {
var clearpay_product_selector = '.product-meta--mobile .product-meta__prices';
}

Variable Price Fallback

clearpay_variable_price_fallback_selector

In some cases, variant selection does not trigger a change event on the cart form. In other cases, an event does trigger, but Clearpay is unable to identify the price of the selected variant based on the data available.

In any of these or similar cases, an override can be applied to extract the product price from a specified element on the page. It does this on DOM mutation events, or failing that, on a timed interval.

Unlike the Price Selector, the Variable Price Fallback Selector should be the innermost element containing the actual currency-formatted price.

var clearpay_variable_price_fallback_selector = '#product-price-selector';

Variable Price Fallback Method

clearpay_variable_price_fallback_method

Can be "mutation" or "interval". The default is "mutation". In some cases, the watched element (or one of its ancestors) is completely destroyed and replaced when the price is updated. This renders the mutation observer ineffective. In these cases, the interval method can be used. Although it is inefficient and can be noticeably delayed, the interval method is dependable. 

Enable/Disable Clearpay Instalment Message

clearpay_cart_integration_enabled

Some merchants want to see Clearpay calculations on their cart page. Others don't. This override controls whether or not the Clearpay elements will appear on the cart page.

true

Logo Theme

clearpay_cart_static_logo_theme

This override allows the theme of only this specific placement of the Clearpay logo to be different from the theme globally defined in clearpay_logo_theme.

Change Subtotal Selector

clearpay_cart_static_selector

Clearpay normally determines the cart subtotal selector automatically, through a series of search passes. If it cannot find a match, or the placement of the Clearpay elements needs to be changed, this override can be used.

If this is defined, the Clearpay paragraph will be injected after this element. It should be the closest block element that wraps the subtotal.

var clearpay_cart_static_selector = '#cart-subtotal-selector';

Custom CSS

clearpay_cart_static_css

The CSS of the Clearpay paragraph (the p tag) rendered on the static cart page can be customised with this override.

var clearpay_cart_static_css = {
'margin-top': '15px'
};

Different Subtotal Selector for Desktop and Mobile

clearpay_cart_static_selector

Just like on the product pages, sometimes the theme uses different markup for desktop versus mobile, and the Clearpay elements may therefore not appear at the correct location in both views of the cart page. If this is the case, use JavaScript to define a different value of the override depending on the screen size.

Change the window.innerWidth based on the website.

if ( window.innerWidth > 800 ) {
var clearpay_cart_static_selector = '.cart__recap--desktop .cart__total:first';
} else {
var clearpay_cart_static_selector = '.cart__meta--mobile .cart__total:first';
}

Variable Subtotal Fallback

clearpay_variable_subtotal_fallback_selector

In some cases, the Clearpay instalment calculation does not update when the subtotal changes. An override can be applied to extract the subtotal from a specified element on the page. It does this on DOM mutation events, or failing that, on a timed interval.

Unlike the Subtotal Selector, the Variable Subtotal Fallback Selector should be the innermost element containing the actual currency-formatted subtotal.

var clearpay_variable_subtotal_fallback_selector = '#cart-subtotal-selector';

Variable Subtotal Fallback Method

clearpay_variable_subtotal_fallback_method

Can be "mutation" or "interval". The default is "mutation". In some cases, the watched element (or one of its ancestors) is completely destroyed and replaced when the subtotal is updated. This renders the mutation observer ineffective. In these cases, the interval method can be used. Although it is inefficient and can be noticeably delayed, the interval method is dependable.

Enable/Disable Clearpay Instalment Message

clearpay_cart_dynamic_integration_enabled

Some merchants want to see Clearpay calculations on their dynamic cart area. Others don't. Also, due to the complexity of the dynamic cart area, there is a higher likelihood of unexpected or unintended behaviour. This override controls whether or not the Clearpay elements will appear on the dynamic cart area.

Logo Theme

clearpay_cart_dynamic_logo_theme

This override allows the theme of only this specific placement of the Clearpay logo to be different from the theme globally defined in clearpay_logo_theme.

Custom CSS

clearpay_cart_dynamic_css

Where the Clearpay elements appear inside a dynamic cart area, the CSS of the Clearpay paragraph (the p tag) can be customised with this override.

var clearpay_cart_dynamic_css = {
'margin-top': '15px'
}