PlatformsBigCommerce

Afterpay Site Messaging

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

Be careful, as these instructions require editing code. Before you make any changes to theme template files, back up your current theme customizations.

There are two types of theme platform on BigCommerce; Stencil & Blueprint.
Follow the instructions below according to which theme platform your store uses.

If you are not sure what platform is used by your store, see Which Theme Platform do I have?.

Stencil

  1. Go to Storefront › Script Manager

  2. Click Create a Script.

  3. Set up the following:

    • Name of Script: Afterpay Messaging
    • Description: Place Afterpay Site Messaging on product and cart pages
    • Location on page: Footer
    • Select pages where script will be added: Store pages
    • Script category: Essential
    • Script type: Script
    • Load method: Default

  4. Copy and paste the below script into Script Contents:

Stencil
1<!-- Begin Afterpay Stencil Snippet for BigCommerce v3.1.2 -->
2<script>
3{{#or (if page_type '===' 'product') (if page_type '===' 'cart')}}
4    (function(){
5        const supported = ["AUD", "NZD", "USD"];
6        const currency = '{{currency_selector.active_currency_code}}';
7        if (supported.indexOf(currency) > -1) {
8            {{#if page_type '===' 'product'}}
9                let targetSelector = '.productView .productView-price';
10            {{#if product.price.with_tax}}
11                let priceSelector = '.productView-price .price--withTax';
12                let cachedAmount = '{{product.price.with_tax.value}}';
13            {{else}}
14                let priceSelector = '.productView-price .price--withoutTax';
15                let cachedAmount = '{{product.price.without_tax.value}}';
16            {{/if}}
17            {{else if page_type '===' 'cart'}}
18                let targetSelector = 'ul.cart-totals li.cart-total:last-child';
19                let priceSelector = '.cart-total-grandTotal';
20                let cachedAmount = '{{cart.grand_total.value}}';
21            {{/if}}
22                const locales = {
23                    AUD: 'en_AU',
24                    NZD: 'en_NZ',
25                    USD: 'en_US',
26                };
27                const init = function(){
28                    Afterpay.createPlacements({
29                        targetSelector: targetSelector,
30                        attributes: {
31                            locale: locales[currency],
32                            currency: currency,
33                            amount: cachedAmount,
34                        }
35                    });
36                };
37                const script = document.createElement('script');
38                script.src = "https://js.afterpay.com/afterpay-1.x.js";
39                script.dataset.min = "1.00";
40                script.dataset.max = "2000.00";
41                script.onload = function () {
42                    init();
43                    setInterval(() => {
44                        if (cachedAmount != document.querySelector(priceSelector).innerText) {
45                           cachedAmount = document.querySelector(priceSelector).innerText;
46                           if (document.querySelector('afterpay-placement')) {
47                               document.querySelector('afterpay-placement').dataset.amount = cachedAmount;
48                           } else {
49                               init();
50                           }
51                        }
52                    }, 400);
53                };
54                document.head.appendChild(script);
55        }
56    })();
57{{/or}}
58</script>
59<!-- End Afterpay Stencil Snippet for BigCommerce v3.1.2 -->

You can modify the script so that the banner will only display a price breakdown if the product meets your order minimum and maximum thresholds.

To do so, you will need to edit the following values within the script and set the minimum and maximum values to mirror your Afterpay account settings.
script.dataset.min = “1.00”;
script.dataset.max = “800.00”;

For example, if you set the script.dataset.max value to 100.00, your shoppers would see the following banner on a 200.00 priced product:

Banner not showing up?

Sometimes the script may not work because the HTML elements may be named differently depending on your theme. Please work with your developer to help update the script depending on your theme.

Blueprint

  1. Access your themes template files by going to Storefront › Templates Files.
    Find the file Panels/ProductDetails.html.

  2. Copy the script below and paste it in Panels/ProductDetails.html:

Blueprint
1<!-- Begin Afterpay Blueprint Snippet for BigCommerce v2.0.2 -->
2<afterpay-placement></afterpay-placement>
3<script>
4    (function(){
5        const supported = ["AUD", "NZD", "USD"];
6        const currency = '%%GLOBAL_CurrentCurrencyCode%%';
7        if (supported.indexOf(currency) > -1) {
8            let priceSelector = '.ProductDetailsGrid .VariationProductPrice';
9            let cachedAmount = '%%GLOBAL_RawProductPrice%%';
10            const locales = {
11                AUD: 'en_AU',
12                NZD: 'en_NZ',
13                USD: 'en_US',
14            };
15            const placement = document.querySelector('afterpay-placement');
16            placement.dataset.locale = locales[currency];
17            placement.dataset.currency = currency;
18            placement.dataset.amount = cachedAmount;
19            const script = document.createElement('script');
20            script.src = "https://js.afterpay.com/afterpay-1.x.js";
21            script.dataset.min = "1.00";
22            script.dataset.max = "2000.00";
23            script.onload = function () {
24                setInterval(() => {
25                    if (cachedAmount != document.querySelector(priceSelector).innerText) {
26                       cachedAmount = document.querySelector(priceSelector).innerText;
27                       placement.dataset.amount = cachedAmount;
28                    }
29                }, 400);
30            };
31            document.head.appendChild(script);
32        }
33    })();
34</script>
35<!-- End Afterpay Blueprint Snippet for BigCommerce v2.0.2 -->

You should now see Afterpay’s messaging underneath the price of products and the cart total.