Checkout Blocks Dynamic Content Image Height

I’m not sure when this started, but I think sometime in the last month or so maybe. But now there is an automatic minimum height of 10rem being applied to the image divs in dynamic content blocks in checkout. You can see in the screenshots below what I’m referring to. These have been working fine since we added them almost a year ago. We can’t add CSS and I can’t edit the CSS that is controlling this, so really have no idea what to do?

This first picture is a screenshot from a few weeks ago where you can see the image height is normal

Now these two screenshots are from the last day or so. You can see the 100px (10rem) min height being applied to the divs that contain the blue stars and the BBB images.

Hi @Andy-Envision, thanks for reporting this!

We’re looking into it now and will follow up as soon as we have more details.

In the meantime, can you confirm whether the “Lowest Price Guaranteed” block is also coming from the Checkout Blocks app?

Hi Paige, thank you for the reply. The “lowest price guaranteed” is also a dynamic content block, but it’s using a Benefit content type and the image is the icon image. The other blocks with the issues are using Image and Text content types.

Please let me know if you have any additional questions or need more info. Thank you!

@Andy-Envision I’m not able to reproduce on another store, could you share an impacted shop’s url or detailed steps to reproduce on a fresh store?

Hi @Kenza_Iraki thank you for the response. Since this is a client store I can’t reveal a preview link publicly, but we’ve also already switched over to using the Benefit content type with the images in the “icon” field. This is seems to be a sufficient workaround, but we would like to get the original issue resolved of course.

I also just tested this on another client’s store who recently upgraded to Plus, and I encountered the same issue. I’ve also tried adding the block to the Main part of checkout and still got the same issue. Here’s a screenshot of that in a draft checkout. The “headset” icon is a png file set to 50px wide (Image content), with a Text content below it, using 1 column and all default block settings.

I could share both of these stores privately if you wanted to log in to investigate them. Thanks!

I was able to replicate the issue using the details you shared.

It looks like these have a minimum height of 100px, so the behavior is most noticeable when the image height is under 100px.

We’ll dig into this further and post an update here once a fix is shipped.

Thank you @Paige-Shopify yes that’s exactly the problem :slight_smile: I’m glad you were able to replicate it! And as I mentioned before, this is a fairly new issue, maybe only a month old if that helps with your troubleshooting.

Thanks again for your help!

1 Like