Cookie Consent by Free Privacy Policy Generator Update cookies preferences
GuidesAPI Reference
Guides

Manually Add Clearpay Site Messaging to Theme

How can I add Clearpay Site Messaging to my Shopify product and cart pages?

The Clearpay Code Snippet allows you, the merchant, to manually add Clearpay messaging to the product and cart pages. You do this by copy-pasting a code snippet into your Shopify liquid template file. This is a short procedure that consists of a few steps.

This page shows you how to do the following:

Configuration

Do the following to position the Clearpay site messaging onto the product and cart pages of your Shopify website:

  1. Copy the code below to your clipboard, a Copy to Clipboard icon in the top right corner makes this easy.
<!-- 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) -->

  1. Login to Shopify Admin

  2. Navigate to Themes. To do this, go to Sales channels > Online Store > Themes.

    shopify-ap-site-mess-1.png

  3. Navigate to the current theme, then go to Actions > edit code.

    shop-ap-site-mess-2.png

  4. Under the Layout folder, click theme.liquid.
    step5.png

  5. Scroll to the bottom of the theme.liquid file:

step5.png
  1. Paste the copied text (Step 1), at the bottom of the theme.liquid file:
  2. Click Save, and go to the website to review the product and cart pages for Afterpay assets.

📘

Note

Shopify have a help topic on editing Liquid files here.

Add a Clearpay Banner to Shopify

To add a Clearpay Banner to your Shopify page, see the Add a Clearpay Banner to Shopify page.

Add messaging to the dynamic or drawer cart

To add messaging to the dynamic or drawer cart, do the following:

  1. Follow all the Configuration steps above from step 1 to step 8.

  2. Navigate to your theme.liquid file.

  3. Find the required selector on the drawer cart.

  4. Add the selector to the code and enable the dynamic cart integration.

Example Code snippet for Clearpay


// var clearpay_dynamic_cart_integration_enabled = true;

// var clearpay_dynamic_cart_selector = '.cart-drawer__footer .totals';

// var clearpay_dynamic_cart_observer_target = '#CartDrawer';

Example of code with selectors

var clearpay_dynamic_cart_integration_enabled = true;
var clearrpay_dynamic_cart_selector = '.total';
var clearpay_dynamic_cart_observer_target = '#CartDrawer';

Updated 5 months ago