Metafield内容未向下推送，与推荐产品区块重叠求助

问题描述 #

在Shopify店铺产品页面添加Metafield代码并配置CSS后，Metafield容器与下方的互补产品（complementary_products）区块发生重叠。尝试过添加底部外边距、编写条件JS等常规修复方法，均未生效。

相关代码 #

Metafield代码（存在语法错误） #

<!--OEM notice-->
{%- if product.metafields.global.oem -%}
<div class="oem-container">
  <img src="https://cdn.shopify.com/s/files/1/0822/0771/files/oem_f5d0b37c-a593-42cd-ada2-6d4cfc753f04.jpg?v=1743175979" 
       alt="OEM Image" class="oem-image" />
  <p class= "oem-title"<strong>title goes here</strong></p> <!-- 此处缺少闭合的>，语法错误 -->
  <p class="oem-text">oem notice goes here</p>
</div>
{%- endif -%}

修正后的Metafield代码 #

<!--OEM notice-->
{%- if product.metafields.global.oem -%}
<div class="oem-container">
  <img src="https://cdn.shopify.com/s/files/1/0822/0771/files/oem_f5d0b37c-a593-42cd-ada2-6d4cfc753f04.jpg?v=1743175979" 
       alt="OEM Image" class="oem-image" />
  <p class="oem-title"><strong>title goes here</strong></p>
  <p class="oem-text">oem notice goes here</p>
</div>
{%- endif -%}

相关CSS代码 #

/*oem image*/
.oem-container {
  background: var(--secondary-background);
  border-radius: 3px;
  padding: 20px;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  align-items: center;
  margin-bottom: 10px;
}

.oem-image {
  max-width: 250px; /* Adjust as needed */
  margin-right: 10px;
}

.oem-title {
  align-items: center;
}

互补产品区块代码 #

{%- when 'complementary_products' -%}
<product-recommendations class="product-block-list__item product-block-list__item--complementary" intent="complementary" product="{{ product.id }}" limit="{{ block.settings.products_count }}" section-id="{{ section.id }}" {{ block.shopify_attributes }}>
  {%- if recommendations.performed and recommendations.products_count > 0 -%}
    <div class="card">
      <div class="card__header">
        <h2 class="card__title heading h3">{{ block.settings.title | escape }}</h2>
      </div>

      <div class="card__section">
        <div class="complementary-product-list">
          {%- for product in recommendations.products -%}
            {%- render 'product-item', product: product, horizontal: true, hide_labels: true, show_add_to_cart: block.settings.show_quick_buy, complementary_products: true -%}
          {%- endfor -%}
        </div>
      </div>
    </div>
  {%- endif -%}
</product-recommendations>

解决建议 #

• 修复HTML语法错误：优先修正Metafield代码中<p class= "oem-title"<strong>的语法问题，添加缺失的>，浏览器解析异常可能直接导致布局错乱。
• 触发BFC（块级格式化上下文）：给.oem-container添加display: flex;（当前仅设置了align-items: center但未声明flex布局），同时添加overflow: hidden;，确保容器能正确计算自身高度，避免下方元素向上重叠。修改后的CSS：

  .oem-container {
    background: var(--secondary-background);
    border-radius: 3px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* 新增 */
    align-items: center;
    margin-bottom: 30px; /* 增大底部外边距 */
    overflow: hidden; /* 新增 */
  }
  

• 提高CSS优先级：如果主题自带的CSS覆盖了你的外边距设置，使用更具体的选择器或!important强制生效，例如：

  .product-page .oem-container {
    margin-bottom: 30px !important;
  }
  

• 调整互补产品区块的间距：给互补产品区块添加顶部外边距，确保和上方容器拉开距离：

  .product-block-list__item--complementary {
    margin-top: 20px;
  }
  

• 清除浮动：如果页面存在浮动元素干扰布局，在Metafield容器后添加清除浮动的元素：

  {%- if product.metafields.global.oem -%}
  <div class="oem-container">
    <!-- 容器内容 -->
  </div>
  <div style="clear: both;"></div> <!-- 新增清除浮动 -->
  {%- endif -%}
  

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