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.