Snippet Reference

Complete list snippet variables

SectionScenario DescriptionExamplesDefault Value
Global

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.

var clearpay_ga_enabled = false;false

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.

var clearpay_cbt_enabled = true;false

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.
var clearpay_show_currency_code = true;

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.

var clearpay_modal_responsive = false;

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.

var clearpay_modal_open_icon = true;false

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.

var clearpay_hide_range_decimals = false;

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

var clearpay_hide_upper_limit = true;

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

var clearpay_hide_lower_limit = true;false

Enable/Disable Footer Logo

clearpay_footer_logo_enabled

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

var clearpay_footer_logo_enabled = false;

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
var clearpay_footer_logo_format = 'stacked';"icon"

Customise Footer Logo Theme

clearpay_footer_logo_theme

The following options are available:

  • colour
  • color
  • black
  • white
var clearpay_footer_logo_theme = 'black';"colour"

Customise Footer Logo Background

clearpay_footer_logo_background

The following options are available:

  • border
  • transparent
var clearpay_footer_logo_background = 'transparent';"border"

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.

var clearpay_footer_logo_container = '#footer-icons';undefined

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>';

undefined

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.

var clearpay_footer_logo_css = {width:'100px',height:'auto','margin-top':'-6px'};undefined
Product Page





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.

var clearpay_product_integration_enabled = false;true

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.

var clearpay_product_logo_theme = 'white';undefined

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';

undefined

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'
};

undefined

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';
}

undefined

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';

undefined

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. 

var clearpay_variable_price_fallback_method = "interval";"mutation"
Static Cart Page





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.

var clearpay_cart_integration_enabled = false;

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.

var clearpay_cart_static_logo_theme = 'white';undefined

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';

undefined

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'
};

undefined

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';
}

undefined

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';

undefined

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.

var afterpay_variable_subtotal_fallback_method = "interval";"mutation"
Dynamic Cart Area

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.

var clearpay_cart_dynamic_integration_enabled = true;false

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.

var clearpay_cart_dynamic_logo_theme = 'white';undefined

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'
}

undefined