For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
HomeGuidesAPI Reference
HomeGuidesAPI Reference
  • Welcome
    • Getting Started with Afterpay Online
  • SHOPIFY - AU, NZ & US
    • Pre-Integration Checks
    • Afterpay Gateway Configuration
    • Afterpay Product Page Display
    • Frequently Asked Questions
  • WOOCOMMERCE - AU, NZ & US
    • Pre-Integration Checks
    • Afterpay Gateway Installation
    • Afterpay Gateway Configuration
    • Frequently Asked Questions
    • Plugin Updates
  • BIGCOMMERCE - AU, NZ & US
    • Pre-Integration Checks
    • Afterpay Gateway Configuration
  • Neto - AU - NZ
    • Pre-Integration Checks
    • neto-afterpay-gateway-configuration
  • Lightspeed - AU
    • Afterpay Gateway Configuration
  • ECORNER - AU & NZ
    • Afterpay Gateway Configuration
  • Ecwid - AU, NZ & US
    • Afterpay Gateway Configuration
  • Enflexion - AU
    • Afterpay Gateway Configuration
  • ROCKETSPARK - AU, NZ & US
    • Afterpay Gateway Configuration
  • SPIFFY STORES - AU
    • Afterpay Gateway Configuration
  • Kynect - AU & NZ
    • Afterpay Gateway Configuration
  • Website World - AU, NZ & US
    • Afterpay Gateway Configuration
  • HaveALook - AU
    • Afterpay Gateway Configuration
  • STORBIE - AU & NZ
    • Afterpay Gateway Configuration
LogoLogo
On this page
  • Configuration
SHOPIFY - AU, NZ & US

Afterpay Product Page Display

Was this page helpful?
Previous

Frequently Asked Questions

Next
Built with

The Afterpay logo and instalment amounts will appear on the Shopify Product Pages.

Note

The display may differ depending on site-specific theme and layout.

Configuration

Completing the below steps will position the Afterpay Product Page assets on your Shopify website.

  1. Copy the JavaScript below:
<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.1.6) -->
{% if cart.currency.iso_code == shop.currency %}
<script type="text/javascript">
// Overrides:
// var afterpay_min = 1.00; // As per your Afterpay contract.
// var afterpay_max = 2000.00; // As per your Afterpay contract.
// var afterpay_msg_size = 'sm'; // Can be 'xs', 'sm', 'md' or 'lg'.
// var afterpay_bold_amount = true;
// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_modal_open_icon = true;
// var afterpay_hide_upper_limit = false;
// var afterpay_hide_lower_limit = true;
// var afterpay_show_if_outside_limits = true;
// var afterpay_cbt_enabled = false;
// var afterpay_apr_loans_available = false;
// var afterpay_product_integration_enabled = true;
// var afterpay_product_selector = '#product-price-selector';
// var afterpay_variable_price_fallback = false;
// var afterpay_variable_price_fallback_selector = '';
// var afterpay_variable_price_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
// var afterpay_cart_integration_enabled = true;
// var afterpay_cart_static_selector = '#cart-subtotal-selector';
// var afterpay_variable_subtotal_fallback = false;
// var afterpay_variable_subtotal_fallback_selector = '';
// var afterpay_variable_subtotal_fallback_method = 'mutation'; // Can be 'mutation' or 'interval'.
// var afterpay_cart_dynamic_integration_enabled = false;
// var afterpay_footer_logo_enabled = true;
// var afterpay_footer_logo_format = 'icon'; // Can be 'icon', 'stacked' or 'logo'.
// var afterpay_footer_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_footer_logo_background = 'border'; // Can be 'border' or 'transparent'.
// var afterpay_footer_logo_container = 'footer ul.payment-icons';
// var afterpay_footer_logo_template = '<li class="payment-icon"><object data="{logo_path}" type="image/svg+xml"></object></li>';
// Non-editable fields:
var afterpay_js_language = {{ localization.language.iso_code | slice: 0, 2 | json }};
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_product = {{ product | 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.6';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
{% else %}
<!-- Afterpay disabled: {{ cart.currency.iso_code }} != {{ shop.currency }} -->
{% endif %}
<!-- End Shopify-Afterpay JavaScript Snippet (v1.1.6) -->
  1. Navigate to Shopify Admin.

  2. Navigate to: Sales Channels > Online Store > Themes.

ap-product-page-display-a.png

  1. Navigate to ‘Actions’ > ‘Edit Code’.

ap-product-page-display-1.png

  1. Under the ‘Layout’ folder, click on ‘theme.liquid’.

ap-product-page-display-2.png

  1. Scroll to the bottom of the ‘theme.liquid’ file.

ap-product-display-2a.png

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

ap-product-page-display-2b.jpg

  1. Click Save.

  2. Navigate to the website and review the product page for Afterpay assets. Example below

ap-product-page-display-3.png