> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.clearpay.co.uk/_mcp/server.

# Manually Add Clearpay Site Messaging to Theme

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](#configuration)

* [Add a Clearpay Banner to Shopify](#add-a-clearpay-banner-to-shopify)

* [Add Messaging to the Dynamic or Drawer Cart](#add-messaging-to-the-dynamic-or-drawer-cart)

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

**`JavaScript`**

```javascript JavaScript
<!-- 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) -->
```

2. Login to [Shopify Admin](https://accounts.shopify.com/lookup?rid=edf4fd64-060c-48a7-bf95-095eb87b831c)

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

![step3.png](/_fern-img/4a29bedc257186b6f9ea67c12b41d6244f63f9d4b38ca21dc19bbf767c9f5665.webp)

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

![step4.png](/_fern-img/e4707e4d91216797fb5f4dd315e7361439e9b0bbeb23daa9ab295123885f5575.webp)

5. Under the **Layout** folder, click **theme.liquid**.
   ![step5.png](/_fern-img/31afcbb603f0a90225311af4af139d38e11ca4216477123f167115ba1e903471.webp)
6. Scroll to the bottom of the `theme.liquid` file:

![step5.png](/_fern-img/bc7218f99b34a7d79a5040ff56eb98cefa3ed16d172d63321825d99043a447ad.webp)

7. Paste the copied text (Step 1), at the bottom of the `theme.liquid` file:

8. Click **Save**, and go to the website to review the product and cart pages for Clearpay assets.

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

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

11. Select **Save** to apply your changes. The updated selectors will take effect immediately.

> **Note**
>
> Shopify have a help topic on editing Liquid files [here](https://shopify.dev/docs/api/liquid).

## Add a Clearpay Banner to Shopify

To add a Clearpay Banner to your Shopify page, see the [Add a Clearpay Banner to Shopify](/add-a-clearpay-banner) 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](#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

```js

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

```js
var clearpay_dynamic_cart_integration_enabled = true;
var clearpay_dynamic_cart_selector = '.total';
var clearpay_dynamic_cart_observer_target = '#CartDrawer';
```