移动端配送说明Div位置错误 需固定显示在立即购买按钮下方

移动端配送说明错位到立即购买按钮上方，核心是小屏断点下的样式异常：要么是配送栏被设置了浮动/绝对定位脱离了正常文档流，要么是购买区域flex布局的子元素order值配置错误，也有部分情况是主题脚本在移动端渲染时打乱了原有DOM顺序。

1. 调整DOM结构 #

首先保证愿望清单按钮、配送说明栏在HTML结构上，直接紧跟在「立即购买」按钮节点之后，不要被其他独立容器隔开。建议把两个元素统一包裹在专属容器里，避免被脚本拆分，简化后的Liquid代码如下：

<!-- 保留你原有的立即购买按钮代码，位置不要动 -->
<button type="submit" name="add" class="add-to-cart button">
  {{ 'products.product.add_to_cart' | t }}
</button>

<!-- 愿望清单+配送说明统一放在立即购买按钮后的容器内 -->
<div class="post-purchase-actions">
  {% if settings.hide_wishlist == false %}
  {% assign target_handle = product.handle %}
  {% if template == 'search' %}{% assign target_handle = item.handle %}{% endif %}
  <button class="btn-wishlist button btn-default wishlist-btn" data-product-handle="{{ target_handle }}" type="button" data-toggle="tooltip" title="{{ 'products.product.add_to_wishlist' | t }}" data-original-title="{{ 'products.product.add_to_wishlist' | t }}">
    <span>{{ 'products.product.add_to_wishlist' | t }}</span>
  </button>
  {% endif %}
  <div class="delivery-bar">
    <svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4256 8.00195V6.9082H22.6793L19.6066 2.80664H14.2734V13.2793H15.8649C16.0392 14.3758 16.9362 15.2152 18.0125 15.2152C19.0889 15.2152 19.9859 14.3785 20.1601 13.2793H22.9869V8.00195H17.4256ZM18.0125 14.1215C17.377 14.1215 16.8593 13.5691 16.8593 12.891V12.8883V12.8773C16.867 12.2074 17.3846 11.6605 18.0125 11.6605C18.6404 11.6605 19.1581 12.2074 19.1658 12.8773V12.891C19.1658 13.5691 18.6481 14.1215 18.0125 14.1215Z" fill="#AFAFAF"/>
<path d="M12.3215 0.783203H1.67062C1.11706 0.783203 0.666016 1.26445 0.666016 1.85508V12.2102C0.666016 12.8008 1.11706 13.282 1.67062 13.282H3.97968C4.15395 14.3785 5.05092 15.218 6.12728 15.218C7.20364 15.218 8.10061 14.3813 8.27488 13.282H13.2492V1.77305C13.2492 1.22891 12.834 0.783203 12.3215 0.783203ZM6.12728 14.1215C5.49171 14.1215 4.97403 13.5691 4.97403 12.891V12.8883V12.8773C4.98172 12.2074 5.4994 11.6605 6.12728 11.6605C6.75516 11.6605 7.27284 12.2074 7.28053 12.8773V12.891C7.28053 13.5691 6.76285 14.1215 6.12728 14.1215Z" fill="#AFAFAF"/>
</svg>
    <span>Delivery in 2 to 5 working days</span>
  </div>
</div>

注：上面代码把原来重复的wishlist按钮逻辑做了简化，不影响原有功能

2. 添加全局CSS强制固定布局 #

把下面代码复制到主题的自定义CSS输入框，或者主题全局样式文件（通常是theme.css/base.css）末尾：

/* 购买区域布局强制规则 */
.product-form, .product__info-container .product-form, .add-to-cart-wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}

/* 固定元素顺序：立即购买 > 愿望清单 > 配送说明 */
button[name="add"], .add-to-cart-btn, .product-form__submit {
  order: 1 !important;
  float: none !important;
  position: relative !important;
  width: 100%;
  margin-bottom: 12px;
}
.wishlist-btn.btn-wishlist {
  order: 2 !important;
  float: none !important;
  position: static !important;
  width: 100%;
  margin-bottom: 12px;
}
.delivery-bar {
  order: 3 !important;
  float: none !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 容器清除浮动，避免元素错位 */
.post-purchase-actions {
  width: 100%;
  clear: both;
  display: flex;
  flex-direction: column;
}

/* 移动端断点兜底，断点值可根据你主题的实际移动端断点调整 */
@media screen and (max-width: 767px) {
  .delivery-bar {
    clear: both !important;
    z-index: 1;
  }
}

3. 适配调整说明 #

• 如果上面CSS里的立即购买按钮类名和你主题实际类名不匹配，按F12打开开发者工具选中立即购买按钮，复制它的真实类名替换对应选择器即可，核心逻辑是给三个元素设置递增的order值，强制渲染顺序
• 所有float: none、position: static规则是为了清除小屏下被错误设置的浮动、绝对定位属性——这类属性是导致元素脱离正常文档流、跑到其他元素上方的最常见原因
• 代码添加完成后，清空主题缓存、CDN缓存，用真机访问测试即可，不要仅依赖浏览器开发者工具的移动端模拟器，部分移动端浏览器自带的默认样式会干扰布局

内容的提问来源于stack exchange，提问作者John Moriarty