Manually Add Afterpay Site Messaging to Theme

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


The Afterpay Code Snippet allows you, the merchant, to manually add Afterpay 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 Afterpay 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.
1<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.2.1) -->
2{% if cart.currency.iso_code == shop.currency %}
3<script type="text/javascript">
4// Overrides:
5// var afterpay_msg_size = 'sm'; // Can be 'xs', 'sm', 'md' or 'lg'.
6// var afterpay_bold_amount = true;
7// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
8// var afterpay_modal_open_icon = true;
9// var afterpay_hide_upper_limit = false;
10// var afterpay_hide_lower_limit = true;
11// var afterpay_show_if_outside_limits = true;
12
13// var afterpay_product_integration_enabled = true;
14// var afterpay_product_selector = '#product-price-selector';
15// var afterpay_variable_price_fallback = false;
16// var afterpay_variable_price_fallback_selector = '';
17// var afterpay_variable_price_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
18
19// var afterpay_cart_integration_enabled = true;
20// var afterpay_cart_static_selector = '#cart-subtotal-selector';
21// var afterpay_variable_subtotal_fallback = false;
22// var afterpay_variable_subtotal_fallback_selector = '';
23// var afterpay_variable_subtotal_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
24
25// var afterpay_dynamic_cart_integration_enabled = false;
26// var afterpay_dynamic_cart_selector = '.cart-drawer__footer .totals';
27// var afterpay_dynamic_cart_observer_target = '#CartDrawer';
28
29// var afterpay_footer_logo_enabled = true;
30// var afterpay_footer_logo_format = 'icon'; // Can be 'icon', 'stacked' or 'logo'.
31// var afterpay_footer_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
32// var afterpay_footer_logo_background = 'border'; // Can be 'border' or 'transparent'.
33// var afterpay_footer_logo_container = 'footer ul.payment-icons';
34// var afterpay_footer_logo_template = '<li class="payment-icon"><object data="{logo_path}" type="image/svg+xml"></object></li>';
35
36// Non-editable fields:
37var afterpay_js_language = {{ localization.language.iso_code | slice: 0, 2 | json }};
38var afterpay_js_country = {{ localization.country.iso_code | json }};
39var afterpay_shop_currency = {{ shop.currency | json }};
40var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
41var afterpay_shop_money_format = {{ shop.money_format | json }};
42var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
43var afterpay_theme_name = {{ theme.name | json }};
44var afterpay_product = {{ product | json }};
45var afterpay_product_collections = {{ product.collections | map: 'title' | join: ',' | json }};
46var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
47var afterpay_cart_total_price = {{ cart.total_price | json }};
48var afterpay_cart_skus = {{cart.items | map: 'sku' | join: ',' | json }};
49var afterpay_cart_collections = {{cart.items | map: 'product' | map: 'collections' | map: 'title' | uniq | join: ',' | json }};
50var afterpay_js_snippet_version = '1.2.1';
51</script>
52<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
53{% else %}
54<!-- Afterpay disabled: {{ cart.currency.iso_code }} != {{ shop.currency }} -->
55{% endif %}
56<!-- End Shopify-Afterpay 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

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

  7. Click Save, and go to the website to review the product and cart pages for Afterpay assets.

    ![Shopify Manually Add Messaging - Config - Step 7 Screenshot.png](../../../assets/images/Shopify Manually Add Messaging - Config - Step 7 Screenshot.png)

Shopify have a help topic on editing Liquid files here.

Add an Afterpay Banner to Shopify

To add an Afterpay Banner to your Shopify page, follow the instructions here.

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 Afterpay US

1// var afterpay_dynamic_cart_integration_enabled = true;
2
3// var afterpay_dynamic_cart_selector = '.cart-drawer__footer .totals';
4
5// var afterpay_dynamic_cart_observer_target = '#CartDrawer';

Example of code with selectors

1var afterpay_dynamic_cart_integration_enabled = true;
2var afterpay_dynamic_cart_selector = '.total';
3var afterpay_dynamic_cart_observer_target = '#CartDrawer';