Shopify中实现Sezzle文本显示在Afterpay组件下方求助

1. 重构HTML结构 #

将Sezzle内容从Afterpay的段落标签外移，确保它在Afterpay组件后独立成块：

找到Afterpay段落的闭合标签</p>，在其后添加独立的Sezzle文本容器：

{% if afterpay_count_eligible_variants > 0 %}
  <!-- 原Afterpay段落代码保留不变 -->
  </p>

  <!-- 新增Sezzle专属容器 -->
  <div class="sezzle-text-container" style="display: none; margin-top: 10px;">
    <p class="sezzle-button-text">
      分4期免息支付，使用
      <a href="https://sezzle.com/terms" target="_blank" style="display: inline-block; margin-left: 5px;">
        <img src="https://static.sezzle.com/payment-method/assets/badges/sezzle-logo.svg" alt="Sezzle" width="75" height="15" style="vertical-align: middle;">
      </a>
    </p>
  </div>

  <!-- 原Afterpay后续代码保留不变 -->
{% endif %}

2. 优化CSS布局 #

确保Sezzle容器以块级元素显示，避免布局混乱：

.sezzle-text-container {
  display: block !important;
  width: 100%;
  clear: both;
  text-align: center;
}

.sezzle-button-text {
  line-height: 28px;
  margin: 0;
}

3. 简化地理定位脚本 #

调整美国地区的显示逻辑，统一控制元素显隐：

<script>
  ymaps.ready(function() {
    const country = ymaps.geolocation.country;
    const $afterpayBlock = $('#afterpay-block');
    const $sezzleContainer = $('.sezzle-text-container');
    const $zipWidget = $('#shopify-zip-prod-widget');
    const $klarnaElements = $('#klarna, #klarna-text');

    switch(country) {
      case "New Zealand":
      case "Australia":
        $afterpayBlock.show();
        $sezzleContainer.hide();
        $zipWidget.show();
        $klarnaElements.show();
        break;
      case "United States":
        $afterpayBlock.show();
        $sezzleContainer.show();
        $zipWidget.hide();
        $klarnaElements.hide();
        $('.sezzle-checkout-button').hide();
        break;
      default:
        $afterpayBlock.hide();
    }
  });
</script>

4. 清理冗余代码 #

删除原代码中零散的Sezzle样式和元素引用，确保新容器是控制Sezzle显示的唯一入口。

完成以上调整后，美国地区用户将看到Afterpay组件下方垂直显示Sezzle文本，符合预期布局。

内容的提问来源于stack exchange，提问作者Shopify-Developer