Shopify merchants love Afterpay as it helps them increase AOV and sales. With Afterpay merchants can offer customers the option to purchase what they want, and pay over 4 or 6 weeks — with no surprises, and no fees when paid on time. Afterpay works with the pages you build on Replo via a Liquid component embed.
To begin, you need to add Afterpay to your Shopify store (detailed guide for doing so here).
To configure Afterpay on Replo pages:
The Afterpay widget is typically inserted inside a buy box just below the product price
- Open the Replo page you want to insert the widget
- Drag a Liquid component into the page ensuring that you're placing it within a Product component.
- Navigate to the Liquid components config tag and click Launch Code Editor and paste below code into the editor.
- Click Save Code and publish the page.
The Afterpay logo and widget will appear on your Replo page.
Afterpay Code Snippet
<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.1.5) -->
{% if cart.currency.iso_code == shop.currency %}
<script type="text/javascript">
// Overrides:
var afterpay_apr_loans_available = true;
// Non-editable fields:
{{ localization.language.iso_code | json }}
{% if localization.language.iso_code %}
var afterpay_js_language = {{ localization.language.iso_code | slice: 0, 2 | json }};
{% else %}
var afterpay_js_language = "en";
{% endif %}
var afterpay_js_country = {{ localization.country.iso_code | json }};
var afterpay_shop_currency = {{ shop.currency | json }};
var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
var afterpay_shop_money_format = {{ shop.money_format | json }};
var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var afterpay_theme_name = {{ theme.name | json }};
var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var afterpay_cart_total_price = {{ cart.total_price | json }};
var afterpay_js_snippet_version = '1.1.5';
var afterpay_product = {{ product | json }};
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<div id="afterpay-wrapper"></div>
<script type="text/javascript">
function checkAndEnableAfterpay() {
var title = {{ product.title | json }};
var attributes = {
size: window?.afterpay_msg_size ?? "sm",
showUpperLimit: !window?.afterpay_hide_upper_limit,
badgeTheme: window?.afterpay_logo_theme ?? "black on mint",
isElegible: !title.includes("Gift Card"),
locale: window?.afterpay_js_locale ?? afterpay_js_language + "_" + afterpay_js_country,
currency: {{ cart.currency.iso_code | json }},
amount: {{ product.selected_or_first_available_variant.price | money_without_currency }},
amountSelector: "#afterpay-wrapper"
}
window.Afterpay.JsLib.createPlacements({
targetSelector: "#afterpay-wrapper",
attributes
})
}
window.addEventListener("Afterpay.ready", checkAndEnableAfterpay)
</script>
{% else %}
<!-- Afterpay disabled: {{ cart.currency.iso_code }} != {{ shop.currency }} -->
{% endif %}
<!-- End Shopify-Afterpay JavaScript Snippet (v1.1.5) -->