最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Metafield not pushing down subsequent content - Stack Overflow

programmeradmin5浏览0评论

I have a metafield I am adding to product pages on my site. The metafield code is here:

  <!--OEM notice-->
  {%- if product.metafields.global.oem -%}
  <div class="oem-container">
    <img src=".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 -%}

The relevant css is here:

/*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;
}

The problem I am running into is it runs into the section below it, the related products section:

  {%- 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>

I've tried simple fixes like adding bottom margin and conditional js for when the metafield exists to no avail. Any help or suggestions appreciated.

发布评论

评论列表(0)

  1. 暂无评论