Why are product grid images only appearing after resizing the page?

Technical Q&A
1

Hi all,

I just created a product grid section that displays certain products depending on your selection choice from a dropdown menu. It works beautifully, except that the product images in the grid do not display unless I slightly resize the page. It doesn’t matter if I make the page larger or smaller – it’s almost as if the page just needs a little “kick” to say ‘oh yea, i need to show the product images now’. Any thoughts on why this is happening or how I can fix this? I’m posting my code below in case it’s helpful to see…

{% when ‘product_grid_copy’ %}

{% assign collection_object1 = collections[block.settings.collection1] %} {% assign collection_object2 = collections[block.settings.collection2] %} {% assign collection_object3 = collections[block.settings.collection3] %} .box { color: #000000; padding: 20px; display: none; margin-top: 20px; }
I enjoy

{{block.settings.collection_title1}}

{% paginate collection_object1.products by 4 %} {% include 'product-grid-copy', products: collection_object1.products %} {% endpaginate %}

{{block.settings.collection_title2}}

{% paginate collection_object2.products by 4 %} {% include 'product-grid-copy', products: collection_object2.products %} {% endpaginate %}

{{block.settings.collection_title3}}

{% paginate collection_object3.products by 4 %} {% include 'product-grid-copy', products: collection_object3.products %} {% endpaginate %}
2

This code doesn’t show the actual code for the product images. We’d need to see what’s in the ‘product-grid-copy’ snippet. A link to a page would be best to help troubleshoot. Anyway, my guess is that there’s some kind of lazy loading feature for the images that needs to be kicked into gear once the products are shown.

3

Here’s the code from the ‘product-grid-copy.liquid’ file!

{% capture promo_block %}

{% include 'promo-block', title: promo_block_title, subtitle: promo_block_subtitle, image: promo_block_image, link: promo_block_link, link_label: promo_block_link_label, position: promo_block_position, product_ratio: true %}
{% endcapture %}

{% assign card_margin_bottom = 4 %}

{% unless product_card_margin_bottom == blank %}
{% assign card_margin_bottom = product_card_margin_bottom %}
{% endunless %}

{% for product in products %} {% if promo_block_enabled and forloop.index == promo_block_position %} {{ promo_block }} {% endif %}
{% include 'product-card', id: product.id, product: product, image: product.featured_image, description: product.metafields.properties.cupping_notes, %}
{% endfor %} {% if promo_block_enabled and products.size < promo_block_position %} {{ promo_block }} {% endif %}

and here is a link to the page where I am testing this feature (all the way at the bottom of the page): https://ysiyk3ehevlk3q6j-5158731866.shopifypreview.com/pages/test-page-two

Thanks!

4

Looks like those product cards are meant to fade in using ScrollReveal - https://scrollrevealjs.org/guide/hello-world.html I suppose it doesn’t work because they are all hidden to begin with. So you probably have to call some JS to “reveal” them.

ScrollReveal().reveal('.box .product-card');
5

Okay that makes sense. But I don’t quite understand where to paste that line of code that you sent? Do you mind helping me a little bit further? Thanks in advance!

6

Try this:
7

This worked perfectly!! Thank you SO much!