> For the complete documentation index, see [llms.txt](https://useepay.gitbook.io/useepay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://useepay.gitbook.io/useepay/doc/shopify-qi-ta-gong-neng/afterpay-fen-qi-zhan-shi.md).

# Afterpay分期展示

## 1.选择主题

<figure><img src="https://2979444288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQHZQcHwx5gTbDr4V6t%2Fuploads%2FTzSAeWE6ME7mkLPXBHmV%2Fimage.png?alt=media&amp;token=581f9d0b-95bd-4388-a7f2-774f4452a02f" alt=""><figcaption></figcaption></figure>

步骤1：找到 Online Store，选择 Themes

步骤2：点击三个点

步骤3：下拉选择 Edit dode、

## 2.搜索main-product

<figure><img src="https://2979444288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQHZQcHwx5gTbDr4V6t%2Fuploads%2F381mKkImDIUy8MAMocVr%2Fimage.png?alt=media&amp;token=2da3bba1-d9ac-42d1-b54b-3dadc9522faa" alt=""><figcaption></figcaption></figure>

步骤1：搜索 main-product

步骤2：选择 main-product

步骤3：图片所示位置添加如下代码：

| <p>\<!-- Afterpay Initialization Script --><br>  \<script src="<https://js.afterpay.com/afterpay-1.x.js>" defer onload="initializeAfterpay()">\</script><br></p> |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |

步骤4： 图片所示位置添加如下代码（搜索【id="price-{{ [section.id](http://section.id/) }}"】，该位置下面添加）：

\| <p>\<div id="afterpay-messaging-widget">\</div><br>\<script><br>function initializeAfterpay() {<br>  const widget = document.getElementById('afterpay-messaging-widget');<br><br>  if (widget && typeof Afterpay !== 'undefined') {<br>  Afterpay.createPlacements({<br>  targetSelector: "#afterpay-messaging-widget",<br>  // 金额要大于等于400且币种要是USD才生效，否则就是正常的分四期<br>  attributes: {<br>  locale: "en\_US",<br>  currency: "{{shop.currency}}",<br>  amount: "{{ product.selected\_or\_first\_available\_variant.price | money\_without\_currency }}",<br>  aprLoansAvailable: "true",<br>}<br>});<br>} else {<br>  console.error('Afterpay script not loaded or target element not found.');<br>}<br>}<br>\</script><br></p> |
\| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

## 效果图：

<figure><img src="https://2979444288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQHZQcHwx5gTbDr4V6t%2Fuploads%2FCQWcwRxKMxkEkB3PJvGJ%2Fimage.png?alt=media&amp;token=776c492f-6c1d-4bb2-893d-a3739912488c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2979444288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQHZQcHwx5gTbDr4V6t%2Fuploads%2FYVXXSaCjkTWxPSFGbIpt%2Fimage.png?alt=media&amp;token=7e45aac4-3e7b-4354-bacf-4177903b07fa" alt=""><figcaption></figcaption></figure>