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

1. Open the Replo page you want to insert the widget
2. Drag a Liquid component into the page ensuring that you're placing it within a Product component.
3. Navigate to the Liquid components config tag and click Launch Code Editor and paste below code into the editor.
4. 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) -->