> This page is for Afterpay Online Developer, version v1.
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# Afterpay Product Page Display

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) -->
```

2. Navigate to Shopify Admin.

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

![ap-product-page-display-a.png](/_fern-img/3dfa2fd96eba6f0494d8ac32743836eb62da4d6798f784e79b77ee3c3028a8cf.webp)

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

![ap-product-page-display-1.png](/_fern-img/87dcad54f569f7911da81bad777694fb7d7ab30cdba4f2fe922e75208fb049f6.webp)

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

![ap-product-page-display-2.png](/_fern-img/5c957bd2a45b2ae3c8e47d0081711f89f7024843a9b2c89a83ca87ca701ac896.webp)

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

![ap-product-display-2a.png](/_fern-img/bc7c6f4dbe25d13713e538b8dec5f71310db93881b1d5b95491a23525327fb9d.webp)

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

![ap-product-page-display-2b.jpg](/_fern-img/49c4a55e59639c8383a0dcb0e866b46f9950558c8e1bdc753d7b0b2a00777266.webp)

8. Click **Save**.

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

![ap-product-page-display-3.png](/_fern-img/a38b7312186396a8a4f5899704c06fbbce8c3d03c8013abb7d4cd177901ef118.webp)