Ad

Afterpay Snippet Position In Shopify

- 1 answer

I have installed Afterpay's snippet code in a client's Shopify store using the code provided:

<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.3) -->
<script type="text/javascript">
// Editable fields:
var afterpay_min = 0.04;            // As per your Afterpay contract.
var afterpay_max = 1000.00;         // As per your Afterpay contract.
var afterpay_cbt_enabled = false;   // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ).
var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.

// Overrides:



// Non-editable fields:
var afterpay_shop_currency = "AUD";
var afterpay_cart_currency = "AUD";
var afterpay_shop_money_format = "\u003cspan class=money\u003e${{amount}}\u003c\/span\u003e";
var afterpay_shop_permanent_domain = "preciousapril.myshopify.com";
var afterpay_theme_name = "PA2019";
var afterpay_product = null;
var afterpay_current_variant = null;
var afterpay_cart_total_price = 8485;
var afterpay_js_snippet_version = '1.0.3';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<!-- End Shopify-Afterpay JavaScript Snippet (v1.0.3) -->

As instructed, it's placed at the very bottom of the theme.liquid template.

Somehow the snippet is configured to display in the product page beneath the price.

In my case, it's not showing under the price and I have no way to move it: https://preciousapril.com/collections/new-arrivals/products/lucy-mae-floral-bloomer

Any ideas?

Ad

Answer

The reason it does not show below the Price is that it has no information regarding the CSS selector for your price. The Afterpay JS has a global object of themes namely Afterpay.supportedThemes that it uses to find the CSS selector for price on your product pages. But your theme is not one of them so it tries to find the required selector and append the information.

However, as sepcified in the Afterpay integration documentation, you can override the CSS selector. To do so you have to define the afterpay_product_selector. As per your theme, it would be

afterpay_product_selector = '.tt-price';

So your complete code will become

<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.3) -->
<script type=e';

So your complete code will become

<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.3) -->
<script type="text/javascript">
// Editable fields:
var afterpay_min = 0.04;            // As per your Afterpay contract.
var afterpay_max = 1000.00;         // As per your Afterpay contract.
var afterpay_cbt_enabled = false;   // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ).
var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.

// Overrides:
var afterpay_product_selector = '.tt-price'; 


// Non-editable fields:
var afterpay_shop_currency = "AUD";
var afterpay_cart_currency = "AUD";
var afterpay_shop_money_format = "\u003cspan class=money\u003e${{amount}}\u003c\/span\u003e";
var afterpay_shop_permanent_domain = "preciousapril.myshopify.com";
var afterpay_theme_name = "PA2019";
var afterpay_product = null;
var afterpay_current_variant = null;
var afterpay_cart_total_price = 8485;
var afterpay_js_snippet_version = '1.0.3';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<!-- End Shopify-Afterpay JavaScript Snippet (v1.0.3) -->
Ad
source: stackoverflow.com
Ad