Image Overlay on PDP Assistance

SeanHebein
Excursionist
22 0 5

Hi there,

I am working on overlaying an image on the top right corner of the first product image on the PDP using a metafield. I have it working on the PLP and I have it working on the PDP if I allow it to overlay on all product images.

 

The code that works to overlay the image on all product images is this (highlighted in red):

 

 

 <div class="grid__item product__media-wrapper">
      <span id="ProductImages"></span>
      
      {% if product.metafields.custom.violator %}
  <div class="violator-image-container">
    <img src="{{ product.metafields.custom.violator }}" alt="Special Offer" />
  </div>
{% endif %}

      <media-gallery id="MediaGallery-{{ section.id }}" role="region"{% if section.settings.enable_sticky_info %} class="product__media-gallery"{% endif %} aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="{{ section.settings.gallery_layout }}">

 

This is what it looks like. You can see the overlayed image that says "tiktok viral"

 

SeanHebein_0-1706141115089.png

I have tried replacing that code with this conditional logic:

{% for image in product.images %}
  {% if forloop.first %}
    <div class="product-image-overlay">
      <img src="{{ image | img_url: 'master' }}" alt="{{ product.title }}" class="product__featured-image">
      {% if product.metafields.custom.violator %}
        <div class="violator-image-container">
          <img src="{{ product.metafields.custom.violator }}" alt="Special Offer" />
        </div>
      {% endif %}
    </div>
  {% else %}
    <img src="{{ image | img_url: 'master' }}" alt="{{ product.title }}" class="product__featured-image">
  {% endif %}
{% endfor %}

And it blows the PDP apart:

 

SeanHebein_1-1706141225040.png

What am I missing?

 

Here's the CSS as well:

.violator-image-container {
  position: absolute;
  top: 0;   /* Aligns to the top */
  right: 0; /* Aligns to the right */
  z-index: 10; /* Ensures the overlay is above other content */
}

.violator-image-container img {
  max-width: 100px; /* Adjust the size of the overlay image as needed */
  height: auto; /* Keeps the image aspect ratio */
}

.violator-image-container-plp {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.violator-image-container-plp img {
  max-width: 75px; /* Adjust as needed */
  height: auto;
}

Thanks in advance!

 

Here's the preview link if you feel so inclined to take a look:

 

https://8hkpax5t9rx94q72-76737937694.shopifypreview.com

 

Sean

 

 

Replies 2 (2)

BSS-Commerce
Shopify Expert
3376 447 495

Hello, it seems you want to show overlay only on the first image of the product.
As I see here, you are trying to add a photo of the product and an overlay when it is the first photo of the product.

view - 2024-01-29T134519.177.png

However, as you can see in the code below, the media-gallery section is the part to display product images so you don't need to add it anymore.

view - 2024-01-29T134553.046.png

Adding images yourself through your code can break the layout. I think the code below will fix the problem, please replace it with the red code you provided:

{% for image in product.images %}
  {% if forloop.first %}
      {% if product.metafields.custom.violator %}
        <div class="violator-image-container">
          <img src="{{ product.metafields.custom.violator }}" alt="Special Offer" />
        </div>
      {% endif %}
  {% endif %}
{% endfor %}

Hope it helps @SeanHebein  

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SeanHebein
Excursionist
22 0 5

I replaced the code and navigated to a PDP and it looks like it is still not working? Any other suggestions? Here's an updated preview link:

https://e7rbpw9uw9sf8ydm-76737937694.shopifypreview.com

 

Thank you!